:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#121212;--text:#f2f2f2;--accent:#f2a33a;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);margin:0}body{overflow-x:clip}.app{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 16px);flex-direction:column;gap:8px;display:flex}h1{text-align:center;margin:0;font-size:2rem}button{min-width:48px;min-height:48px;font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.start{background:var(--accent);color:#121212;border:none;border-radius:16px;width:100%;max-width:360px;min-height:72px;font-size:1.5rem;font-weight:700}.start:active{opacity:.8}.fretboard{-webkit-user-select:none;user-select:none;grid-template-rows:repeat(6,34px) 18px;grid-template-columns:14px repeat(13,minmax(0,1fr));width:100%;max-width:440px;margin:0 auto;display:grid}.fb-name{color:#aaa;grid-column:1;align-items:center;font-size:.8rem;font-weight:600;display:flex}.fb-name.fb-dim{opacity:.3}.fb-fretnum{color:#888;grid-row:7;justify-content:center;align-items:flex-end;font-size:.7rem;display:flex}.fb-fretnum-anchor{color:var(--accent,#f2a33a);font-weight:700}.fb-anchor{background:#f2a33a2e;border-radius:6px;grid-row:1/-1}.fb-dot{pointer-events:none;background:#3a3a3a;border-radius:50%;place-self:center;width:8px;height:8px}.fb-cell{z-index:1;min-width:0;min-height:0;color:inherit;opacity:1;background:0 0;border:none;border-right:1px solid #555;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.fb-cell.fb-open{border-right:5px solid #ddd}.fb-cell:before{content:"";background:#bbb;height:2px;position:absolute;top:calc(50% - 1px);left:0;right:0}.fb-cell.fb-dim:before{opacity:.2}.fb-hl{aspect-ratio:1;color:#121212;border-radius:50%;justify-content:center;align-items:center;width:min(28px,100% - 2px);font-size:.75rem;font-weight:700;display:flex;position:relative}.fb-prompt{background:var(--accent,#f2a33a)}.fb-correct{background:#3ecf6a}.fb-wrong{background:#ef4b4b}.notepad{grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:440px;margin:0 auto;display:grid}.notepad-btn{color:#f2f2f2;touch-action:manipulation;background:#2a2a2a;border:none;border-radius:12px;min-width:0;min-height:56px;padding:0 4px;font-size:1.25rem;font-weight:600}.notepad-chromatic .notepad-btn{font-size:1rem}.notepad-btn:active{background:#3a3a3a}.notepad-btn:disabled{opacity:.5}.grade{grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:440px;margin:0 auto;display:grid}.grade-btn{color:#121212;touch-action:manipulation;border:none;border-radius:16px;min-height:72px;font-size:1.5rem;font-weight:700}.grade-got{background:#3ecf6a}.grade-missed{background:#ef4b4b}.grade-btn:active{opacity:.8}.grade-btn:disabled{opacity:.4}.spellpad,.chordpad,.numeralpad{flex-direction:column;gap:12px;width:100%;max-width:440px;margin:0 auto;display:flex}.pad-row{grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:440px;margin:0 auto;display:grid}.pad-acc{grid-template-columns:repeat(3,1fr)}.pad-numbers{grid-template-columns:repeat(5,1fr)}.pad-btn{color:#f2f2f2;touch-action:manipulation;background:#2a2a2a;border:2px solid #0000;border-radius:12px;min-width:0;min-height:56px;padding:0 4px;font-size:1.25rem;font-weight:600}.pad-btn:active{background:#3a3a3a}.pad-btn.pad-on{border-color:var(--accent,#f2a33a);color:var(--accent,#f2a33a)}.pad-btn:disabled{opacity:.5}.pad-pending{text-align:center;min-height:32px;color:var(--accent,#f2a33a);font-size:1.5rem;font-weight:700}.drill{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;gap:16px;width:100%;max-width:440px;margin:0 auto;display:flex}.drill-prompt{text-align:center}.drill-note{font-size:5rem;font-weight:800;line-height:1}.drill-answer{min-height:4rem;font-size:4rem}.drill-right{color:#3ecf6a}.drill-wrong{color:#ef4b4b}.drill-sub{color:var(--accent,#f2a33a);margin-top:2px;font-size:1.5rem;font-weight:600}.drill-options{flex-direction:column;gap:8px;width:100%;max-width:440px;margin:0 auto;display:flex}.opt-label{color:#aaa;font-size:.9rem}.opt-row{gap:8px;display:flex}.opt-btn{color:#f2f2f2;background:#1e1e1e;border:2px solid #3a3a3a;border-radius:12px;flex:1;min-width:0;min-height:56px;font-size:1.1rem;font-weight:600}.opt-btn[aria-pressed=true]{border-color:var(--accent,#f2a33a);background:#3a2c17}.drill-q{color:#aaa;font-size:1.15rem}.drill-title{font-size:2.5rem;font-weight:800;line-height:1.15}.drill-seq{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.drill-cell{background:#1e1e1e;border-radius:8px;justify-content:center;align-items:center;min-height:40px;font-size:1.2rem;font-weight:700;display:flex}.drill-grid{gap:8px;display:grid}.drill-grid-5{grid-template-columns:repeat(5,1fr)}.drill-key{flex-direction:column;justify-content:center;align-items:center;font-size:1.1rem;line-height:1.1;display:flex}.drill-key-num{font-size:.8rem}.pad-btn.drill-key-right:disabled{opacity:1;color:#f2f2f2;background:#1d4d2c;border-color:#3ecf6a}.pad-btn.drill-key-wrong:disabled{opacity:1;color:#f2f2f2;background:#5a1f1f;border-color:#ef4b4b}.drill-submit{background:var(--accent,#f2a33a);color:#121212;touch-action:manipulation;border:none;border-radius:12px;min-height:56px;font-size:1.25rem;font-weight:700}.drill-submit:disabled{opacity:.5}.drill-prog{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.drill-step{text-align:center;background:#1e1e1e;border:2px solid #0000;border-radius:8px;padding:4px 2px;font-weight:700}.drill-step.drill-cur{border-color:var(--accent,#f2a33a)}.drill-step-given{color:#f2f2f2;font-size:1.1rem}.drill-step-ans{font-size:1.1rem}.mix-label{text-align:center;color:#aaa;font-size:.9rem}.nav-ask{font-size:2.25rem;font-weight:800;line-height:1.1}.nav-hint{color:#aaa;margin-top:4px;font-size:.95rem}.ke-keys{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;display:grid}.ke-modes{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.ke-btn{color:#f2f2f2;background:#1e1e1e;border:2px solid #3a3a3a;border-radius:10px;min-width:0;min-height:48px;padding:0 4px;font-size:1.05rem;font-weight:600}.ke-btn[aria-pressed=true]{border-color:var(--accent);background:#3a2c17}.ke-title{margin:8px 0 0;font-size:1.6rem}.ke-facts{flex-direction:column;gap:8px;display:flex}.ke-fact{flex-direction:column;font-size:1.1rem;display:flex}.ke-fact .section-label{margin-top:0}.ke-scale{word-spacing:.3em;font-size:1.3rem;font-weight:700}.ke-chords{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.ke-chord{background:#1e1e1e;border-radius:8px;flex-direction:column;align-items:center;min-width:0;padding:6px 0;display:flex}.ke-numeral{color:#aaa;font-size:.8rem}.ke-chord-name{font-size:1rem;font-weight:700}.ke-progs{flex-direction:column;gap:8px;padding-bottom:16px;display:flex}.ke-prog{background:#1e1e1e;border-radius:12px;padding:10px 12px}.ke-prog-name{color:#aaa;font-size:.85rem}.ke-prog-numerals{word-spacing:.3em;font-size:1rem}.ke-prog-chords{word-spacing:.3em;font-size:1.15rem;font-weight:700}.screen{flex-direction:column;gap:12px;width:100%;max-width:440px;margin:0 auto;display:flex}.start-sub{opacity:.7;font-size:1rem;font-weight:600;display:block}.screen>.start{max-width:none;min-height:112px;font-size:2rem}.section-label{color:#aaa;margin-top:12px;font-size:.9rem}.drill-list{grid-template-columns:1fr 1fr;gap:8px;display:grid}.list-btn{color:#f2f2f2;background:#2a2a2a;border:none;border-radius:12px;min-height:64px;font-size:1.1rem;font-weight:600}.list-btn:active{background:#3a3a3a}.link-btn{min-height:56px;color:var(--accent);background:0 0;border:none;align-self:center;padding:0 24px;font-size:1.1rem;text-decoration:underline}.info{color:#aaa;margin:0;font-size:.95rem}.topbar{align-items:center;gap:8px;width:100%;max-width:440px;margin:0 auto;display:flex}.topbar-title{flex:1;min-width:0;font-size:1.1rem;font-weight:700}.topbar-btn{color:#f2f2f2;background:#2a2a2a;border:none;border-radius:12px;min-height:48px;padding:0 16px;font-size:1rem;font-weight:600}.topbar-btn:active{background:#3a3a3a}.session{flex-direction:column;gap:8px;width:100%;max-width:440px;margin:0 auto;display:flex}.session-bar{top:env(safe-area-inset-top);z-index:5;background:var(--bg);align-items:center;gap:8px;padding:4px 0;display:flex;position:sticky}.session-info{flex-direction:column;flex:1;min-width:0;line-height:1.1;display:flex}.session-time{font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:800}.session-title{white-space:nowrap;text-overflow:ellipsis;color:#aaa;font-size:.85rem;overflow:hidden}.session-paused .session-time,.session-paused .session-title{color:var(--accent)}.session-body{position:relative}.paused-cover{z-index:4;background:#121212e6;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.paused-label{color:var(--accent);font-size:3rem;font-weight:800}.summary{flex-direction:column;gap:8px;display:flex}.summary-row{background:#1e1e1e;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 16px;font-size:1.1rem;display:flex}