:root{--bg-color: #0d0f12;--surface-color: #171a21;--surface-hover: #222631;--border-color: #272c38;--text-main: #f3f4f6;--text-dim: #9ca3af;--accent: #38bdf8;--accent-glow: rgba(56, 189, 248, .35);--success: #34d399;--fail: #f87171;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:12px;overflow-x:hidden}#app{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px}@media(min-width:768px){#app{max-width:920px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.left-column{display:flex;flex-direction:column;gap:12px}.right-column{display:flex;flex-direction:column;gap:12px;position:sticky;top:20px}}.app-header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px}.brand-title{font-size:1.55rem;font-weight:800;letter-spacing:-.5px}.brand-plus{color:var(--accent)}.brand-tag{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-left:6px}.header-actions{display:flex;gap:8px}.btn-icon{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-main);font-size:1.1rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.btn-icon:hover{background:var(--surface-hover)}.hud-container{display:flex;flex-direction:column;gap:10px}.mode-tabs{display:flex;background:var(--surface-color);padding:4px;border-radius:var(--radius-md);border:1px solid var(--border-color);gap:4px}.mode-tab{flex:1;background:transparent;border:none;color:var(--text-dim);padding:8px 4px;font-size:.82rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease}.mode-tab.active{background:var(--surface-hover);color:var(--text-main);box-shadow:0 2px 8px #00000040}.level-stepper-card{display:flex;align-items:center;justify-content:space-between;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:8px 12px}.stepper-btn{background:var(--surface-hover);border:1px solid var(--border-color);color:var(--text-main);width:32px;height:32px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.stepper-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.stepper-btn:disabled{opacity:.3;cursor:not-allowed}.stepper-content{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.stepper-badge{font-size:.68rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.stepper-title{font-size:.95rem;font-weight:700}.stepper-subtitle{font-size:.75rem;color:var(--text-dim)}.mastery-card{display:flex;flex-direction:column;background:var(--surface-color);border:1px solid var(--border-color);padding:12px 14px;border-radius:var(--radius-md);gap:10px}.mastery-header{display:flex;justify-content:space-between;align-items:flex-start}.tier-badge,.accuracy-badge{display:flex;flex-direction:column;gap:1px}.tier-label,.accuracy-label{font-size:.66rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:.5px}.tier-value{font-size:1.2rem;font-weight:700;color:var(--accent)}.accuracy-value{font-size:1.05rem;font-weight:700;color:var(--text-main);text-align:right}.attempt-dots{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:2px}.dot{width:13px;height:13px;border-radius:50%;transition:all .2s ease}.dot-empty{border:2px dashed #333a48;background:transparent}.dot-success{background:var(--success);box-shadow:0 0 8px #34d39966}.dot-fail{background:var(--fail);opacity:.8}.target-hint{font-size:.7rem;color:var(--text-dim);text-align:center}.hud-actions{display:flex;justify-content:center}.btn-replay{display:flex;align-items:center;gap:8px;background:var(--surface-color);border:1px solid var(--border-color);color:var(--text-main);padding:8px 18px;border-radius:999px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s ease}.btn-replay:hover:not(:disabled){background:var(--surface-hover);border-color:var(--accent)}.btn-replay:disabled{opacity:.7}.btn-replay.playing-pulse{border-color:var(--accent);color:var(--accent);animation:pulseListening 1s infinite alternate ease-in-out}@keyframes pulseListening{0%{transform:scale(1);box-shadow:0 0 #38bdf800}to{transform:scale(1.04);box-shadow:0 0 14px var(--accent-glow)}}.pads-container{display:flex;flex-direction:column;gap:10px;border-radius:var(--radius-lg);padding:4px;transition:background-color .25s ease}.turn-banner{padding:8px 14px;border-radius:var(--radius-md);text-align:center;font-size:.88rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.status-listening{background:#38bdf81f;border:1px solid rgba(56,189,248,.4);color:var(--accent)}.status-guessing{background:#38bdf833;border:1px solid var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow)}.status-success{background:#34d39938;border:1px solid var(--success);color:var(--success)}.status-fail{background:#f8717138;border:1px solid var(--fail);color:var(--fail)}.sequence-slots-row{display:flex;justify-content:center;gap:8px;padding:2px 0}.seq-slot{min-width:44px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:4px;font-weight:700;font-size:.88rem;transition:all .2s ease}.slot-pending{background:var(--surface-color);border:1px dashed var(--border-color);color:var(--text-dim)}.slot-active{background:var(--surface-hover);border:2px solid var(--accent);color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.slot-correct{background:#34d39933;border:1.5px solid var(--success);color:var(--success)}.slot-wrong{background:#f8717133;border:1.5px solid var(--fail);color:var(--fail)}.slot-badge{font-size:.8rem}.pads-grid{display:grid;gap:10px;width:100%;transition:opacity .2s ease}.grid-listening{opacity:.55}.pad-count-2{grid-template-columns:1fr 1fr}.pad-count-3{grid-template-columns:1fr 1fr 1fr}.pad-count-4{grid-template-columns:1fr 1fr}.pad-count-5,.pad-count-7{grid-template-columns:repeat(3,1fr)}.pad-count-12{grid-template-columns:repeat(4,1fr)}.guitar-grid{grid-template-columns:repeat(2,1fr)}.note-pad{background:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);min-height:76px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;color:var(--text-main);position:relative;transition:transform .08s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}.note-pad:hover:not(:disabled){border-color:#3b4252;background:var(--surface-hover)}.note-pad:disabled{cursor:default}.note-pad.pad-is-target{border-color:var(--success);background:#34d3992e;box-shadow:0 0 16px #34d39966}.note-pad.pad-is-wrong{border-color:var(--fail);background:#f871712e;box-shadow:0 0 14px #f8717166}.pad-label{font-size:1.35rem;font-weight:700}.pad-key-hint{font-size:.65rem;color:var(--text-dim);position:absolute;bottom:6px}.pad-string-num{font-size:.7rem;color:var(--accent);position:absolute;top:6px;left:8px}.next-action-row{display:flex;justify-content:center;margin-top:4px;animation:slideUpFade .2s ease-out}.btn-next-pill{background:linear-gradient(135deg,#0284c7,#38bdf8);color:#090b0e;border:none;border-radius:999px;padding:10px 24px;font-size:.95rem;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 4px 18px #38bdf86b;transition:transform .12s ease,box-shadow .15s ease,filter .15s ease}.btn-next-pill:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 6px 22px #38bdf88c}.btn-next-pill:active{transform:translateY(1px) scale(.98)}.next-pill-arrow{font-size:1.05rem;transition:transform .12s ease}.btn-next-pill:hover .next-pill-arrow{transform:translate(2px)}.next-pill-kbd{display:inline-flex;align-items:center;background:#090b0e40;border:1px solid rgba(9,11,14,.35);border-radius:6px;padding:2px 7px;font-size:.72rem;font-family:monospace;font-weight:800;color:#090b0e}@media(pointer:coarse){.next-pill-kbd{display:none}}.fretboard-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:10px;animation:slideUpFade .22s ease-out;box-shadow:0 8px 24px #0006}.fretboard-card.card-success{border-color:#34d39966}.fretboard-card.card-miss{border-color:#f8717166}.fretboard-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.fretboard-title-group{display:flex;align-items:center;gap:8px}.fretboard-badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:999px}.card-success .fretboard-badge{background:#34d39926;color:var(--success)}.card-miss .fretboard-badge{background:#f871712e;color:var(--fail)}.fretboard-note-name{font-size:1.35rem;font-weight:800;color:var(--text-main)}.fret-view-switch{display:flex;background:var(--bg-color);padding:2px;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.tab-pill{background:transparent;border:none;color:var(--text-dim);font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease}.tab-pill.active{background:var(--surface-hover);color:var(--accent)}.fretboard-subtitle{font-size:.8rem;color:var(--accent);font-weight:600}.fretboard-svg-wrapper{width:100%;display:flex;justify-content:center}.fretboard-svg{width:100%;max-width:360px;height:auto;overflow:visible}.fretboard-wood{fill:#12151b;stroke:#252b37;stroke-width:1}.fret-nut{fill:#e5e7eb}.fret-wire{stroke:#475569;stroke-width:1.8}.fret-label{fill:#64748b;font-size:9px;text-anchor:middle;font-weight:600}.string-label{fill:#94a3b8;font-size:11px;font-weight:700;font-family:monospace}.guitar-string{stroke:#94a3b8;stroke-linecap:round}.inlay-dot{fill:#334155}.active-fret-dot{fill:var(--accent);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 6px var(--accent-glow))}.nut-marker{fill:var(--success);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 5px rgba(52,211,153,.6))}.fret-marker-text{fill:#0d0f12;font-size:9.5px;font-weight:900;text-anchor:middle;font-family:-apple-system,sans-serif}.chord-mute-text{fill:var(--fail);font-size:11px;font-weight:900;text-anchor:middle}.companion-card{padding:22px 20px;background:var(--surface-color);border:1px dashed var(--border-color)}.companion-header{display:flex;align-items:center;gap:8px}.companion-icon{font-size:1.4rem}.companion-title{font-size:1.1rem;font-weight:700;color:var(--text-main)}.companion-tip{font-size:.82rem;color:var(--text-dim);line-height:1.45}.keyboard-hints{display:flex;flex-direction:column;gap:8px;margin-top:6px;background:var(--bg-color);padding:10px 14px;border-radius:var(--radius-sm)}.hint-row{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--text-dim)}.hint-row kbd{background:var(--surface-hover);border:1px solid var(--border-color);border-radius:4px;padding:2px 7px;font-size:.75rem;color:var(--accent);font-family:monospace}.fretboard-actions{display:flex;gap:10px;margin-top:4px}.btn-fret-full{width:100%;padding:12px 16px;font-size:.92rem;font-weight:700;display:flex;align-items:center;justify-content:center}.btn-secondary{background:var(--surface-hover);border:1px solid var(--border-color);color:var(--text-main);border-radius:var(--radius-md);cursor:pointer;transition:background .15s ease}.btn-secondary:hover{background:#2b3140}@keyframes slideUpFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}.modal-backdrop.hidden{display:none}.modal-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:400px;padding:20px;display:flex;flex-direction:column;gap:14px}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.15rem;font-weight:700}.btn-close{background:transparent;border:none;color:var(--text-dim);font-size:1.5rem;cursor:pointer}.levels-list{display:flex;flex-direction:column;gap:8px}.level-select-btn{display:flex;justify-content:space-between;align-items:center;background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:8px 12px;color:var(--text-main);cursor:pointer}.level-select-btn:hover{border-color:var(--accent)}.level-meta{display:flex;flex-direction:column}.level-num{font-size:.75rem;color:var(--accent);font-weight:600}.level-name{font-size:.9rem;font-weight:600}.level-notes{font-size:.8rem;color:var(--text-dim)}.modal-info-box{background:var(--bg-color);padding:10px;border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-dim);line-height:1.4}.modal-info-box h4{color:var(--text-main);margin-bottom:2px}