:root{color:#18201d;font-synthesis:none;text-rendering:optimizelegibility;background:#edf2ee;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}body{background:radial-gradient(circle at 15% 0,#ffffffd9,#0000 35rem),#edf2ee;min-width:320px;min-height:100vh;margin:0}button,select,input{font:inherit}button,select,input,.piano-key{-webkit-tap-highlight-color:transparent}.app-shell{width:min(1120px,100% - 40px);min-height:100vh;margin:0 auto;padding:52px 0 28px}.hero{justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:30px;display:flex}.eyebrow{color:#577065;letter-spacing:.13em;text-transform:uppercase;margin:0 0 8px;font-size:.72rem;font-weight:800}h1,h2,p{margin-top:0}h1{letter-spacing:-.045em;max-width:720px;margin-bottom:14px;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.3rem,5vw,4.2rem);font-weight:500;line-height:.98}h1[tabindex="-1"]:focus{outline:none}h2{margin-bottom:0;font-size:1.28rem}.hero-copy{color:#53605b;max-width:650px;margin-bottom:0;font-size:1.05rem;line-height:1.65}.stage-label{color:#577065;letter-spacing:.08em;text-transform:uppercase;background:#ffffff8c;border:1px solid #c8d2cc;border-radius:999px;flex:none;padding:9px 13px;font-size:.78rem;font-weight:800}.midi-card,.training-card,.start-card,.keyboard-section{background:#fffc;border:1px solid #d6ded9;border-radius:24px;box-shadow:0 24px 70px #2b413714}.midi-card{margin-bottom:22px;padding:26px}.setup-layout{grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);align-items:start;gap:22px;margin-bottom:22px;display:grid}.training-card,.start-card{padding:26px}.section-heading,.group-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.selection-summary{color:#51645b;background:#edf2ef;border-radius:999px;flex:none;padding:7px 10px;font-size:.78rem;font-weight:750}.setup-group{border:0;min-width:0;margin:26px 0 0;padding:0}.setup-group legend{color:#2c3732;padding:0;font-size:.88rem;font-weight:800}.group-actions{align-items:center;gap:10px;display:flex}.text-button{color:#2c7056;cursor:pointer;background:0 0;border:0;padding:2px;font-size:.76rem;font-weight:750}.text-button:hover{color:#174c38;text-decoration:underline}.selection-grid{gap:8px;margin-top:12px;display:grid}.note-selection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.interval-selection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.selection-option{color:#53605b;cursor:pointer;text-align:left;background:#f8faf8;border:1px solid #d2dad5;border-radius:12px;min-width:0;min-height:57px;padding:9px 10px;line-height:1.15;display:grid}.selection-option:hover{background:#f2f8f4;border-color:#9ebcad}.selection-option.is-selected{color:#174c38;background:#e3f3e9;border-color:#4a9272;box-shadow:inset 0 0 0 1px #2d7e5914}.selection-option span{text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:800;overflow:hidden}.selection-option small{color:#78847e;align-self:end;font-size:.7rem;font-weight:700}.interval-option{min-height:60px}.field-error{color:#a23f36;margin:8px 0 0;font-size:.75rem;font-weight:650;line-height:1.35;display:block}.session-settings{border-top:1px solid #e3e9e5;margin-top:28px;padding-top:24px}.compact-group{margin-top:0}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;display:grid}.mode-option{cursor:pointer;background:#f8faf8;border:1px solid #d2dad5;border-radius:12px;align-items:flex-start;gap:10px;min-height:82px;padding:13px;display:flex}.mode-option:has(input:checked){background:#e3f3e9;border-color:#4a9272}.mode-option input{accent-color:#1f6f51;flex:none;margin:2px 0 0}.mode-option span{gap:5px;display:grid}.mode-option strong{color:#28352f;font-size:.8rem}.mode-option small{color:#718079;font-size:.7rem;line-height:1.35}.number-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;display:grid}.number-field{color:#53605b;align-content:start;gap:7px;font-size:.78rem;font-weight:750;display:grid}.number-field input{color:#18201d;background:#fff;border:1px solid #cbd5cf;border-radius:11px;width:100%;min-height:44px;padding:0 12px}.number-field input[aria-invalid=true]{background:#fff8f7;border-color:#c66b62}.number-field input:focus-visible{outline-offset:3px;outline:3px solid #1f6f513d}.midi-card-header,.keyboard-heading,.midi-controls,.active-notes{align-items:center;display:flex}.midi-card-header,.keyboard-heading{justify-content:space-between;gap:20px}.status-badge{border-radius:999px;align-items:center;gap:8px;padding:8px 11px;font-size:.82rem;font-weight:750;display:inline-flex}.status-dot{background:currentColor;border-radius:50%;width:8px;height:8px}.status-neutral{color:#66716c;background:#edf1ef}.status-pending{color:#9a621a;background:#fff3dc}.status-success{color:#237454;background:#e2f5ea}.status-error{color:#a23f36;background:#fde9e6}.midi-controls{align-items:flex-end;gap:16px;margin-top:24px}.field{color:#53605b;flex:1;gap:8px;font-size:.82rem;font-weight:750;display:grid}select{color:#18201d;background:#fff;border:1px solid #cbd5cf;border-radius:12px;width:100%;min-height:46px;padding:0 42px 0 14px}select:focus-visible,button:focus-visible{outline-offset:3px;outline:3px solid #1f6f513d}.connection-hint{color:#68736e;flex:1;margin-bottom:0;line-height:1.55}.primary-button{color:#fff;cursor:pointer;background:#1f6f51;border:0;border-radius:12px;min-height:46px;padding:0 20px;font-weight:800;box-shadow:0 10px 24px #1f6f512e}.primary-button:hover:not(:disabled){background:#175d43}.primary-button:disabled{cursor:not-allowed;opacity:.65}.start-card{position:sticky;top:20px}.start-summary{border-top:1px solid #e3e9e5;gap:0;margin:22px 0 0;display:grid}.start-summary div{border-bottom:1px solid #e3e9e5;grid-template-columns:88px minmax(0,1fr);gap:10px;padding:12px 0;display:grid}.start-summary dt{color:#7b8580;font-size:.72rem;font-weight:700}.start-summary dd{overflow-wrap:anywhere;color:#2b3933;margin:0;font-size:.76rem;font-weight:750;line-height:1.35}.readiness-message{color:#8b631f;align-items:flex-start;gap:9px;margin:18px 0 0;font-size:.78rem;font-weight:700;line-height:1.4;display:flex}.readiness-message>span{background:currentColor;border-radius:50%;flex:none;width:8px;height:8px;margin-top:3px}.readiness-message.is-ready{color:#237454}.start-button{width:100%;margin-top:16px}.inline-message{color:#6c5c30;background:#fff7df;border-radius:12px;margin:16px 0 0;padding:12px 14px;line-height:1.45}.error-message{color:#843e38;background:#fff0ee}.active-notes{scrollbar-width:thin;border-top:1px solid #e3e9e5;flex-wrap:nowrap;gap:8px;height:66px;margin-top:22px;padding:18px 0 8px;overflow:auto hidden}.active-notes-label{color:#53605b;flex:none;margin-right:3px;font-size:.82rem;font-weight:800}.empty-notes{color:#8a938f;flex:none;font-size:.88rem}.note-chip{color:#176044;background:#e4f4eb;border-radius:999px;flex:none;padding:7px 10px;font-size:.8rem;font-weight:750}.keyboard-section{padding:26px 26px 30px;overflow:hidden}.keyboard-range{color:#75817c;margin-bottom:0;font-size:.83rem}.piano{background:#111916;border:1px solid #9ba39f;border-radius:12px;height:clamp(190px,27vw,300px);margin-top:24px;position:relative;overflow:hidden;box-shadow:inset 0 2px #ffffff1f}.white-keys{height:100%;display:flex}.piano-key{transition:background-color 70ms,box-shadow 70ms,transform 70ms}.white-key{color:#68716d;background:linear-gradient(90deg,#e7e9e8,#fff 20%,#f9faf9 76%,#dfe3e1);border-right:1px solid #aab0ad;flex:1;justify-content:center;align-items:flex-end;min-width:0;padding-bottom:14px;font-size:clamp(.56rem,1vw,.72rem);font-weight:800;display:flex;position:relative;box-shadow:inset 0 -7px 10px #38423d17}.white-key:last-child{border-right:0}.white-key.is-active{color:#0f4d37;background:linear-gradient(#d8f3e3,#79d7a7);box-shadow:inset 0 -12px 22px #14664833}.black-key{z-index:2;background:linear-gradient(90deg,#111614,#2b332f 70%,#090c0b);border:1px solid #050806;border-radius:0 0 6px 6px;width:3.04762%;height:62%;position:absolute;top:0;transform:translate(-50%);box-shadow:inset 0 -5px 4px #ffffff12,0 6px 8px #0e141152}.black-key.is-active{background:linear-gradient(#4bb884,#1d8159);box-shadow:inset 0 -5px 4px #0000001f,0 3px 5px #0e141140}.app-footer{color:#78827e;text-align:center;padding:20px 4px 0;font-size:.78rem}.practice-shell{flex-direction:column;width:min(1180px,100% - 40px);min-height:100vh;margin:0 auto;padding:28px 0;display:flex}.practice-topbar{background:#ffffffd1;border:1px solid #d6ded9;border-radius:18px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;padding:18px 20px;display:grid;box-shadow:0 18px 50px #2b413712}.practice-topbar .eyebrow{margin-bottom:4px}.practice-score{color:#65716b;margin-bottom:0;font-size:.8rem;font-weight:700}.session-timer{color:#1c3e30;font-variant-numeric:tabular-nums;letter-spacing:-.04em;text-align:center;min-width:106px;font-size:clamp(1.7rem,4vw,2.5rem);font-weight:850}.stop-button{color:#8a443d;cursor:pointer;background:#fff5f3;border:1px solid #d5b8b4;border-radius:11px;justify-self:end;min-height:42px;padding:0 16px;font-size:.8rem;font-weight:800}.stop-button:hover{background:#fde9e6}.task-stage{color:#f6faf7;text-align:center;background:radial-gradient(circle at 75% 5%,#5bae8361,#0000 20rem),#18362b;border-radius:24px;justify-items:center;min-height:315px;margin:22px 0;padding:38px 24px 28px;display:grid;box-shadow:0 25px 70px #18362b2e}.task-stage .eyebrow{color:#93b8a7}.practice-root{color:#fff;align-self:end;max-width:none;margin:10px 0 0;font-size:clamp(3.4rem,8vw,6.5rem)}.practice-root span{color:#a9c9ba;letter-spacing:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.35em;font-weight:700}.practice-interval{margin:12px 0 0;font-size:clamp(1.25rem,3vw,1.8rem);font-weight:780}.practice-interval span{color:#a9c9ba;font-size:.65em}.prompt-countdown{color:#bcd8cb;font-variant-numeric:tabular-nums;background:#ffffff0f;border:1px solid #a4cdba3d;border-radius:999px;margin:16px 0 0;padding:7px 11px;font-size:.74rem;font-weight:750}.practice-feedback{color:#d1e4da;background:#ffffff14;border-radius:999px;align-self:end;min-width:min(100%,470px);margin:25px 0 0;padding:11px 16px;font-size:.8rem;font-weight:700}.feedback-correct{color:#dff7e8;background:#4cb57f47}.feedback-incorrect{color:#ffe2dd;background:#ce5e4f40}.feedback-warning{color:#ffedbd;background:#cb923138}.practice-recovery-button{color:#ffedbd;cursor:pointer;background:#ffffff12;border:1px solid #ffedbd66;border-radius:10px;margin-top:12px;padding:8px 12px;font-size:.76rem;font-weight:800}.practice-recovery-button:hover{background:#ffffff21}.practice-shell .keyboard-section{margin-top:auto}.results-shell{place-items:center;min-height:100vh;padding:30px 20px;display:grid}.results-card{background:#ffffffdb;border:1px solid #d6ded9;border-radius:26px;width:min(620px,100%);padding:38px;box-shadow:0 25px 80px #2b41371f}.results-card h1{margin-bottom:12px}.results-subtitle{color:#66736d;margin-bottom:0;line-height:1.55}.results-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:30px 0 0;display:grid}.results-grid div{background:#edf3ef;border-radius:14px;gap:10px;min-width:0;padding:15px 12px;display:grid}.results-grid dt{color:#75817b;font-size:.68rem;font-weight:700}.results-grid dd{color:#244034;margin:0;font-size:1.5rem;font-weight:850}.results-button{width:100%;margin-top:24px}@media (height<=820px) and (width>=701px){.practice-shell{padding:16px 0}.practice-topbar{padding:12px 18px}.task-stage{min-height:240px;margin:12px 0;padding:22px 20px 18px}.practice-root{font-size:clamp(3rem,7vw,4.8rem)}.practice-interval{margin-top:8px}.prompt-countdown{margin-top:10px}.practice-feedback{margin-top:14px}.practice-shell .keyboard-section{padding:16px 20px 18px}.practice-shell .piano{height:clamp(170px,24vh,220px);margin-top:14px}}@media (width<=700px){.app-shell{width:min(100% - 24px,1120px);padding-top:30px}.hero,.midi-card-header,.keyboard-heading{flex-direction:column;align-items:flex-start;gap:14px}.midi-controls{flex-direction:column;align-items:stretch}.midi-card,.training-card,.start-card,.keyboard-section{border-radius:18px;padding:20px}.piano{height:190px}.white-key{padding-bottom:9px}.note-selection-grid,.interval-selection-grid,.mode-grid,.number-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading,.group-heading{align-items:flex-start}.group-heading{flex-direction:column;gap:8px}.practice-shell{width:min(100% - 24px,1180px);padding:12px 0}.practice-topbar{grid-template-columns:1fr auto;gap:12px}.practice-topbar>div{grid-column:1/-1}.session-timer{text-align:left;justify-self:start}.task-stage{border-radius:18px;min-height:280px;margin:12px 0;padding:28px 15px 20px}.practice-feedback{border-radius:14px}.results-card{padding:26px 20px}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=940px){.setup-layout{grid-template-columns:1fr}.start-card{position:static}}