:root{--bg:#0b1020;--card:#121a2d;--card2:#182239;--text:#f4f7fb;--muted:#9caac0;--line:#2b3954;--accent:#7dd3fc;--accent2:#c4b5fd;--good:#86efac;--warn:#fde68a;--bad:#fca5a5;--shadow:0 18px 50px rgba(0,0,0,.24)}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 15% 0,#15254a 0,transparent 32%),var(--bg);color:var(--text);min-height:100vh}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:26px clamp(18px,4vw,56px);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:20;background:rgba(11,16,32,.91);backdrop-filter:blur(18px)}h1,h2,h3,h4,h5,p{margin-top:0}.topbar h1{margin:0;font-size:clamp(1.65rem,3vw,2.5rem)}.topbar p{margin:.3rem 0 0;color:var(--muted)}.eyebrow{font-size:.72rem;letter-spacing:.16em;color:var(--accent);font-weight:800}.shell{width:min(1180px,calc(100% - 28px));margin:28px auto 64px;display:grid;gap:20px}.card{background:linear-gradient(145deg,rgba(24,34,57,.96),rgba(17,25,43,.96));border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:clamp(18px,3vw,28px);box-shadow:var(--shadow)}.hero{display:flex;justify-content:space-between;align-items:center;gap:24px}.hero h2{font-size:clamp(1.7rem,4vw,3.2rem);max-width:760px;margin:.8rem 0}.hero p{color:var(--muted);max-width:790px;line-height:1.7}.hero-score{min-width:130px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;border:8px solid rgba(125,211,252,.24);background:#0c1426}.hero-score strong{font-size:1.45rem}.hero-score span{color:var(--muted);font-size:.86rem}.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.section-head h3{margin:0}.section-head span{color:var(--muted);font-size:.85rem}.skill{display:grid;grid-template-columns:170px 1fr 44px;align-items:center;gap:10px;margin:13px 0}.bar{height:10px;background:#0d1526;border-radius:999px;overflow:hidden}.bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2))}.skill small{color:var(--muted)}.plan-item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.plan-item:last-child{border-bottom:0}.plan-item span:last-child{color:var(--muted)}button,.file-label{font:inherit;border:0;border-radius:12px;padding:11px 15px;cursor:pointer;transition:.18s ease}.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08111f;font-weight:800}.secondary,.ghost,.file-label{background:#22314d;color:var(--text);border:1px solid #344663}.ghost{background:transparent}.danger{background:#44242d;color:#ffd7dd;border:1px solid #6e3341}.wide{width:100%;margin-top:18px}.hidden,.exercise-hidden{display:none!important}.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.road-card{display:flex;flex-direction:column;align-items:flex-start;text-align:right;background:#0f182b;color:var(--text);border:1px solid var(--line);min-height:96px}.road-card b{font-size:1.25rem;color:var(--accent)}.road-card span{color:var(--muted);margin-top:6px}.road-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(125,211,252,.08) inset}.phase-detail{margin-top:18px;padding:18px;background:#0e1728;border-radius:16px;line-height:1.75;color:#d9e2f0}.practice-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.tab{background:#0f182b;color:var(--muted);border:1px solid var(--line)}.tab.active{background:#22314d;color:#fff;border-color:#52698d}.practice-panel{display:none}.practice-panel.active{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr);gap:24px;align-items:start}.panel-copy p{color:var(--muted);line-height:1.7}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(125,211,252,.12);color:var(--accent);font-weight:750;font-size:.8rem}.trainer{background:#0d1526;border:1px solid var(--line);border-radius:18px;padding:18px}.centered{text-align:center}.concept-box{display:grid;gap:7px;margin:14px 0;padding:14px;border:1px solid #33445f;border-radius:14px;background:#0e1728;line-height:1.55}.concept-box b{color:var(--accent)}.concept-box small{color:var(--muted)}.ltr{direction:ltr;unicode-bidi:isolate}.sequence{display:inline-block;color:#fff;letter-spacing:.04em}.mode-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:10px}.mode-row>*{flex:1}.mode-hint{background:#111d33;border:1px solid #2e405e;border-radius:12px;padding:10px 12px;color:#cbd6e6;font-size:.88rem;margin-bottom:12px;line-height:1.5}.staff-wrap{background:#f9fafb;border-radius:14px;padding:14px;min-height:210px;display:grid;place-items:center;direction:ltr;overflow:hidden}.staff-svg{width:min(100%,640px);height:auto}.choice-grid{display:grid;gap:9px;margin-top:15px;direction:ltr}.choice-grid.seven{grid-template-columns:repeat(7,1fr)}.choice-grid.four{grid-template-columns:repeat(4,1fr)}.choice-grid.three{grid-template-columns:repeat(3,1fr);direction:rtl}.choice-grid button{background:#18243b;color:#fff;border:1px solid #33445f;font-weight:700}.choice-grid button:hover{border-color:#6b86ae}.metric-row{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-top:11px}.metric-row b{color:#fff}.feedback{min-height:26px;margin:12px 0 6px;font-weight:700}.detail-feedback{line-height:1.65;font-weight:550;background:rgba(255,255,255,.025);border-radius:12px;padding:0}.detail-feedback.good,.detail-feedback.bad{padding:11px 12px}.feedback.good,.good-text{color:var(--good)}.feedback.bad,.bad-text{color:var(--bad)}.detail-feedback.good,.detail-feedback.bad{color:#dbe5f2}.duration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0}.duration-grid>div{display:grid;text-align:center;gap:3px;background:#0e1728;border:1px solid #293a55;border-radius:12px;padding:10px 5px}.duration-grid b{font-size:1.8rem}.duration-grid span{font-weight:700}.duration-grid small{color:var(--muted)}.rhythm-symbol{font-size:5rem;line-height:1.1;margin:12px}.nav-lesson{display:grid;gap:11px}.nav-symbol{font-size:clamp(1.5rem,5vw,3rem);direction:ltr;text-align:center;padding:15px;border-radius:14px;background:#111d33;border:1px solid #2e405e}.nav-lesson h5{text-align:center;font-size:1.15rem;margin:0}.explain-row{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.55}.explain-row:last-child{border-bottom:0}.explain-row b{color:var(--accent)}#testNavCard,#nextNav{margin-top:12px}.transpose-prompt{font-size:1.1rem;line-height:1.8;background:#111d33;border-radius:14px;padding:16px;margin-bottom:12px}.idle-box{min-height:180px;display:grid;place-content:center;text-align:center;gap:8px}.idle-box p{color:var(--muted)}.text-input{width:100%;background:#0b1322;border:1px solid #344663;border-radius:12px;color:#fff;padding:13px 14px;font-size:1rem;direction:ltr;text-align:left}.row-actions{display:flex;gap:10px;margin-top:12px}.row-actions.wrap{flex-wrap:wrap}.coach-message{min-height:110px;background:#0e1728;border:1px solid var(--line);border-radius:16px;padding:16px;line-height:1.75}.quick-prompts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.quick-prompts button{background:#1d2a43;color:#eaf0f8}.muted{color:var(--muted)}.small{font-size:.82rem}.file-label{display:inline-flex;align-items:center}footer{text-align:center;color:#71809a;padding:20px 10px 40px;font-size:.85rem}@media(max-width:820px){.grid.two{grid-template-columns:1fr}.hero{align-items:flex-start}.hero-score{min-width:102px}.practice-panel.active{grid-template-columns:1fr}.choice-grid.seven{grid-template-columns:repeat(4,1fr)}.roadmap{grid-template-columns:1fr}.skill{grid-template-columns:140px 1fr 38px}}@media(max-width:520px){.topbar{padding:16px;align-items:flex-start;flex-wrap:wrap}.topbar p{font-size:.83rem}.shell{width:min(100% - 18px,1180px);margin-top:14px}.card{border-radius:17px;padding:16px}.hero{display:block}.hero-score{margin-top:16px;aspect-ratio:auto;border-radius:14px;border-width:1px;display:flex;justify-content:space-between;padding:12px}.choice-grid.seven{grid-template-columns:repeat(4,1fr)}.choice-grid.four{grid-template-columns:repeat(2,1fr)}.choice-grid.three{grid-template-columns:1fr}.row-actions{flex-wrap:wrap}.row-actions>*{flex:1}.skill{grid-template-columns:1fr 42px}.skill .bar{grid-row:2;grid-column:1/-1}.practice-tabs{display:grid;grid-template-columns:1fr 1fr}.tab{padding:10px 6px}.staff-wrap{min-height:170px;padding:8px}.mode-row{display:grid;grid-template-columns:1fr}.duration-grid{grid-template-columns:repeat(2,1fr)}.explain-row{grid-template-columns:1fr;gap:4px}}

/* v0.3 — Ask the teacher */
.top-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.teacher-card{scroll-margin-top:110px}.teacher-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}.teacher-ask,.teacher-response-area{background:#0d1526;border:1px solid var(--line);border-radius:18px;padding:18px}.teacher-context{display:inline-flex;gap:5px;align-items:center;padding:7px 10px;margin-bottom:14px;background:#111d33;border:1px solid #2e405e;border-radius:999px;color:var(--muted);font-size:.85rem}.teacher-context b{color:var(--accent)}.input-label{display:block;font-weight:800;margin-bottom:8px}.question-input{width:100%;resize:vertical;min-height:126px;background:#0b1322;border:1px solid #344663;border-radius:14px;color:#fff;padding:14px 15px;font:inherit;line-height:1.6;outline:none}.question-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,211,252,.09)}.teacher-prompts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.teacher-prompts button,.teacher-followups button{background:#18243b;color:#dce7f5;border:1px solid #33445f;padding:9px 11px;font-size:.84rem}.teacher-prompts button:hover,.teacher-followups button:hover{border-color:#6b86ae}.teacher-answer{min-height:150px;display:grid;grid-template-columns:52px 1fr;gap:13px;align-items:start;background:linear-gradient(145deg,#111d33,#0e1728);border:1px solid #2e405e;border-radius:16px;padding:16px;line-height:1.72}.teacher-answer p{margin:.35rem 0 0;color:#dbe5f2}.teacher-avatar{width:48px;height:48px;border-radius:14px;display:grid;place-content:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08111f;font-size:.72rem;font-weight:900}.teacher-followups{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.teacher-history-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 9px}.text-button{padding:0;background:transparent;color:var(--muted);font-size:.8rem;text-decoration:underline}.teacher-history{display:grid;gap:7px}.history-question{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:right;background:#111a2d;color:#eef4fb;border:1px solid #283955;padding:10px 12px}.history-question span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-question small{color:var(--muted);flex:0 0 auto}.floating-teacher{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));z-index:40;width:54px;height:54px;border-radius:50%;padding:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08111f;font-size:1.35rem;font-weight:950;box-shadow:0 14px 32px rgba(0,0,0,.34),0 0 0 4px rgba(125,211,252,.1)}
@media(max-width:820px){.teacher-layout{grid-template-columns:1fr}.teacher-card{scroll-margin-top:92px}}
@media(max-width:520px){.top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.top-actions .ghost{padding:9px 8px}.teacher-ask,.teacher-response-area{padding:13px}.teacher-answer{grid-template-columns:42px 1fr;padding:13px}.teacher-avatar{width:40px;height:40px;border-radius:11px;font-size:.65rem}.teacher-prompts{display:grid;grid-template-columns:1fr}.teacher-prompts button{text-align:right}.teacher-followups{display:grid;grid-template-columns:1fr}.history-question{display:grid;grid-template-columns:1fr auto}.floating-teacher{width:50px;height:50px}.teacher-history-head{align-items:flex-start}}

/* v0.4 — structured lessons + dynamic Sight Reading */
.curriculum-card{scroll-margin-top:110px}.lesson-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.lesson-card{display:grid;gap:8px;text-align:right;align-content:start;min-height:170px;background:#0f182b;color:var(--text);border:1px solid var(--line);padding:16px}.lesson-card:hover{border-color:#5d769c}.lesson-card.done{border-color:rgba(134,239,172,.5);background:linear-gradient(145deg,#10241f,#101b2d)}.lesson-card b{font-size:1.02rem}.lesson-card small{color:var(--muted);line-height:1.45}.lesson-card em{font-style:normal;color:var(--muted);font-size:.78rem}.lesson-code{font-size:.72rem;font-weight:900;letter-spacing:.08em;color:var(--accent)}.mini-progress{height:7px;background:#09111f;border-radius:999px;overflow:hidden}.mini-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:inherit}.lesson-workspace{margin-top:18px;background:#0d1526;border:1px solid var(--line);border-radius:18px;padding:18px}.lesson-workspace-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.lesson-workspace-head h4{margin:.6rem 0 0}.lesson-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:15px 0 18px}.lesson-progress i{height:6px;background:#24324a;border-radius:999px}.lesson-progress i.active{background:linear-gradient(90deg,var(--accent),var(--accent2))}.lesson-content{min-height:250px;background:#10192b;border:1px solid #2a3a55;border-radius:16px;padding:18px;line-height:1.75}.lesson-content h5{font-size:1.18rem;margin:.8rem 0}.lesson-content p{color:#d9e4f1}.lesson-diagram{margin:15px 0;padding:16px;border-radius:14px;background:#0a1322;border:1px solid #33445f;text-align:center;font-size:1.05rem;line-height:1.8}.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}.anchor-grid>div{display:grid;text-align:center;gap:5px;padding:13px;background:#0a1322;border:1px solid #30435f;border-radius:12px}.anchor-grid span{font-size:1.55rem;color:var(--accent);font-weight:900}.beat-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0;direction:ltr}.beat-boxes span{display:grid;place-content:center;aspect-ratio:1.4;background:#0a1322;border:1px solid #385070;border-radius:12px;font-weight:900;color:var(--accent)}.nav-flow{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:12px 0;padding:13px;background:#0a1322;border:1px solid #31445f;border-radius:12px}.nav-flow span{padding:7px 9px;background:#192842;border-radius:9px}.lesson-check{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.lesson-check button{background:#18243b;color:#fff;border:1px solid #33445f}.lesson-check button.correct{border-color:var(--good);box-shadow:0 0 0 2px rgba(134,239,172,.1) inset}.lesson-check button.wrong{border-color:var(--bad)}.lesson-check-feedback{margin-top:12px;min-height:30px}.sight-staff{min-height:230px}.ai-online{color:var(--good);font-weight:800}
@media(max-width:820px){.lesson-cards{grid-template-columns:1fr}.curriculum-card{scroll-margin-top:92px}}
@media(max-width:520px){.lesson-workspace{padding:13px}.lesson-workspace-head{display:grid;grid-template-columns:1fr auto}.lesson-content{padding:14px;min-height:220px}.anchor-grid{grid-template-columns:1fr 1fr 1fr}.lesson-check{grid-template-columns:1fr}.sight-staff{min-height:180px}}

/* v0.4.2 — contextual teacher conversation threads */
.teacher-thread-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 9px;color:var(--muted);font-size:.82rem}.teacher-thread-head b{color:#eef4fb}.teacher-answer.teacher-thread{display:flex;flex-direction:column;gap:11px;align-items:stretch;min-height:210px;max-height:520px;overflow:auto;padding:13px;scroll-behavior:smooth}.teacher-message{display:flex;gap:10px;align-items:flex-start;max-width:94%}.teacher-message.assistant{align-self:flex-start}.teacher-message.user{align-self:flex-end;justify-content:flex-end}.teacher-message .teacher-bubble{border-radius:15px;padding:11px 13px;line-height:1.68;min-width:0}.teacher-message.assistant .teacher-bubble{background:#111d33;border:1px solid #2e405e}.teacher-message.user .teacher-bubble{background:#17263d;border:1px solid #3d5779}.teacher-message .teacher-bubble p{margin:.3rem 0 0;color:#dbe5f2;white-space:normal;overflow-wrap:anywhere}.teacher-message.user .teacher-bubble p{color:#f5f8fc}.teacher-message.user .teacher-bubble b{color:var(--accent)}.teacher-follow-note{margin:8px 2px 0}.teacher-followups button{flex:1 1 auto}
@media(max-width:520px){.teacher-answer.teacher-thread{max-height:58vh;min-height:230px}.teacher-message{max-width:100%}.teacher-message.user{max-width:92%}.teacher-thread-head{align-items:flex-start}.teacher-follow-note{line-height:1.5}}


/* v0.5 — staff ↔ fretboard bridge */
.bridge-staff{min-height:185px}.bridge-trainer{min-width:0}.bridge-fretboard{margin-top:12px}.fretboard-scroll{width:100%;overflow-x:auto;padding-bottom:6px;overscroll-behavior-inline:contain}.fretboard-grid{direction:ltr;display:grid;grid-template-columns:64px repeat(13,minmax(38px,1fr));min-width:650px;border:1px solid #31445f;border-radius:14px;overflow:hidden;background:#0a1322}.fb-head,.fb-string-label{display:grid;place-content:center;min-height:34px;background:#111d33;border-inline-end:1px solid #2b3c57;border-bottom:1px solid #2b3c57;color:var(--muted);font-size:.72rem}.fb-head.string-head{font-size:.68rem}.fb-string-label{grid-template-columns:auto auto;gap:4px;align-content:center;color:#e7eef8;background:#10192b}.fb-string-label b{color:var(--accent)}.fb-cell{position:relative;min-height:44px;border-radius:0;background:#0e1728;color:#eaf3ff;border-inline-end:1px solid #344663;border-bottom:1px solid #344663;padding:0;font-weight:900}.fb-cell:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#71809a;opacity:.55}.fb-cell:hover{background:#16243b}.fb-cell.in-zone{background:#14243c}.fb-cell.in-zone:after{content:"";position:absolute;inset:3px;border:1px solid rgba(125,211,252,.22);border-radius:5px}.fb-cell.valid{background:#17362f;color:var(--good);font-size:1.15rem}.fb-cell.selected{background:#234a67;color:#fff;box-shadow:inset 0 0 0 2px var(--accent);font-size:.9rem}.fb-cell.wrong{animation:fbshake .2s 2;background:#4a2029}.fb-cell.outside{background:#4a3420}.fretboard-legend{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 7px;color:var(--muted);font-size:.78rem}.fretboard-legend span{display:inline-flex;gap:6px;align-items:center}.fretboard-legend i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid #3b4e6c}.legend-zone{background:#14243c}.legend-valid{background:#17362f}.legend-selected{background:#234a67;box-shadow:inset 0 0 0 1px var(--accent)}.position-list{display:grid;gap:8px;margin:14px 0}.position-list span{background:#0a1322;border:1px solid #30435f;border-radius:10px;padding:10px 12px;text-align:center}.bridge-trainer .choice-grid{margin-bottom:10px}@keyframes fbshake{0%{transform:translateX(0)}50%{transform:translateX(3px)}100%{transform:translateX(0)}}
@media(max-width:520px){.fretboard-grid{min-width:610px;grid-template-columns:56px repeat(13,42px)}.fb-cell{min-height:40px}.fretboard-legend{display:grid;grid-template-columns:1fr 1fr}.bridge-staff{min-height:160px}}