:root{font-family:ui-rounded,"Hiragino Maru Gothic ProN",system-ui,sans-serif;color:#263d42;background:#fff8e8;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#263d42;--muted:#65777a;--cream:#fffdf7;--line:#e9dfc8;--teal:#267f78;--gold:#f0b746}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{min-height:100svh}.app{height:100dvh;max-height:100dvh;max-width:1100px;margin:auto;padding:clamp(10px,2.2vw,24px);display:grid;grid-template-rows:auto auto minmax(110px,.65fr) minmax(145px,.8fr) auto;gap:clamp(8px,1.4vh,15px);overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:44px}.brand{display:flex;gap:10px;align-items:center}.brand h1{font-size:clamp(18px,2.6vw,26px);margin:0;letter-spacing:.04em}.brand p{margin:2px 0 0;color:var(--muted);font-size:12px}.spark{font-size:28px;color:#e79d31}.back,.quiet,.toggle,.hint{border:0;background:transparent;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}.back,.quiet{padding:9px 12px;min-height:44px;border-radius:14px;background:#fff1ce;font-weight:700}.intro,.samples,.play-area{background:var(--cream);border:1px solid var(--line);border-radius:20px;box-shadow:0 3px 0 #e9dfc8}.intro{padding:12px 18px;display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:15px}.step{display:grid;gap:7px;color:var(--teal);font-weight:800;font-size:12px}.dots{display:flex;gap:5px}.dots i{width:8px;height:8px;background:#d9e5df;border-radius:50%}.dots i.on{background:var(--gold)}.intro h2{font-size:clamp(17px,2.2vw,22px);margin:0 0 3px}.intro p{font-size:clamp(12px,1.5vw,14px);color:var(--muted);margin:0}.toggle{background:#e6f3ed;border-radius:14px;padding:9px 12px;font-weight:800}.samples{padding:10px 14px;display:grid;grid-template-rows:auto 1fr;gap:7px;min-height:0}.sample-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:var(--muted)}.hint{color:var(--teal);text-decoration:underline;font-weight:700;font-size:12px;min-height:44px;padding:10px 4px}.bins{display:flex;justify-content:center;gap:clamp(8px,2vw,20px);min-height:0}.bin{flex:1;max-width:245px;min-width:0;border:2px dashed #cbded4;border-radius:18px;background:#f3faf4;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;transition:transform .15s,background .15s}.bin.target{background:#e1f4e7;transform:scale(1.025)}.bin-label{font-size:clamp(13px,1.7vw,17px);font-weight:800}.bin-mark{width:60px;height:45px;aspect-ratio:4/3;border-radius:12px;background-color:#fff;border:1px solid #e4e8d8;background-image:url('./assets/tokens.png');background-repeat:no-repeat;background-size:300% 400%;flex:none;overflow:hidden}.bin-count{font-size:11px;color:var(--muted)}.play-area{padding:10px 14px;display:grid;grid-template-rows:auto 1fr;gap:8px;min-height:0}.objects-heading{display:flex;align-items:center;justify-content:space-between}.objects-heading h2{font-size:14px;margin:0}.objects-heading span{font-size:12px;color:var(--muted);font-weight:700}.objects{display:flex;justify-content:center;align-items:center;gap:clamp(7px,1.4vw,16px);min-height:0}.object{width:clamp(68px,11vw,104px);height:clamp(68px,11vw,104px);max-height:100%;overflow:hidden;border:2px solid #ece5d3;border-radius:22px;background:#fff;display:grid;place-items:center;cursor:grab;touch-action:none;box-shadow:0 3px 0 #eee5d3;transition:transform .14s,border-color .14s}.object:hover,.object:focus-visible{transform:translateY(-3px);border-color:var(--gold);outline:3px solid #f8e3ae}.token{width:64px;height:48px;aspect-ratio:4/3;max-width:78%;max-height:78%;display:block;background-image:url('./assets/tokens.png');background-repeat:no-repeat;background-size:300% 400%;background-position-y:var(--sprite-y,0%);filter:drop-shadow(0 3px 2px #28352b25);overflow:hidden}.controls{display:flex;justify-content:center;gap:10px}.controls button,.dialog-actions button{border:0;border-radius:15px;padding:11px 20px;min-height:44px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}.secondary{background:#f1ead9;color:var(--ink)}.primary{background:var(--teal);color:white;box-shadow:0 3px 0 #175f5a}.primary:disabled{background:#b6c7c0;box-shadow:none;cursor:default}.dialog{position:fixed;inset:0;display:grid;place-items:center;background:#18343da8;padding:18px}.dialog[hidden]{display:none}.card{width:min(440px,100%);background:var(--cream);border-radius:26px;padding:28px;text-align:center;box-shadow:0 12px 40px #102a2d55}.card h2{margin:3px 0 8px;font-size:24px}.card p{color:var(--muted)}.celebrate{font-size:36px;color:var(--gold)}.dialog-actions{display:flex;justify-content:center;gap:9px;margin-top:18px}.object.selected{outline:4px solid var(--gold);transform:translateY(-4px)}.bin-mark .token{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:4/3;filter:drop-shadow(0 1px 1px #28352b25)}.bin:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #e6a72d;outline-offset:2px}@media(max-width:600px){.app{padding:9px;grid-template-rows:auto auto minmax(115px,.85fr) minmax(145px,1fr) auto;gap:8px}.app{grid-template-rows:auto auto minmax(105px,.55fr) minmax(140px,.7fr) auto}.intro{grid-template-columns:64px 1fr;gap:8px;padding:10px}.toggle{grid-column:2;justify-self:start;padding:6px 10px}.bin{flex-direction:column;gap:3px;border-radius:15px;padding:5px}.bin-mark{width:48px;height:36px}.bin-count{display:none}.object{width:min(14vw,78px);height:min(14vw,78px);border-radius:16px}.token{width:50px;height:38px;aspect-ratio:4/3}.controls{gap:6px}.controls button{padding:9px 11px;font-size:12px;min-height:44px}.hint{min-height:44px;padding:10px 4px}.brand p{font-size:10px}.back,.quiet{font-size:12px;padding:8px;min-height:44px}.objects{gap:5px}}@media(max-height:580px){.app{padding:6px;gap:5px;grid-template-rows:auto auto minmax(90px,.8fr) minmax(100px,1fr) auto}.topbar{min-height:34px}.intro,.samples,.play-area{border-radius:14px}.intro{padding:7px 12px}.object{width:60px;height:60px}.token{width:46px;height:34px;aspect-ratio:4/3}.bin-mark{width:40px;height:30px}.controls button{min-height:40px;padding:6px 12px}.back,.quiet{min-height:40px;padding:6px 10px}.hint{min-height:40px;padding:8px 4px}}

.object .token{width:78%;height:auto;aspect-ratio:4/3;max-height:none;max-width:none}.object.placed{background:#eaf5ed;border-color:#81b19b}.object small{font-size:9px;line-height:1;color:#236354}.object{position:relative}.object small{position:absolute;bottom:4px}.bin-count{display:block!important}.bin-mark{background-color:#fff!important}.bin-mark .token{height:100%}.object.placed .token{width:66%;margin-bottom:9px}@media(max-height:580px){.controls button,.back,.quiet,.hint{min-height:44px}.intro p{font-size:11px}.bin{padding:4px;gap:5px}.sample-title{height:35px}}
.app{grid-template-columns:minmax(0,1fr)}.app>*{min-width:0}.brand{min-width:0}.brand h1{overflow-wrap:anywhere}@media(max-width:420px){.brand{gap:4px}.spark{display:none}.objects{gap:4px}.object{width:13vw}.object small{font-size:8px}}