:root{color-scheme:light;--paper:#fbf5ed;--ink:#21242a;--light:#f1dfd1;--accent:#993d59;--dark:#432132;--rule:color-mix(in srgb,var(--dark),transparent 79%);font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*,*::before,*::after{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 16% 12%,var(--light),transparent 66%),var(--paper)}[hidden]{display:none!important}button,select,input{font:inherit}button,select{cursor:pointer}button:disabled{cursor:default;opacity:.56}button:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#game{max-width:1200px;margin:auto;padding:clamp(9px,2.4vw,24px);min-width:0}header{display:flex;align-items:center;gap:13px;margin:0 0 16px}.mark{width:43px;height:43px;background:var(--dark);color:var(--light);display:grid;place-items:center;border-radius:12px;font-size:24px;box-shadow:2px 3px 0 var(--accent);flex:none}.brand{flex:1;min-width:0}.brand p,.label,.ribbon,footer{font-size:.63rem;line-height:1.2;letter-spacing:.15em;font-weight:800}.brand p{margin:0 0 2px;color:var(--accent)}h1,h2,h3{font-family:Outfit,system-ui,sans-serif;line-height:1.04;margin:0}h1{font-size:clamp(1.35rem,3.5vw,2.45rem);font-weight:900;color:var(--dark);letter-spacing:-.035em}
#sound,#restart{border:1px solid var(--rule);border-radius:8px;padding:9px;background:#fff9;color:var(--dark);font-size:.77rem;font-weight:800}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:12px;align-items:start}.playing,aside{min-width:0;background:#fff8;border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:0 8px 28px #1b19200c}
.ribbon{background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:11px 12px;gap:4px}.ribbon b{color:var(--light)}#progress{text-align:right}#metric{text-align:center}
#view{height:min(62vh,525px);min-height:330px;position:relative;isolation:isolate;background:var(--dark);overflow:hidden}#stage,#stage canvas{width:100%;height:100%;display:block;touch-action:none}#stage{display:grid;place-items:center;color:var(--light)}#stage canvas{outline-offset:-4px}#loading{padding:12px;text-align:center}.overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--dark) 82%,transparent);display:grid;place-items:center;padding:15px;z-index:2}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(10px,2vw,22px);background:var(--paper);padding:clamp(10px,2vw,18px);border-radius:15px;max-width:535px;box-shadow:0 18px 35px #0005}.intro img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.intro p,.result-card p{font-size:.88rem;margin:8px 0 14px;line-height:1.35}.intro .label,.result-card .label{color:var(--accent);display:block;margin-bottom:6px}.intro h2,.result-card h2{font-size:clamp(1.2rem,3vw,2.1rem);color:var(--dark);font-weight:900}
#start,#advance,.primary{padding:9px 12px;border:1px solid transparent;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;font-size:.85rem;box-shadow:0 2px 0 var(--dark)}#start span{margin-left:6px}.result-card{padding:22px;background:var(--paper);color:var(--ink);border-radius:14px;text-align:center;width:min(360px,100%)}
.status{padding:8px 11px;min-height:37px;font-size:.82rem;color:var(--dark);font-weight:700;background:#fff6}
.aside-inner{padding:12px}.toolbar{display:grid;grid-template-columns:1.35fr 1fr auto;gap:7px;align-items:end;margin-bottom:10px}.toolbar label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.065em;color:var(--dark);min-width:0}
select{width:100%;display:block;padding:6px;border:1px solid var(--rule);margin-top:2px;border-radius:7px;background:#fff;color:var(--dark);font-size:.83rem}#restart{line-height:1;font-size:1rem;padding:7px 9px}
#controls{display:grid;gap:7px}#controls>p{margin:0}.goal{border-radius:9px;background:var(--light);color:var(--dark);font-weight:800;padding:8px 9px;font-size:.89rem;line-height:1.2}.micro{font-size:.73rem;color:var(--dark);line-height:1.25}.controls-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px}.key{min-height:33px;background:#fff;border:1px solid var(--rule);border-radius:7px;color:var(--dark);font-size:.79rem;font-weight:750;line-height:1.12;touch-action:manipulation;padding:5px 3px}.key:hover,.key[aria-pressed=true]{background:var(--light);border-color:var(--accent)}.primary:hover,#start:hover,#advance:hover{filter:brightness(1.10)}.pad{display:grid;gap:4px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}.pad .key{min-width:0}.meter{height:10px;background:#2222;border-radius:99px;overflow:hidden}.meter span{display:block;height:100%;background:var(--accent);border-radius:99px}.range{font-size:.75rem;font-weight:800;color:var(--dark);display:grid;grid-template-columns:1fr auto;gap:0 8px}.range input{grid-column:1/-1;width:100%;margin:3px 0;accent-color:var(--accent)}details{margin-top:11px;border-top:1px solid var(--rule);padding-top:8px;font-size:.78rem;color:var(--dark)}details p{margin:6px 0 0;line-height:1.4}summary{cursor:pointer;font-weight:800}footer{display:flex;justify-content:space-between;margin:11px 2px 0;color:var(--dark);font-size:.57rem}
@media(max-width:700px){header{margin-bottom:10px;gap:9px}.mark{height:34px;width:34px;font-size:20px}#sound{padding:7px;font-size:.68rem}.layout{grid-template-columns:1fr;gap:7px}.aside-inner{padding:8px}.toolbar{margin-bottom:7px}#view{height:clamp(246px,42svh,400px);min-height:0}.ribbon{padding:8px;font-size:.56rem}.status{min-height:29px;padding:5px 8px;font-size:.75rem}.intro p{font-size:.77rem}.intro h2{font-size:1.16rem}.intro .label{font-size:.48rem}.intro button{font-size:.75rem}footer{margin-top:7px}.goal{padding:6px 8px;font-size:.82rem}.key{min-height:34px}.widepad{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:350px){.mark{display:none}.intro{grid-template-columns:38% 1fr}#view{height:245px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}