@charset "UTF-8";
:root{color-scheme:dark;--bg:#0d151f;--panel:#15212e;--panel2:#192735;--line:#293644;--text:#eef3f7;--muted:#a0aebc;--mint:#9af3c6;--mintdark:#172f2d;--orange:#ffc38b;--error:#ff9eaa;font-family:Inter,"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.5}button,input,select{font:inherit}button,select,input[type=range]{cursor:pointer}button{color:inherit}button{border:0}button:disabled{cursor:not-allowed;opacity:.45}button:not(:disabled),a,select{transition:background .15s,border-color .15s,color .15s}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,.piano-scroll:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button:hover:not(:disabled){filter:brightness(1.12)}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--mint);color:var(--bg);padding:12px}.skip:focus{top:10px}
.sidebar{width:226px;position:fixed;inset:0 auto 0 0;padding:40px 22px 24px;border-right:1px solid var(--line);background:#101b27;display:flex;flex-direction:column}.brand{display:flex;align-items:center;text-decoration:none;color:var(--text);font-size:31px;font-weight:700;letter-spacing:-1.5px;padding-left:8px}.brand-dot{color:var(--mint)}.brand-icon{width:31px;display:flex;align-items:center;gap:4px;margin-right:11px}.brand-icon i{width:3px;background:var(--mint);border-radius:4px;height:19px}.brand-icon i:nth-child(2){height:30px}.brand-icon i:nth-child(3){height:24px}.brand-icon i:nth-child(4){height:12px}.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:1.5px;margin:0;color:var(--muted)}.nav-label{font-size:.6875rem;letter-spacing:1.25px;margin:54px 8px 18px}.navigation{display:grid;gap:9px;margin-top:40px}.nav-item{width:100%;display:flex;align-items:center;text-align:left;gap:13px;padding:15px 13px;border-radius:9px;background:transparent;color:var(--muted);font-size:.9375rem}.nav-item>span:first-child{font-size:25px;width:22px}.nav-item small{display:block;font-size:.75rem;font-weight:400;color:var(--muted);margin-top:3px;white-space:nowrap}.nav-item.active{background:#233b36;color:var(--mint)}.nav-item.active small{color:#b4c9c0}.nav-index{margin-left:auto;font-size:.6875rem;display:none}.sidebar-bottom{margin-top:auto;padding:52px 8px 0}.sidebar-bottom p{font-size:1rem;line-height:1.7;color:#d1dbe1;letter-spacing:-.15px}.sidebar-bottom strong{font-weight:500;color:var(--muted)}.ear-mark{font-size:34px;color:var(--mint)}.help-button{display:flex;gap:10px;align-items:center;font-size:.875rem;background:none;color:var(--muted);padding:22px 0}.version{font-size:.625rem;letter-spacing:1.8px;color:#788a9c}main{margin-left:226px;padding:0 44px 0;max-width:1800px}.topbar{height:91px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:.875rem}.breadcrumb{color:var(--muted)}.breadcrumb span{margin:0 13px;color:#57687c}.breadcrumb strong{color:#d9e2e8;font-weight:500}.headphone{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.875rem}.headphone svg{width:18px}.page-heading{display:flex;align-items:center;justify-content:space-between;padding:33px 0 30px}.mint{color:var(--mint)}h1{font-size:clamp(1.8rem,3vw,2.65rem);letter-spacing:-1.4px;line-height:1.2;font-weight:600;margin:10px 0 10px}.page-heading p:not(.eyebrow){color:var(--muted);margin:0;font-size:.9375rem}.session-tag{display:flex;gap:12px;align-items:center;font-size:.875rem}.session-tag small{display:block;color:var(--muted);font-size:.75rem}.session-icon{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--mint);font-size:24px}.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:26px}.exercise-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 42px #00000015}.card-top{padding:20px 24px;display:flex;align-items:center;justify-content:space-between}.card-top b{margin-left:8px;font-size:.875rem;color:var(--text);font-weight:500}.badge{font-size:.625rem;letter-spacing:1.4px;border:1px solid #3b4b54;border-radius:30px;padding:5px 9px;color:#c1ced6}.roll-shell{margin:0 24px}.roll-ticks{display:flex;justify-content:space-between;padding:0 8px 9px;color:#74889a;font-size:.625rem;font-family:monospace}.roll{position:relative;height:212px;background:#111c28;border:1px solid #253342;border-radius:7px;overflow:hidden}.roll-grid{position:absolute;inset:0;background-image:linear-gradient(to right,#31445540 1px,transparent 1px),linear-gradient(to bottom,#31445530 1px,transparent 1px);background-size:12.5% 100%,100% 12.5%}.blind-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#152a2c99,transparent 74%);text-align:center;padding:15px}.blind-cover h2{font-size:1.0625rem;font-weight:500;margin:20px 0 5px;letter-spacing:-.2px}.blind-cover p{font-size:.875rem;color:var(--muted);margin:0}.listening-symbol{display:flex;align-items:center;gap:6px;height:42px}.listening-symbol i{width:4px;border-radius:8px;background:var(--mint);height:16px;opacity:.85}.listening-symbol i:nth-child(2n){height:29px}.listening-symbol i:nth-child(3n){height:42px}.listening-symbol i:nth-child(5){height:35px}.playing .listening-symbol i{animation:pulse .8s infinite alternate}.playing .listening-symbol i:nth-child(2n){animation-delay:-.4s}.playing .listening-symbol i:nth-child(3n){animation-delay:-.7s}@keyframes pulse{to{transform:scaleY(.35);opacity:.5}}.note-bar{position:absolute;min-height:4px;background:var(--mint);border:1px solid #b4ffdc;border-radius:3px;color:#14362b;font-family:monospace;font-weight:600;font-size:10px;overflow:hidden;padding-left:3px}.note-bar.reference{background:#91b9ed;border-color:#b9d6ff}.note-axis{position:absolute;left:4px;font-size:10px;color:#9cafbd;transform:translateY(-50%);z-index:2}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#ffffffb3;z-index:3;box-shadow:0 0 12px #fff4}.transport{display:flex;align-items:center;justify-content:center;gap:12px;padding:23px 16px 11px}.primary{background:var(--mint);color:#12261f;border-radius:8px;padding:12px 19px;font-size:.875rem;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:45px}.secondary{background:#202f3e;border:1px solid #3c4c5b;border-radius:8px;padding:10px 15px;font-size:.875rem;min-height:43px}.shortcut{font-size:.75rem;color:#94a5b4;margin-left:7px}kbd{font-family:inherit;border:1px solid #425262;border-radius:4px;padding:2px 5px;font-size:.6875rem;background:#1c2936}.audio-status{text-align:center;color:var(--orange);font-size:.875rem;min-height:25px;padding:0 12px}.piano-topline{border-top:1px solid var(--line);padding:12px 24px 10px;display:flex;justify-content:space-between;color:#a2b3c2;font-size:.625rem;letter-spacing:1.3px}.piano-topline span:last-child{letter-spacing:0;text-transform:none;font-size:.6875rem;color:#8d9fad}.piano-scroll{overflow-x:auto;padding:0 17px 17px;scrollbar-width:thin;scrollbar-color:#47576a #15212e}.piano{position:relative;display:flex;min-width:470px;height:94px;isolation:isolate;touch-action:pan-x}.key{position:relative;flex:1;background:linear-gradient(#f9faf7,#dce3e6);border:1px solid #172332;border-top:0;border-radius:0 0 4px 4px;padding:0;color:#51616c;display:flex;align-items:flex-end;justify-content:center;font-size:.625rem;padding-bottom:7px;min-width:0}.key.black{position:absolute;top:0;z-index:2;background:linear-gradient(#111b23,#273642);height:61%;border:1px solid #080d15;border-top:0;color:#afbec9;box-shadow:1px 3px 4px #0008}.key.active,.key.revealed{background:linear-gradient(#b9f8d8,#78d9ad);color:#133d2f}.key.black.active,.key.black.revealed{background:linear-gradient(#61c79e,#36946f);color:#f0fff7}.key:focus-visible{outline-offset:-3px}.answer-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 0 14px;gap:10px}.answer-heading h2{font-size:1rem;font-weight:500;margin:0}.answer-heading>span{color:var(--muted);font-size:.75rem}.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.answer{background:var(--panel);border:1px solid var(--line);padding:13px 12px;border-radius:9px;min-height:82px;text-align:left;position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px}.answer-symbol{font-family:Georgia,serif;font-size:1.35rem;color:#e6f0f4;line-height:1.2;padding-right:17px}.answer-name{font-size:.875rem;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}.answer-number{position:absolute;top:12px;right:10px;font-size:.625rem;color:#a0aebc}.answer:not(:disabled):hover{border-color:#78b99e;background:#1c3334}.answer:disabled{opacity:1;cursor:default}.answer:disabled:not(.correct):not(.incorrect) .answer-symbol{color:#8093a2}.answer.correct{border-color:var(--mint);background:#1b3832}.answer.correct .answer-symbol,.answer.correct .answer-name{color:var(--mint)}.answer.incorrect{border-color:#bd7480;background:#34262f}.answer.incorrect .answer-name{color:var(--error)}.exercise-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}.text-button{background:none;color:var(--muted);font-size:.875rem;padding:12px 0;text-decoration:underline;text-underline-offset:4px}.exercise-footer>span{color:#8ea0af;font-size:.75rem}.feedback{border:1px solid #3b6958;background:#152d29;border-radius:10px;padding:17px 20px;margin-top:18px}.feedback.wrong{background:#2c222b;border-color:#7b5361}.feedback-heading{font-weight:600;font-size:1rem;margin:0 0 6px}.feedback p{font-size:.875rem;color:#cfddd6;margin:5px 0}.feedback .formula{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0}.formula span{display:inline-flex;align-items:center;gap:9px;background:#0e191e77;border:1px solid #48635777;padding:4px 8px;border-radius:5px;font-size:.875rem}.formula small{font-size:.75rem;color:#a6bab4}.comparison{margin-top:10px;font-size:.875rem}
.settings-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}.settings-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.settings-title h2{font-size:.9375rem;margin:0;font-weight:550}.settings-title svg{color:var(--muted);width:18px}.field{display:flex;flex-direction:column;font-size:.875rem;color:#b4c2cd;gap:8px;margin-bottom:18px}select{width:100%;background:#1e2c3b;border:1px solid #344455;padding:10px 30px 10px 11px;border-radius:7px;color:var(--text);font-size:.875rem;min-height:41px}.field-label{display:block;font-size:.875rem;color:#b4c2cd;margin-bottom:8px}.segmented{display:flex;padding:3px;background:#0f1b27;border:1px solid #293848;border-radius:7px}.segmented button{flex:1;padding:7px 6px;background:none;border-radius:5px;color:#a1b0c0;font-size:.875rem}.segmented .selected{background:#304235;color:#c3f6d9}.range-field{display:block;margin:20px 0;font-size:.875rem;color:#b4c2cd}.range-field>span{display:flex;justify-content:space-between;margin-bottom:9px}.range-field output{font-size:.75rem;color:#dbe7ec;font-variant-numeric:tabular-nums}.range-field input{width:100%;accent-color:var(--mint);height:5px;display:block;margin:13px 0 2px}.volume-field{margin-bottom:24px}.catalog-button{border-top:1px solid var(--line);background:none;width:100%;display:flex;justify-content:space-between;align-items:center;gap:5px;padding:16px 0 0;color:var(--mint);font-size:.875rem;text-align:left}.settings-note{font-size:.6875rem;color:#a4b3c0;margin:8px 0 0}.score-card{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:12px}.score-card .eyebrow{font-size:.625rem}.score-grid{display:grid;grid-template-columns:1fr 1fr;margin:15px 0 17px}.score-grid>div{display:flex;flex-direction:column}.score-grid>div+div{border-left:1px solid var(--line);padding-left:23px}.score-grid strong{font-size:1.8rem;font-weight:500;line-height:1.3;letter-spacing:-.7px}.score-grid span{font-size:.75rem;color:var(--muted)}.score-bottom{color:var(--muted);font-size:.6875rem}.score-track{height:3px;background:#253646;border-radius:5px;margin-top:10px;overflow:hidden}.score-track>div{height:100%;background:var(--mint);width:0;transition:width .3s}.tip-card{display:flex;gap:13px;padding:22px 6px}.tip-icon{color:var(--orange);font-size:20px}.tip-card .eyebrow{font-size:.625rem;color:var(--orange)}.tip-card p{font-size:.875rem;color:var(--muted);line-height:1.65;margin:7px 0 0}.page-footer{margin-top:29px;padding:20px 0 25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#8496a7;font-size:.625rem;letter-spacing:1.3px}.page-footer span:last-child{margin-left:auto;letter-spacing:0;font-size:.6875rem}
dialog{background:#15222f;border:1px solid #3f5364;color:var(--text);border-radius:16px;padding:28px;max-width:760px;width:calc(100% - 32px);max-height:88dvh}dialog::backdrop{background:#030911b8;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialog-heading h2{font-size:1.6rem;letter-spacing:-.7px;margin:6px 0}.close-button{border:1px solid var(--line);background:#233544;width:40px;height:40px;border-radius:50%;font-size:25px;flex-shrink:0}dialog>p{font-size:.9375rem;color:#b7c6d3;line-height:1.7}.catalog-actions{display:flex;align-items:center;gap:9px;margin:20px 0}.catalog-actions .secondary{font-size:.875rem}#selection-count{margin-left:auto;color:var(--mint);font-size:.875rem}.catalog-items{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:43dvh;overflow-y:auto;padding:4px}.catalog-check{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:7px;cursor:pointer;background:#1b2a38}.catalog-check input{accent-color:var(--mint);width:18px;height:18px;flex-shrink:0}.catalog-check span{font-size:.875rem}.catalog-check small{display:block;color:var(--muted);font-size:.75rem}.dialog-footer{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}#catalog-error{color:var(--error);font-size:.875rem}.help-steps{padding-left:22px;color:#b7c6d3}.help-steps li{padding:8px 0 8px 8px}.help-steps strong{display:block;color:var(--text);margin-bottom:4px}.help-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media(min-width:1550px){main{padding-left:65px;padding-right:65px}.studio-layout{grid-template-columns:minmax(0,1fr) 310px;gap:35px}.roll{height:265px}.piano{height:110px}.answer{min-height:95px}}
@media(max-width:1200px){.sidebar{width:195px;padding-left:14px;padding-right:14px}main{margin-left:195px;padding:0 27px}.studio-layout{grid-template-columns:minmax(0,1fr) 245px;gap:18px}.settings-card{padding:17px}.session-tag{display:none}.shortcut{display:none}.answers{grid-template-columns:repeat(2,minmax(0,1fr))}.exercise-footer>span{display:none}.card-top{padding-left:18px;padding-right:18px}.roll-shell{margin:0 18px}.nav-item{gap:9px;padding:13px 10px}.nav-item small{font-size:.6875rem}.brand{font-size:29px}.answer-heading{align-items:flex-start}.answer-heading>span{max-width:105px;text-align:right}}
@media(max-width:960px){.sidebar{position:relative;width:100%;height:auto;padding:17px 25px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;gap:35px}.sidebar-bottom,.nav-label{display:none}.brand{font-size:26px;padding:0}.brand-icon{transform:scale(.8);margin-right:6px}.navigation{display:flex;flex:1;gap:8px;margin-top:0}.nav-item{justify-content:center;width:auto;flex:1;padding:10px 12px;gap:8px}.nav-item small{display:none}.nav-item>span:first-child{font-size:20px;width:18px}main{margin:0;padding:0 26px}.topbar{height:62px}.page-heading{padding-top:25px}.studio-layout{grid-template-columns:minmax(0,1fr) 245px}.sidebar .help-button{display:none}}
@media(max-width:700px){.sidebar{padding:16px 18px 11px;flex-wrap:wrap;gap:17px}.brand{font-size:27px}.navigation{width:100%;flex-basis:100%;gap:4px}.nav-item{padding:10px 6px;border-radius:6px;font-size:.875rem}.nav-item>span:first-child{display:none}.nav-index{display:inline;margin-left:7px;font-size:.625rem}.topbar{height:53px}.headphone{font-size:.6875rem}.headphone svg{width:15px}.breadcrumb{font-size:.875rem}.breadcrumb span{margin:0 7px}main{padding:0 17px}.page-heading{padding:24px 0}.page-heading .eyebrow{font-size:.625rem}.page-heading p:not(.eyebrow){font-size:.875rem;line-height:1.6;max-width:340px}h1{font-size:2.1rem;margin:10px 0}.studio-layout{grid-template-columns:minmax(0,1fr)}.roll{height:194px}.card-top{padding:16px}.badge{font-size:.5625rem;letter-spacing:.8px}.roll-shell{margin:0 15px}.transport{gap:8px;padding-top:20px}.primary{padding:11px 15px}.piano-topline{padding:10px 15px}.piano-topline span:first-child{font-size:.5625rem;letter-spacing:.8px}.piano-topline span:last-child{font-size:.625rem}.piano-scroll{padding:0 12px 12px}.piano{min-width:535px;height:96px}.answer-heading h2{font-size:.9375rem}.answers{gap:8px}.answer{min-height:83px;padding:13px}.settings-column{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.settings-card{padding:21px}.settings-title h2{font-size:1rem}.field,.field-label,.range-field{font-size:.875rem}select{font-size:.875rem}.settings-title{margin-bottom:20px}.score-card{margin:0}.score-grid>div{flex-direction:row;align-items:baseline;gap:10px}.score-grid>div+div{padding-left:20px}.score-grid strong{font-size:1.8rem}.tip-card{padding:6px}.page-footer{margin-top:24px;gap:12px;flex-wrap:wrap}.catalog-items{grid-template-columns:1fr}.catalog-actions{flex-wrap:wrap}.catalog-actions .secondary{padding:8px 11px}.dialog-footer{flex-direction:column;align-items:stretch}dialog{padding:22px}.feedback{padding:16px}.help-shortcuts{line-height:2}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep narrow grid tracks within the viewport. Only the piano scrolls sideways. */
.practice,.settings-column{min-width:0}
.piano-scroll{width:100%;max-width:100%}
.field,select{min-width:0;max-width:100%}
@media(max-width:700px){
  .page-heading>div,.navigation,.nav-item{min-width:0}
  .nav-item{flex:1 1 0;gap:5px}
  .nav-index{margin-left:0}
  .card-top,.transport,.piano-topline{flex-wrap:wrap}
  .card-top,.piano-topline{gap:8px}
}