:root{--ink:#493328;--paper:#f7eedd;--stage:#f0e2c7;--clay:#ffdbac;--accent:#e8735a;--focus:#276581;--seed:#d59b55;--leaf:#597456}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.5 system-ui,-apple-system,sans-serif}body.dark{--ink:#f6e7d0;--paper:#242923;--stage:#30372d;--clay:#41493a;--accent:#ad513b;--focus:#9ed6ef;--seed:#e9b878;--leaf:#a2b789}header{max-width:1500px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:22px 32px;gap:20px}header a{font-weight:800;font-size:25px;letter-spacing:-1px;text-decoration:none;color:inherit}header span{color:var(--accent)}button{font:inherit;color:inherit;cursor:pointer;border:2px solid var(--ink);border-radius:17px;padding:11px 17px;min-height:48px;background:var(--clay);box-shadow:3px 4px 0 var(--ink);touch-action:manipulation}button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}button:disabled{opacity:.4;cursor:default;box-shadow:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}[hidden]{display:none!important}main{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(330px,1fr);gap:clamp(24px,4vw,64px);padding:0 32px 28px;min-height:calc(100svh - 110px)}#counter{background:var(--stage);border-radius:36px;align-self:stretch;min-height:520px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}svg{width:100%;display:block;max-height:530px;fill:none;stroke:var(--ink);stroke-linejoin:round;stroke-linecap:round;stroke-width:2.5}svg .seed{fill:var(--seed);stroke-width:1.8}svg .counted{fill:var(--leaf)}svg [role=button]{cursor:pointer;outline:none}svg [role=button]:focus .seed{stroke:var(--focus);stroke-width:5}svg text{stroke:none;fill:var(--ink);font:22px system-ui,sans-serif}svg .label{font-weight:700;font-size:24px}#instrument{text-align:center;min-height:42px;font-weight:650;font-size:24px;padding:0 20px}#model-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:20px}#model-tools button{font-size:16px;padding:9px 12px}#guide{display:flex;flex-direction:column;justify-content:center;padding:25px 0;min-width:0}h1{font-size:clamp(30px,3vw,46px);line-height:1.14;letter-spacing:-.035em;margin:0 0 22px}#copy{font-size:clamp(19px,1.65vw,23px);margin:0 0 20px}#feedback{min-height:1.5em;font-size:18px}#answers{display:flex;flex-wrap:wrap;gap:15px;margin:18px 0}details{font-size:16px;margin:12px 0 28px}details p{max-width:38ch}summary{cursor:pointer}nav{display:flex;gap:14px;margin-top:24px}#next{background:var(--accent);color:#261c16;flex:1;font-weight:700}body.dark #next{color:#fff9ec}#back,#reset{width:52px;padding:8px}a{color:var(--focus)}dialog{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:24px;max-width:560px;padding:28px}dialog::backdrop{background:#16180f99}@media(max-width:760px){header{padding:18px 20px}header a{font-size:23px}main{display:block;padding:0 18px 28px}#counter{min-height:310px;border-radius:28px}svg{max-height:340px}#guide{padding:26px 4px 0}#instrument{font-size:22px}#model-tools{padding:14px;gap:10px}h1{font-size:30px;margin-bottom:14px}#copy{font-size:20px}details{margin-bottom:16px}nav{margin-top:16px}button{font-size:17px}#answers{gap:12px}}@media(prefers-reduced-motion:no-preference){button{transition:transform 120ms,box-shadow 120ms}}@media(max-width:350px){header{padding:16px}header a{font-size:20px}main{padding:0 12px 24px}#counter{min-height:280px}#model-tools button{font-size:14px;padding:8px}nav{gap:10px}}

.header-tools{display:flex;align-items:center;gap:8px}#reference{background:transparent;border-color:transparent;box-shadow:none;min-width:44px;min-height:44px;padding:6px;font-size:23px;font-weight:400}header{gap:10px}dialog{width:calc(100% - 32px);max-height:calc(100svh - 40px);overflow:auto}dialog a{overflow-wrap:anywhere}

#inspect-tools{display:flex;justify-content:center;gap:12px;padding:10px}#zone-cue{min-height:24px;text-align:center;font-size:16px;margin:4px 0 12px;color:var(--focus)}#next-reason,#answer-lock{font-size:15px;min-height:23px;margin:12px 0 0}#answers.locked{opacity:.38}#counter[data-active="true"]{outline:2px solid var(--focus);outline-offset:3px}#counter[data-active="false"] #model-tools{opacity:.4}#answers button:disabled{opacity:.4}

body[data-step="8"] #counter{min-height:0}body[data-step="8"] #instrument{font-size:16px;min-height:25px;padding:0 10px}body[data-step="8"] #drawing{max-height:260px}body[data-step="8"] #zone-cue{margin:0 0 8px}body[data-step="8"] #guide{padding-top:20px}body[data-step="8"] #feedback:empty{display:none}body[data-step="8"] #answers{margin:10px 0}body[data-step="8"] #answer-lock{margin:4px 0}body[data-step="8"] h1{font-size:26px;margin-bottom:10px}body[data-step="8"] #next-reason{margin-top:7px}body[data-step="8"] nav{margin-top:14px}

#title:focus{outline:none}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
