:root{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:#243b3c;background:#f5f7f3;font-synthesis:none;line-height:1.65}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:16px;max-width:1440px;margin:auto;padding:32px 32px 12px}.brand-icon{background:#177c70;color:white;font-size:35px;border-radius:16px;width:58px;height:58px;text-align:center;transform:rotate(-7deg)}h1{font-size:clamp(20px,3vw,30px);margin:0;letter-spacing:.02em}h1 span{font-size:12px;color:#66817a;vertical-align:middle;white-space:nowrap}.eyebrow{font-size:12px;color:#52786d;margin:0 0 3px;letter-spacing:.12em}main{max-width:1440px;margin:auto;padding:0 32px}.intro{margin:12px 0 26px;color:#59706b;font-size:14px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px}section{background:white;border:1px solid #e0e7e1;border-radius:18px;padding:22px;box-shadow:0 3px 12px #20382c03}aside{display:flex;flex-direction:column;gap:18px}h2{font-size:17px;margin:0;display:flex;align-items:center;gap:9px}h2 b{display:inline-grid;place-items:center;border-radius:50%;background:#e4f2e9;color:#177c70;width:28px;height:28px;font-size:14px}p{font-size:13px;color:#61736f;margin:12px 0}strong{color:#334e46}button,.file-button{font:inherit;font-size:14px;font-weight:650;min-height:44px;padding:10px 14px;border:1px solid #d8e2dd;border-radius:10px;background:white;color:#30574f;cursor:pointer;text-align:center;display:inline-flex;justify-content:center;align-items:center;gap:7px;touch-action:manipulation}button:hover:not(:disabled),.file-button:hover{background:#edf5ef;border-color:#86b4a7}button:focus-visible,a:focus-visible,.file-button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #e8a93e;outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed}.primary,.file-button{background:#177c70;color:white;border-color:#177c70}.primary:hover:not(:disabled),.file-button:hover{background:#106357;color:white}.file-button{width:100%}#upload{display:block;width:100%;font-size:12px;margin-top:10px}#upload::file-selector-button{display:none}.small{font-size:11px;line-height:1.8;color:#73817b}.preview{position:relative;min-height:145px;display:grid;place-items:center;border:1px solid #e2e6df;border-radius:10px;overflow:hidden}.checker{background-color:#fff;background-image:conic-gradient(#e9ece7 25%,transparent 0 50%,#e9ece7 0 75%,transparent 0);background-size:16px 16px}.preview canvas{max-width:100%;max-height:240px;width:auto;height:auto;display:none}.preview span{font-size:11px;background:#ffffffd9;padding:6px;color:#7c887e}.preview canvas.ready{display:block}#source{cursor:crosshair;touch-action:manipulation}.result{min-height:120px;margin:12px 0}.result canvas{max-height:175px}.color-row{display:flex;align-items:center;gap:8px;font-size:12px;margin:16px 0}#swatch{width:23px;height:23px;border:1px solid #ccd7d0;border-radius:50%;background:#f1f2ef}.range-label{display:flex;justify-content:space-between;font-size:13px}output{font-weight:700;color:#177c70}input[type=range]{width:100%;accent-color:#177c70;min-height:30px;margin:0}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:#89968e}.subtle{background:#f7f9f5}#restore{width:100%;font-size:12px}.section-heading{display:flex;justify-content:space-between;align-items:center}.badge{font-size:12px;background:#f0f3ec;border-radius:20px;padding:3px 13px}.top-actions{display:flex;justify-content:space-between;gap:12px;margin:18px 0}.board-wrap{position:relative;border:1px solid #d8e1da;border-radius:12px;overflow:hidden;background:white;box-shadow:inset 0 0 20px #20382c04}#board{width:100%;height:auto;aspect-ratio:3/2;display:block;touch-action:none;cursor:default}#board-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;color:#91a198;font-size:15px}#board-empty div{font-size:48px;letter-spacing:8px;color:#bbcec1;margin-bottom:10px}#board-empty small{font-size:12px;margin-top:6px}#board-empty[hidden]{display:none}.selection-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 12px}.selection-bar strong{font-size:12px}#next{font-size:11px;padding:6px 10px}.edit-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.danger{color:#ad5445}.board-help{margin-bottom:0}.save-section{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;background:#eff5e9}.save-section p{margin-bottom:0}.save-section button{white-space:nowrap}#status{padding:0 4px;color:#177c70;font-size:13px}#download-fallback{padding:15px;background:#fff4d9;border-radius:10px}a{color:#177c70}footer{text-align:center;padding:32px 10px;font-size:11px;color:#829087}@media(min-width:1200px){.edit-buttons{grid-template-columns:repeat(6,1fr)}}@media(max-width:850px){.layout{grid-template-columns:250px minmax(0,1fr);gap:16px}main{padding:0 20px}header{padding:24px 20px 10px}section{padding:16px}.save-section{align-items:stretch;flex-direction:column}.edit-buttons{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.layout{display:block}aside{gap:14px;margin-bottom:18px}.workspace{width:100%}main{padding:0 14px}header{padding:22px 14px 8px;gap:12px}.brand-icon{width:45px;height:45px;font-size:28px}.eyebrow{font-size:10px}.intro{font-size:12px;margin-bottom:18px}.preview{min-height:120px}.preview canvas{max-height:230px}.edit-buttons{grid-template-columns:repeat(3,1fr)}button{font-size:12px;padding:9px}.selection-bar{flex-wrap:wrap}.board-section{padding:14px}#board-empty{font-size:13px}#board-empty div{font-size:30px}#board-empty small{font-size:10px}}
/* Keep the native file control keyboard-accessible without a stale filename label. */
#upload{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.file-button:has(+ input:focus-visible){outline:3px solid #e8a93e;outline-offset:3px}

.tile-colors{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #e0e7e1;font-size:12px}
#tile-color{width:48px;height:44px;padding:3px;border:1px solid #d8e2dd;border-radius:8px;background:white;cursor:pointer}
#tile-color:disabled{opacity:.42;cursor:not-allowed}
#tile-color-state{min-width:60px;color:#61736f;font-size:11px}
.color-presets{display:flex;gap:4px}
.color-presets button{width:44px;padding:0;background:transparent}
.color-presets button::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--preset);border:1px solid #0002}
.color-presets button[aria-pressed=true]{outline:2px solid #177c70;outline-offset:-2px}
#color-reset{font-size:12px}