.sound-toggle{background:var(--btn,#00000040);width:36px;min-width:36px;height:36px;color:var(--ink,#fff);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{opacity:.7}.sound-toggle:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:2px}:root{--bg:#5c2f21;--ink:#fff3e0;--muted:#d9c3ae;--bar:#341a12f5;--panel:#261814f5;--panel-edge:#f2c14e80;--btn:#f2c14e24;--btn-ink:#fff3e0;--primary:#f2c14e;--primary-ink:#3a2400;--focus:#3fc9c9;--scrim:#140a0880;--pad:#1e100ceb;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{outline:none;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:100dvh;display:grid;position:relative}.bar{background:var(--bar);border-bottom:1px solid var(--panel-edge);z-index:6;white-space:nowrap;grid-row:1;justify-content:space-between;align-items:center;gap:8px;min-width:0;min-height:40px;padding:4px 8px;display:flex}.hud{align-items:center;gap:12px;min-width:0;display:flex;overflow:hidden}.hud-item{font-variant-numeric:tabular-nums;align-items:baseline;gap:5px;font-weight:800;display:inline-flex}.hud-item small{color:var(--muted);font-size:12px;font-weight:600}.tools{flex:none;gap:4px;display:flex}.icon{font:inherit;background:var(--btn);min-width:34px;height:32px;color:var(--btn-ink);cursor:pointer;border:0;border-radius:8px;padding:0 8px;font-weight:800}.bar .sound-toggle{height:32px}button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.stage{touch-action:none;grid-row:2;min-height:0;position:relative;overflow:hidden}.board{width:100%;height:100%;display:block;position:absolute;inset:0}.pad{padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--pad);border-top:1px solid var(--panel-edge);grid-row:3;gap:6px;display:none}@media (hover:none) and (pointer:coarse){.pad{display:flex}}.pb{border:1px solid var(--panel-edge);background:var(--btn);min-width:0;height:52px;color:var(--btn-ink);cursor:pointer;touch-action:none;border-radius:10px;flex:1 1 0;font:800 22px/1 system-ui,sans-serif}.pb:active{background:#f2c14e59}.pb-hard{background:#3fc9c92e}.overlay{z-index:10;background:var(--scrim);place-items:center;padding:10px;display:grid;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay.later{animation:.35s ease-out 1s both appear}@keyframes appear{0%{opacity:0}to{opacity:1}}.overlay.o-menu{background:#140a0859}.panel{background:var(--panel);color:var(--ink);border:1px solid var(--panel-edge);text-align:center;touch-action:pan-y;outline-offset:-7px;border-radius:18px;outline:2px solid #3fc9c940;flex-direction:column;gap:10px;width:min(460px,100%);max-height:100%;padding:16px 20px;display:flex;overflow:auto;box-shadow:0 0 0 1px #00000080,0 18px 50px #00000080}.panel h2{margin:0;font-size:22px}.panel p{color:var(--muted);margin:0}.panel .keys{font-size:13px}.actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.btn{font:inherit;color:var(--btn-ink);background:var(--btn);border:1px solid var(--panel-edge);cursor:pointer;white-space:nowrap;border-radius:10px;min-height:40px;padding:9px 14px;font-weight:800}.btn.primary{color:var(--primary-ink);background:linear-gradient(#ffe6a6,#f2b43a);border:0;min-width:120px;box-shadow:0 0 14px #f2c14e66,0 3px #8a5f10}.menu .logo{filter:drop-shadow(0 2px 6px #00000073);width:76px;height:76px;margin:0 auto -6px}.menu .logo svg{width:100%;height:100%;display:block}.menu h2{text-transform:uppercase;letter-spacing:2px;background:linear-gradient(#fff6e0,#ffe6a6 55%,#f2c14e);color:#0000;-webkit-background-clip:text;background-clip:text;width:-moz-fit-content;width:fit-content;margin-inline:auto;font-size:30px;font-weight:900}.final{flex-direction:column;align-items:center;display:flex}.final strong{font-variant-numeric:tabular-nums;color:var(--primary);font-size:44px;line-height:1}.final small{color:var(--muted);font-weight:700}@media (max-height:420px){.bar{min-height:32px;padding:2px 6px;font-size:13px}.icon{min-width:30px;height:28px;padding:0 6px}.bar .sound-toggle{height:28px}.hud{gap:8px}.pb{height:36px;font-size:18px}.pad{gap:4px;padding:4px 6px}.panel{border-radius:12px;gap:6px;padding:10px 12px}.panel h2{font-size:18px}.menu h2{font-size:20px}.panel p{font-size:13px}.btn{min-height:32px;padding:5px 12px}.menu .tagline{display:none}.menu .logo{width:40px;height:40px}.final strong{font-size:32px}}@media (max-height:300px){.menu .keys,.menu .logo,.result>p{display:none}.panel{gap:4px;padding:8px 10px}.panel h2{font-size:16px}.final strong{font-size:22px}.final small{font-size:11px;line-height:1.2}.final small:last-child{display:none}.btn{min-height:28px;padding:3px 10px;font-size:13px}.bar{min-height:28px}.icon,.bar .sound-toggle{height:24px}.hud-item small{font-size:10px}.pb{height:28px;font-size:15px}}@media (max-width:420px){.hud-item small{font-size:10px}.hud{gap:7px;font-size:14px}}@media (max-width:360px){.hud{gap:5px;font-size:12px}.hud-item{gap:2px}.hud-item small{font-size:9px}.pb{font-size:18px}}@media (max-width:340px){.hud-item:nth-child(2){display:none}.hud{font-size:11px}}@media (prefers-reduced-motion:reduce){.btn{transition:none}.overlay.later{animation:none}}