*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#edf2eb;color:#243d39;font-family:system-ui,'Malgun Gothic',sans-serif}main{max-width:880px;margin:auto;padding:clamp(16px,4vw,32px)}.menu,.studio{background:#fffdf7;border-radius:24px;padding:clamp(20px,4vw,32px);box-shadow:0 8px 30px #30443718}.eyebrow{font-size:14px;font-weight:800;color:#356b59}h1{font-size:clamp(27px,5vw,38px);margin:5px 0 12px}h2{font-size:21px;margin:0 0 10px}p{line-height:1.6;margin:8px 0}.lead{font-size:20px;font-weight:700}.note{color:#52675f;font-size:14px}.menu a{display:inline-flex;min-height:44px;align-items:center;color:#235b91;font-weight:700}.menu-choices,.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}button{font:inherit;cursor:pointer;color:#183e34;touch-action:manipulation}button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible{outline:4px solid #125ab3;outline-offset:3px}button:disabled{cursor:default;opacity:.65}.menu-choices button,.controls button{min-height:50px;border:1px solid #84a798;border-radius:12px;background:#fff;padding:10px 16px;font-weight:700}.menu-choices button:first-child,#finish{background:#286650;color:white}#pause[aria-pressed="true"]{background:#d5ebd7;border:3px solid #286650}#work{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;margin-top:20px}.card{background:#f5f7ee;border:1px solid #c9dacd;border-radius:16px;padding:18px}.palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.color{min-height:68px;display:flex;align-items:center;gap:8px;text-align:left;background:white;border:1px solid #8aa99a;border-radius:12px;padding:8px;font-weight:800}.color small,.area small{display:block;font-size:13px;font-weight:600}.swatch{flex:none;width:32px;height:32px;border:2px solid #43564c;border-radius:50%}.color-red .swatch{background:radial-gradient(#64352c 2px,transparent 3px) 0 0/8px 8px,#c6504a}.color-yellow .swatch{background:repeating-linear-gradient(0deg,#795c20 0 2px,#f1cd61 2px 7px)}.color-blue .swatch{background:repeating-linear-gradient(0deg,transparent 0 6px,#244a6b 6px 8px),repeating-linear-gradient(90deg,#5285b6 0 6px,#244a6b 6px 8px)}.color-white .swatch{background:repeating-radial-gradient(circle at 0 0,#8a8a81 0 2px,#f2eee5 2px 7px)}.mixed{min-height:3em;font-weight:700}.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px}.area{min-height:160px;background:#fff;border:1px solid #8aa99a;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800}.area svg{display:block;width:100%;max-width:100px;height:100px;fill:var(--paint);stroke:#29483e;stroke-width:3;stroke-linejoin:round}.status{min-height:3em;font-weight:700;background:#e7f1e7;border-left:5px solid #397a5e;padding:10px 14px;border-radius:6px;margin-top:16px}.complete{margin-top:16px}.complete p{font-weight:700}.studio button,.menu button{min-width:44px;min-height:48px}@media(max-width:620px){#work{grid-template-columns:1fr}.areas{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
dialog{width:min(90vw,32rem);max-width:90vw;border:2px solid #526f60;border-radius:12px;padding:20px;background:#fff;color:#1e3529}dialog::backdrop{background:rgb(20 35 27 / 55%)}dialog button{font:inherit;min-width:44px;min-height:48px;padding:10px 16px;margin:4px;border:2px solid #526f60;border-radius:10px;background:#fff;color:#1e3529}dialog button:focus-visible{outline:4px solid #125ab3;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.shown-areas{display:flex;flex-wrap:wrap;gap:8px}.shown-areas figure{margin:0;text-align:center;font-weight:700}.shown-areas svg{display:block;width:100px;height:100px;fill:var(--paint);stroke:#29483e;stroke-width:3;stroke-linejoin:round}