@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#ebeee8;background:#151a19;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #cbe986;outline-offset:4px}.shell{max-width:1600px;margin:auto}.topbar{height:82px;border-bottom:1px solid #313a35;display:flex;justify-content:space-between;align-items:center;padding:0 46px}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:#f6f5eb;font-size:13px;font-weight:800;letter-spacing:.16em}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#cde88f;color:#1c2922;font:bold 29px 'Space Grotesk',sans-serif;letter-spacing:-.12em;padding-right:5px}.brand-dot{color:#648755}.brand small{display:block;color:#87938a;font-size:9px;letter-spacing:.19em;margin-top:4px}.topbar-note,.sidebar-heading,.sidebar-foot,.eyebrow,.overline,.duration-stamp small,.card-top,.pattern-footer,.mini-label,.progress-caption,.settings-card h2,.volume-row,footer{font-size:10px;font-weight:800;letter-spacing:.17em}.topbar-note{color:#a9b4ab}.status-light,.live-dot{display:inline-block;background:#c8e78d;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #b6d987;margin-right:9px}.layout{display:grid;grid-template-columns:278px minmax(0,1fr);min-height:calc(100vh - 82px)}.sidebar{border-right:1px solid #313a35;padding:39px 16px 25px;display:flex;flex-direction:column}.sidebar-heading{display:flex;justify-content:space-between;padding:0 14px 24px;color:#e6ecdd}.sidebar-heading span:last-child{color:#839188;letter-spacing:.08em;font-size:9px}.library-group{margin:8px 0 5px;padding:15px 14px 7px;color:#86978d;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.exercise-button{display:flex;align-items:center;gap:12px;text-align:left;border:0;background:none;color:#aab5ac;width:100%;padding:11px 14px;border-radius:8px;font-size:12px;font-weight:600}.exercise-button:hover{background:#252f29;color:#fff}.exercise-button.active{background:#314131;color:#d5ee9c}.exercise-number{font-family:'Space Grotesk',sans-serif;font-size:10px;opacity:.65}.exercise-button.active .exercise-number{opacity:1}.sidebar-foot{color:#75847a;text-align:center;margin:auto 0 0;padding-top:35px;font-size:9px}.main{padding:37px clamp(28px,5vw,82px) 24px;max-width:1250px;width:100%;margin:auto}.eyebrow{color:#a7bb98;display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:36px}.eyebrow-line{display:block;width:25px;height:1px;background:#60745a}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:35px}.overline{color:#c8e78d;text-transform:uppercase}.hero h1{font:700 clamp(38px,4.6vw,68px)/1.07 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:12px 0}.hero p{color:#9eaca2;font-size:14px;margin:0;line-height:1.6}.duration-stamp{min-width:130px;text-align:right;color:#d2e9a0}.duration-stamp strong{font:600 38px 'Space Grotesk',sans-serif;letter-spacing:-.07em}.duration-stamp strong span{color:#6d8c59}.duration-stamp small{display:block;color:#8c9b91;margin-top:3px}.practice-card{background:#222b25;border:1px solid #3b4a3e;border-radius:16px;padding:25px 29px 19px;box-shadow:0 20px 55px #10161042}.card-top{display:flex;justify-content:space-between;gap:10px;color:#cde98f}.card-top span:last-child{color:#94aa91;letter-spacing:.1em}.guide-help{font-size:12px;color:#99a99d;margin:16px 0 23px}.guide-help strong{color:#d5e5cb}.pattern{display:flex;gap:7px;overflow-x:auto;padding:10px 2px 20px;scrollbar-color:#697c63 transparent}.note{flex:1 0 45px;min-width:45px;max-width:95px;height:103px;border:1px solid #4a5b4c;background:#2d3930;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:#c5d4c2;transition:background .1s,color .1s,transform .1s,border-color .1s}.note.right{border-bottom:3px solid #d1ea96}.note.left{border-bottom:3px solid #dcaa81}.note.active{background:#d2ed9a;color:#1b2d20;border-color:#d2ed9a;transform:translateY(-6px);box-shadow:0 10px 30px #c8e78d3a}.note.active.left{background:#edc09a;border-color:#edc09a}.note-hand{font:700 32px 'Space Grotesk',sans-serif}.note-detail{position:absolute;bottom:12px;font-size:9px;font-weight:800;letter-spacing:.1em;opacity:.7}.note-accent{position:absolute;top:8px;font-size:14px;font-weight:800}.pattern-footer{display:flex;justify-content:space-between;color:#869b88;border-top:1px solid #405044;padding-top:16px;font-size:9px}.transport{display:grid;grid-template-columns:1fr auto 1fr;column-gap:30px;align-items:center;margin:33px 0 27px}.mini-label{color:#8e9f93;font-size:9px}.time-value,.tempo-value{font:600 43px 'Space Grotesk',sans-serif;letter-spacing:-.06em;margin-top:4px}.tempo-section{text-align:right}.tempo-value small{font:800 11px 'DM Sans',sans-serif;color:#a1bd87;letter-spacing:.1em;margin-left:6px}.play-button{border:0;background:#cce891;color:#1b2a1d;border-radius:9px;padding:19px 30px;font-size:11px;font-weight:800;letter-spacing:.12em;display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:56px;box-shadow:0 8px 24px #b8d98724}.play-button:hover{background:#e0f5ad}.play-icon{font-size:14px}.progress-track{grid-column:1/-1;background:#344139;height:6px;border-radius:9px;margin-top:26px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:#cce891;border-radius:9px}.progress-caption{grid-column:1/-1;display:flex;justify-content:space-between;color:#819185;margin-top:11px;font-size:9px}.lower-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}.settings-card,.tip-card{border:1px solid #344139;border-radius:12px;padding:22px 24px;min-height:166px}.settings-card h2,.tip-card h2{margin:0 0 17px;color:#dce6d7;font-size:10px;letter-spacing:.16em}.switch-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.switch-row strong,.switch-row small{display:block;font-size:12px}.switch-row small{color:#849488;margin-top:5px;font-size:11px}.switch-row input{position:absolute;opacity:0}.switch{width:34px;height:20px;border-radius:20px;background:#49594d;position:relative;flex-shrink:0}.switch:after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#dce4d7;transition:transform .15s}.switch-row input:checked+.switch{background:#a7d06c}.switch-row input:checked+.switch:after{transform:translateX(14px);background:#18281c}.switch-row input:focus-visible+.switch{outline:2px solid #cbe986;outline-offset:3px}.volume-row{display:flex;align-items:center;gap:15px;color:#92a695;margin-top:19px;font-size:9px}.volume-row input{width:100%;min-width:0;accent-color:#cbe68f}.volume-row span:last-child{min-width:30px;text-align:right}.tip-card{display:flex;gap:18px;background:#1d2922}.tip-icon{color:#cde98f;font-size:28px;line-height:1}.tip-card h2{margin:3px 0 10px;color:#d4ec9e}.tip-card p{margin:0;font-size:12px;color:#a5b4a5;line-height:1.65;max-width:330px}footer{display:flex;justify-content:space-between;gap:14px;color:#6f8074;margin-top:30px;font-size:9px}footer span{color:#a1b697}.completion{position:fixed;inset:0;background:#080e0bc9;display:grid;place-items:center;padding:20px;z-index:10}.completion[hidden]{display:none}.completion-panel{background:#243027;border:1px solid #71875f;border-radius:19px;text-align:center;padding:40px;max-width:420px;width:100%;box-shadow:0 24px 90px #0008}.completion-symbol{font-size:52px;color:#cde98f}.completion-panel h2{font:700 34px 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:12px 0}.completion-panel p{font-size:14px;line-height:1.6;color:#acbeac;margin-bottom:24px}.completion-panel .play-button{width:100%}.text-button{display:block;margin:18px auto 0;background:none;border:0;color:#c8dbbd;font-size:11px;font-weight:700;letter-spacing:.1em}@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid #313a35;padding:15px 20px}.sidebar-heading,.sidebar-foot,.library-group{display:none}#exercise-list{display:flex;gap:6px;overflow-x:auto}.exercise-button{flex:none;width:auto;white-space:nowrap}.main{padding:32px 25px}.eyebrow{margin-bottom:30px}}@media(max-width:600px){.topbar{height:65px;padding:0 20px}.topbar-note{display:none}.main{padding:28px 16px}.eyebrow{font-size:9px}.hero{align-items:flex-start}.hero h1{font-size:40px}.hero p{font-size:13px}.duration-stamp{min-width:76px}.duration-stamp strong{font-size:25px}.duration-stamp small{font-size:8px}.practice-card{padding:18px 15px}.card-top span:last-child{display:none}.pattern{gap:5px}.note{flex-basis:48px;height:88px}.note-hand{font-size:27px}.transport{column-gap:8px}.play-button{padding:13px;font-size:10px}.time-value,.tempo-value{font-size:30px}.lower-row{grid-template-columns:1fr}footer{font-size:8px}}
.grace-mark{font-size:17px;color:#cde98f;margin-right:2px}.note.active .grace-mark{color:#476142}.feedback{background:#572f2b;color:#fff0e7;border-radius:8px;padding:12px 16px;font-size:13px;margin:-10px 0 22px}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}.sidebar,.main,#exercise-list{min-width:0}}
@media(max-width:900px){#exercise-list{scrollbar-width:none}#exercise-list::-webkit-scrollbar{display:none}}
.pattern{display:block;padding:0 0 13px;overflow-x:auto;overflow-y:hidden}.pattern svg{display:block;max-width:none;margin-inline:auto}.staff-line{stroke:#667968;stroke-width:1;fill:none}.notation-ink{stroke:#ddebd4;fill:#ddebd4}.notation-note{color:#ddebd4}.notation-note .notation-ink{stroke:currentColor;fill:currentColor}.notation-note line{fill:none!important}.notation-note .note-highlight{fill:#cde98f;opacity:0;transition:opacity .1s}.notation-note.active{color:#193020}.notation-note.active .note-highlight{opacity:1}.sticking{fill:#cde98f;font:700 16px 'Space Grotesk',sans-serif}.notation-note.active .sticking{fill:#193020}.accent{fill:#cde98f;font:700 20px 'Space Grotesk',sans-serif}.notation-note.active .accent{fill:#193020}
.wake-status{background:#4b4025;color:#f8dfa0;border:1px solid #8b7542;border-radius:8px;padding:10px 14px;font-size:12px;margin:-12px 0 18px}.wake-status[hidden]{display:none}
.phase-status{margin:-12px 0 18px;border:1px solid #a0c16d;border-radius:8px;background:#2e402c;padding:12px 16px;text-align:center;color:#d5f29a;font-size:15px;font-weight:800;letter-spacing:.12em}.phase-status[hidden]{display:none}
.visual-beat{display:flex;align-items:center;justify-content:center;gap:12px;margin:-10px 0 18px;color:#c8e69b;font-size:11px;font-weight:800;letter-spacing:.12em}.visual-beat[hidden],.mic-routing-warning[hidden]{display:none}.beat-pips{display:flex;gap:7px}.beat-pips i{display:block;width:15px;height:15px;border:1px solid #75946e;border-radius:50%;background:#2e3a31}.beat-pips i.on{background:#d0ec98;box-shadow:0 0 13px #b6df7a}.mic-routing-warning{margin:-13px 0 20px;padding:10px 13px;border:1px solid #856e43;border-radius:8px;background:#3c3324;color:#f4ddad;font-size:12px;line-height:1.5}
.session-card{border:1px solid #3b4a3e;border-radius:12px;padding:20px 22px;margin:0 0 15px;background:#1e2822}.session-heading{display:flex;justify-content:space-between;gap:18px;align-items:center}.session-heading h2{font:600 22px 'Space Grotesk',sans-serif;margin:4px 0}.session-heading p{color:#9dac9e;font-size:12px;margin:0;line-height:1.5}.session-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.session-actions label{font-size:9px;letter-spacing:.1em;color:#adbea2;font-weight:800}.session-actions select,.session-button{min-height:40px;background:#324338;border:1px solid #657a5b;border-radius:7px;color:#e8f3d9;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.04em}.session-button:hover,.session-actions select:hover{background:#40563e}.session-button.secondary{background:none}.session-button[hidden],.session-actions [hidden]{display:none}.session-exercises{display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px;scrollbar-color:#758970 transparent}.session-item{flex:0 0 auto;display:flex;align-items:center;gap:9px;min-height:38px;max-width:210px;text-align:left;background:#28342b;color:#bcc9b9;border:1px solid #3e5140;border-radius:7px;padding:5px 10px;font-size:11px;font-weight:600}.session-item.current{border-color:#c9e78d;color:#f1f8e5}.session-item.checked{color:#d1e99d}.session-item:hover{background:#3b4c3c}.session-check{display:grid;place-items:center;min-width:20px;height:20px;border:1px solid #617762;border-radius:50%;font-size:10px}.session-item.checked .session-check{background:#cce891;border-color:#cce891;color:#1b2a1d}.exercise-button.completed .exercise-number{color:#cde98f;opacity:1;font-weight:800}.exercise-button:disabled{opacity:.45;cursor:not-allowed}.next-exercise{display:block;margin:0 0 19px auto}.next-exercise[hidden]{display:none}
.scoring-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#1e2b23;border:1px solid #40533d;border-radius:10px;padding:12px 18px;margin:-10px 0 22px}.mic-row{display:flex;align-items:center;gap:12px}.mic-row strong,.mic-row small,.accuracy small{display:block}.mic-row strong{font-size:12px}.mic-row small,.accuracy small{color:#a3b3a2;font-size:11px;margin-top:4px}.mic-row button{flex:none}.accuracy{color:#d5ed9d;font:700 16px 'Space Grotesk',sans-serif;text-align:right}.session-item small{color:#d3eb9f;margin-left:5px}
@media(max-width:650px){.scoring-panel{flex-wrap:wrap}.accuracy{text-align:left}}
@media (orientation:landscape) and (max-width:720px) and (max-height:600px){.scoring-panel{flex-wrap:wrap}.accuracy{text-align:left}}
@media(max-width:600px){.session-heading{display:block}.session-actions{justify-content:flex-start;margin-top:15px}.session-card{padding:15px}}
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px){
  .shell{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .topbar,.eyebrow,.duration-stamp,.hero p,.guide-help,.pattern-footer,.tip-card,footer{display:none}
  .layout{display:flex;flex-direction:column;min-height:100dvh}
  .sidebar{flex:none;padding:3px 12px;border-bottom:1px solid #313a35}
  #exercise-list{gap:4px}
  .exercise-button{min-height:38px;padding:8px 11px;font-size:12px}
  .main{display:flex;flex-direction:column;gap:6px;padding:7px 12px max(7px,env(safe-area-inset-bottom));margin:0;max-width:none}
  .hero{margin:0;min-height:43px;align-items:center}
  .hero .overline{font-size:9px}
  .hero h1{font-size:clamp(22px,4vw,31px);margin:2px 0 0;line-height:1.1}
  .practice-card{padding:8px 12px 4px;border-radius:10px}
  .card-top{font-size:9px}
  .pattern{margin-top:0;padding-bottom:2px}
  .pattern svg{height:122px;width:auto}
  .transport{display:grid;grid-template-columns:1fr minmax(156px,210px) 1fr;gap:0 12px;margin:0}
  .mini-label{font-size:8px}
  .time-value,.tempo-value{font-size:29px;margin:0;line-height:1}
  .play-button{min-height:48px;padding:8px 16px}
  .progress-track{margin-top:7px;height:4px}
  .progress-caption{font-size:8px;margin-top:3px}
  .lower-row{display:block}
  .settings-card{display:flex;align-items:center;gap:14px;padding:4px 12px;min-height:38px}
  .settings-card h2,.switch-row small{display:none}
  .switch-row{gap:9px;flex:none}
  .switch-row strong{font-size:11px}
  .volume-row{margin:0;flex:1}
  .volume-row input{min-height:32px}
  .wake-status,.feedback{margin:0;padding:5px 9px}
  .phase-status{margin:0;padding:6px;font-size:13px}
  .visual-beat,.mic-routing-warning{margin:0}
  .visual-beat{font-size:10px}
  .mic-routing-warning{padding:6px 9px;font-size:11px}
  html,body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .layout{min-height:0}
  .session-card{margin:2px 0 0;padding:9px 12px}
  .session-heading h2{font-size:17px}
  .session-heading p{font-size:10px}
  .session-exercises{padding:6px 0 2px}
  .session-item{min-height:34px}
  .next-exercise{margin:0 0 2px auto}
  .lower-row{margin-bottom:8px}
  .settings-card{flex-wrap:wrap}
  .volume-row{flex:1 1 180px}
  .scoring-panel{flex-wrap:nowrap;gap:8px;margin:0;padding:5px 10px}
  .mic-row{min-width:0}
  .mic-row button{min-height:36px}
  .accuracy{flex:1 1 auto;margin:0;font-size:13px;text-align:right}
  .accuracy small,.mic-row small{font-size:9px}
}