:root{font-family:Inter,"Helvetica Neue","Noto Sans JP",Arial,sans-serif;color:#263e37;background:#f6f8f5;font-synthesis:none;--green:#286c57;--muted:#728078;--line:#dce4dd}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0}button:focus-visible,select:focus-visible,a:focus-visible,canvas:focus-visible,summary:focus-visible{outline:3px solid #b86a20;outline-offset:4px}button:disabled{opacity:.38;cursor:default}button:hover:not(:disabled){filter:brightness(.96)}[hidden]{display:none!important}.header{height:102px;max-width:1360px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;letter-spacing:.04em}.brand-symbol{font-size:46px;font-weight:400;color:var(--green)}.brand small{display:block;font-size:9px;letter-spacing:.22em;margin-top:5px;font-weight:500}.progress-button{background:white;border:1px solid var(--line);border-radius:30px;min-height:44px;padding:10px 18px;display:flex;gap:12px;align-items:center;font-size:12px;color:#4a6055}.progress-button b{font-size:13px;font-variant-numeric:tabular-nums}.progress-dot,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#72a68c}main{max-width:1220px;margin:0 auto;padding:46px 34px 0;display:grid;grid-template-columns:1fr 1fr;column-gap:54px}.home{display:contents}.intro{grid-column:1;grid-row:1}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--muted)}.intro>.eyebrow{color:var(--green);font-size:12px;letter-spacing:.14em}.intro h1{font-size:clamp(34px,4vw,52px);line-height:1.45;letter-spacing:.04em;margin:20px 0}.lead{font-size:13px;line-height:2.1;color:#728077}.setup{grid-column:2;grid-row:1 / span 2;padding-top:10px}.step-label{display:flex;gap:11px;align-items:center;margin:13px 0 18px}.step-label span{font-size:11px;color:#779487;border:1px solid #ccd9d0;width:25px;height:25px;display:grid;place-items:center;border-radius:50%}h2{font-size:15px;margin:0;font-weight:650}.solid-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:28px}.solid-card{background:#fff;border:1px solid var(--line);border-radius:14px;color:#65746b;min-height:103px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:12px;position:relative}.solid-card[aria-pressed=true],.mode-card[aria-pressed=true]{border-color:#408267;background:#edf4ed;color:#215b47;box-shadow:inset 0 0 0 1px #408267}.solid-card[aria-pressed=true]:after{content:'✓';position:absolute;right:9px;top:6px;font-size:12px}.solid-card svg{width:51px;height:46px}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode-card{display:flex;align-items:center;text-align:left;gap:12px;padding:15px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#5c6b61;font-size:13px;min-height:56px}.mode-icon{font-size:20px;width:22px;text-align:center}.home-description{font-size:12px;line-height:1.9;color:#758078;min-height:46px;margin:19px 1px}.primary{background:var(--green);color:#fff;border-radius:10px;padding:15px 22px;min-height:49px;font-size:13px;font-weight:650}.primary span{margin-left:22px}.start{width:100%;display:flex;justify-content:space-between;align-items:center}.setup-note{text-align:center;font-size:10px;color:#87938b;margin-top:16px}.stage{grid-column:1;grid-row:2;min-width:0;height:340px;position:relative;margin-top:10px;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 48% 50%,#e5eee5 0%,#f0f4ef 60%,#f6f8f5 95%)}.stage-grid{position:absolute;inset:0;background-image:radial-gradient(#b3c5b7 .7px,transparent .7px);background-size:22px 22px;opacity:.32;mask-image:radial-gradient(ellipse,#000,transparent 75%)}canvas{width:100%;height:100%;display:block;position:relative;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.stage-corner{position:absolute;left:20px;top:20px;font-size:11px;letter-spacing:.08em;color:#6e8475;pointer-events:none}.stage-corner span+span{margin-left:7px}.stage-tools{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:5px}.stage-tools button{width:42px;height:42px;font-size:20px;background:#ffffffcf;color:#63776a;border:1px solid #e0e7dd;border-radius:9px}.stage-bottom{position:absolute;bottom:14px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#7b8b80;pointer-events:none}.rotate-hint{white-space:nowrap}footer{max-width:1220px;margin:40px auto 0;padding:24px 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.07em;color:#8b978e}body.playing main{display:block;max-width:1080px;padding-top:23px}.play-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.text-button{background:none;padding:9px 0;min-height:44px;font-size:12px;color:#748277}.challenge-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.challenge-heading h1{font-size:27px;font-weight:650;margin:7px 0}.challenge-heading .eyebrow{margin:0;font-size:9px}.selectors{display:flex;gap:12px}.selectors label{font-size:10px;color:#738277;display:flex;flex-direction:column;gap:6px}select{background:white;color:#3c5547;border:1px solid #dce4dd;border-radius:8px;min-height:42px;padding:8px 25px 8px 10px;font-size:12px}.instruction{font-size:12px;color:#738277;line-height:1.9;margin:14px 0 5px}.playing .stage{height:clamp(300px,47vh,490px);margin:12px 0;background:radial-gradient(ellipse at 50% 50%,#e4eee4,#eff4ed 56%,#f6f8f5 90%)}.workbench{max-width:710px;margin:0 auto}.palette-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}.palette-row .eyebrow{font-size:9px}.palette-row p{font-size:12px;color:#7c897f;margin:7px 0 0}.palette{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.swatch{width:42px;height:42px;border-radius:50%;background:var(--swatch);border:4px solid #f6f8f5;color:white;position:relative;box-shadow:0 0 0 1px transparent;font-weight:700}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #345a45}.swatch[aria-pressed=true]:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;text-shadow:0 1px 3px #0008}.swatch.erase{background:white;color:#63776a;font-size:20px}.swatch.erase[aria-pressed=true]:after{content:''}.actions{display:flex;gap:10px}.secondary{background:white;border:1px solid var(--line);border-radius:10px;padding:12px 17px;color:#607467;font-size:12px;min-height:44px}.actions .primary{margin-left:auto;min-width:210px}.feedback{padding:15px 18px;background:#fff5df;border:1px solid #eddfb9;border-radius:12px;font-size:13px;line-height:1.8;margin-top:15px;color:#806338}.feedback.success{background:#e5f1e7;border-color:#bad5c0;color:#256c48}.accessible{font-size:11px;color:#76897c;margin-top:18px;line-height:1.8}.accessible summary{cursor:pointer;padding:8px 0}.number-controls{display:flex;align-items:center;gap:10px}.number-controls select{max-width:190px}.playing footer{margin-top:30px}dialog{border:1px solid var(--line);padding:30px;border-radius:22px;max-width:590px;width:calc(100% - 28px);color:#314b3d;box-shadow:0 30px 100px #153a2529}dialog::backdrop{background:#243e305a;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:23px;margin-top:10px}.dialog-heading .eyebrow{margin:0}.dialog-heading .secondary{padding:8px 14px}#progress-summary{font-size:13px;color:#718277;margin-top:25px}.progress-track{height:6px;background:#e8eee7;border-radius:5px;overflow:hidden;margin-bottom:22px}#progress-fill{height:100%;background:#438669}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:center;padding:9px 3px;border-bottom:1px solid #e8eee7}th:first-child{text-align:left;font-weight:500}thead th{font-size:11px;color:#839085}td button{border-radius:50%;width:40px;height:40px;font-size:18px;background:#f1f5ef;color:#8c9b8e}td button.done{background:#dceede;color:#327153}.dialog-note{font-size:11px;color:#8b978e;line-height:1.9;margin-top:20px}.storage-warning{background:#fff1d8;padding:12px 20px;font-size:12px}#webgl-error{position:absolute;inset:30%;font-size:13px;color:#8a5332}
@media(min-width:1300px){main{padding-top:60px}.stage{height:355px}.setup{padding-top:16px}}
@media(max-width:760px){.header{height:78px;padding:0 21px}.brand{font-size:16px;gap:8px}.brand-symbol{font-size:35px}.brand small{font-size:7px}.progress-button{padding:9px 12px;font-size:10px;gap:7px}.progress-dot{display:none}.progress-button b{font-size:11px}main{padding:24px 20px 0;grid-template-columns:1fr;gap:0}.intro{grid-column:1;grid-row:1;text-align:center}.intro h1{font-size:32px;line-height:1.4;margin:12px 0}.intro h1 br{display:none}.intro>.eyebrow{font-size:10px}.lead{font-size:11px;line-height:1.9;margin:10px 0}.stage{grid-column:1;grid-row:2;height:245px;margin:0 0 8px}.setup{grid-column:1;grid-row:3;padding:0}.solid-options{grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:19px}.solid-card{font-size:9px;min-height:85px;border-radius:10px;gap:5px}.solid-card svg{width:40px;height:40px}.solid-card[aria-pressed=true]:after{top:3px;right:5px;font-size:10px}.step-label{margin:12px 0}.step-label h2{font-size:13px}.step-label span{width:21px;height:21px;font-size:9px}.mode-card{padding:11px;font-size:12px;min-height:48px}.home-description{margin:12px 0;font-size:11px;min-height:39px}.setup-note{font-size:9px}.stage-corner{left:12px;top:12px;font-size:10px}.stage-tools{right:8px;top:9px;gap:4px}.stage-tools button{width:38px;height:38px}.stage-bottom{left:12px;right:12px;bottom:12px;font-size:8px}.rotate-hint{font-size:8px}footer{margin-top:25px;padding:20px;gap:12px;font-size:8px}footer span:first-child{max-width:50%}body.playing main{padding:10px 16px 0}.play-top{margin-bottom:10px}.play-top .eyebrow{font-size:9px}.challenge-heading{display:block}.challenge-heading h1{font-size:24px}.challenge-heading>div>.eyebrow{display:none}.selectors{margin-top:13px;gap:8px}.selectors label{flex:1;min-width:0;flex-direction:row;align-items:center;font-size:9px;gap:6px}.selectors select{min-width:0;width:100%;font-size:11px;padding:7px;min-height:38px}.instruction{font-size:11px;margin:10px 0 0}.playing .stage{height:clamp(255px,39svh,420px);margin:5px 0}.palette-row{margin:9px 0 15px;flex-wrap:wrap;gap:10px}.palette-row>div:first-child{display:flex;align-items:center;gap:14px;width:100%}.palette-row p{font-size:10px;margin:0}.palette{gap:10px;width:100%;justify-content:center}.swatch{width:38px;height:38px}.actions{gap:7px}.secondary{font-size:11px;padding:11px 12px}.actions .primary{min-width:0;flex:1;padding:13px 12px;font-size:12px}.primary span{margin-left:10px}.accessible{font-size:10px;margin-top:12px}.feedback{font-size:12px;padding:12px}.playing footer{margin-top:20px}dialog{padding:22px 16px}.dialog-heading h2{font-size:20px}th,td{font-size:11px}td button{width:36px;height:36px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,box-shadow .15s}.feedback.success{animation:appear .3s ease-out}@keyframes appear{from{transform:translateY(5px);opacity:0}to{transform:translateY(0);opacity:1}}}
@media(max-width:760px){.intro h1 br{display:block}.selectors label{flex-direction:column;align-items:stretch;font-size:10px;gap:5px}}