:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#16130f;--bg-elev:#221e18;--ink:#f3ead8;--muted:#9a8f7d;--line:#3a3228;--accent:#e8a54b;--accent-ink:#1c1408;--correct:#7dba6a;--wrong:#e07a6a;--shadow:0 18px 40px #00000059;--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom);font-synthesis:none;text-rendering:optimizelegibility;font-family:IBM Plex Sans,Helvetica Neue,sans-serif}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f0e4;--bg-elev:#fffdf8;--ink:#1c1812;--muted:#6d6456;--line:#d9d0c0;--accent:#b56a12;--accent-ink:#fff8ec;--correct:#2f7d3a;--wrong:#b44538;--shadow:0 18px 40px #3c280a1f}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--bg);color:var(--ink);margin:0}button,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}h2,h3{margin:0;font-weight:600}.app-shell{max-width:720px;min-height:auto;padding:calc(8px + var(--safe-top)) 12px 24px;flex-direction:column;gap:8px;margin:0 auto;display:flex}.topbar,.bottombar{flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;display:flex}.topbar .ghost-btn,.topbar .primary-btn,.topbar .score{flex:1}.score{text-align:center;min-width:3.6rem;color:var(--muted);font-variant-numeric:tabular-nums;margin:0;font-size:.92rem}.tempo-select{flex:1;min-width:0}.tempo-select select{border:1px solid var(--line);background:var(--bg-elev);border-radius:12px;width:100%;min-height:40px;padding:0 10px;font-size:.95rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.drill{min-height:calc(100svh - 7.5rem - var(--safe-top));flex-direction:column;gap:8px;display:flex}.bottombar{padding:4px 0 calc(8px + var(--safe-bottom));gap:8px;margin-top:.5rem}.icon-btn,.text-btn,.ghost-btn,.primary-btn,.pad-key,.chip,.seg button{border:1px solid var(--line);background:var(--bg-elev);border-radius:12px}.icon-btn,.ghost-btn,.primary-btn,.text-btn{min-height:40px;padding:0 12px}.primary-btn{background:var(--accent);color:var(--accent-ink);border-color:#0000;font-weight:600}.ghost-btn,.icon-btn,.text-btn{color:var(--ink)}.seg{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;gap:3px;padding:3px;display:flex}.seg.compact button{min-width:2.4rem}.seg button{background:0 0;border:0;border-radius:11px;min-height:36px;padding:0 12px}.seg button.is-on{background:var(--accent);color:var(--accent-ink)}.sequence{flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.sequence li{color:var(--muted);font-size:.95rem}.sequence li.is-current{color:var(--accent);font-weight:600}.chord-stage{text-align:center;padding:2px 0 0}.chord-symbol{font-optical-sizing:auto;letter-spacing:-.03em;margin:0;font-family:Fraunces,Georgia,serif;font-size:clamp(3rem,14vw,4.4rem);font-weight:640;line-height:.95}.prompt{color:var(--ink);letter-spacing:.01em;margin:8px 0 0;font-size:1.2rem;font-weight:600}.sound-hint{color:var(--accent);margin:4px 0 0;font-size:.88rem}.countdown{flex-direction:column;align-items:center;gap:4px;margin-top:8px;display:flex}.countdown-track{background:var(--line);border-radius:999px;width:min(100%,22rem);height:7px;overflow:hidden}.countdown-fill{height:100%;width:var(--progress);border-radius:inherit;background:var(--accent);transition:width 50ms linear}.countdown-num{font-variant-numeric:tabular-nums;color:var(--accent);margin:0;font-family:Fraunces,Georgia,serif;font-size:1.65rem;font-weight:640;line-height:1}.countdown.is-urgent .countdown-fill{background:var(--wrong)}.countdown.is-urgent .countdown-num{color:var(--wrong);animation:.7s ease-in-out infinite countdown-pulse}@keyframes countdown-pulse{50%{transform:scale(1.08)}}.note-pad{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.pad-key{min-height:62px;font-size:1.45rem;font-weight:600}.pad-key.is-selected,.chip.is-selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.pad-key.is-correct,.chip.is-correct{background:color-mix(in srgb, var(--correct) 22%, var(--bg-elev));border-color:var(--correct)}.pad-key.is-wrong,.chip.is-wrong{background:color-mix(in srgb, var(--wrong) 20%, var(--bg-elev));border-color:var(--wrong)}.mode-chips,.chip-wrap{flex-wrap:wrap;gap:8px;display:flex}.chip{min-height:38px;padding:0 10px;font-size:.92rem}.reveal{background:var(--bg-elev);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:12px 14px 10px}.reveal-verdict{margin:0 0 10px;font-size:1.1rem;font-weight:600}.tone-row,.scale-row{flex-wrap:wrap;align-items:flex-end;gap:8px 14px;display:flex}.tone-row>span,.scale-row>span{flex-direction:column;align-items:flex-start;min-width:2.1rem;font-family:Fraunces,Georgia,serif;font-size:1.25rem;display:flex}.note-name{font-weight:inherit;line-height:1;display:block}.note-name .acc{font-size:.92em;position:relative;top:-.14em}.tone-row small,.scale-row small{color:var(--muted);text-transform:lowercase;font-family:IBM Plex Sans,sans-serif;font-size:.78rem}.tone-row .is-asked{color:var(--accent)}.parent-line{color:var(--muted);margin:10px 0 6px;font-size:1rem}.parent-line strong{color:var(--ink)}.reveal-next{width:100%;min-height:48px;margin-top:12px;font-size:1.1rem}.sheet-backdrop{z-index:20;background:#00000073;justify-content:center;align-items:flex-end;padding:12px;display:flex;position:fixed;inset:0}.sheet{background:var(--bg);border:1px solid var(--line);width:min(720px,100%);max-height:min(88dvh,900px);padding:16px 16px calc(18px + var(--safe-bottom));box-shadow:var(--shadow);border-radius:20px 20px 16px 16px;overflow:auto}.sheet-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.sheet section{margin-top:18px}.sheet h3{color:var(--muted);letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px;font-size:.92rem}.help{color:var(--muted);margin:0;line-height:1.45}.select-row{justify-content:space-between;align-items:center;gap:12px;margin:8px 0;display:flex}.select-row select{border:1px solid var(--line);background:var(--bg-elev);border-radius:12px;min-width:12rem;min-height:44px;padding:0 10px}.reset{width:100%;margin-top:18px}@media (width>=800px){.app-shell{gap:12px;max-width:980px;padding:20px 16px 16px}.note-pad{grid-template-columns:repeat(6,1fr)}.pad-key{min-height:64px;font-size:1.5rem}.chord-symbol{font-size:5rem}.drill{min-height:0}.countdown-num{font-size:2rem}.sheet-backdrop{align-items:center}.sheet{border-radius:20px}}