:root{--ink:#1d2523;--muted:#69716e;--paper:#faf8f3;--cream:#f0eadf;--line:#ded8ce;--card:#fff;--forest:#173f36;--gold:#c39755;--gold-soft:#ead9bd;--rust:#a7573e;--shadow:0 18px 55px #292f2b17}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;margin:0;font-family:DM Sans,system-ui,sans-serif}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:1.25em;height:1.25em}.app-shell{background:radial-gradient(circle at 85% 10%,#c3975514,transparent 28%),var(--paper);min-height:100dvh;padding-bottom:32px}.topbar{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:40;background:#faf8f3e0;border-bottom:1px solid #173f361a;grid-template-columns:1fr auto 1fr;align-items:center;height:78px;padding:0 clamp(22px,5vw,72px);display:grid;position:sticky;top:0}.brand{color:var(--forest);cursor:pointer;background:0 0;border:0;justify-self:start;align-items:center;gap:12px;font-family:Playfair Display,Georgia,serif;font-size:21px;display:flex}.brand-mark{background:var(--forest);border-radius:50%;justify-content:center;align-items:flex-end;gap:1px;width:36px;height:36px;padding:8px 7px;display:flex;position:relative}.brand-mark i{background:#fff;border-radius:1px;width:4px;height:19px;display:block}.brand-mark b{background:var(--ink);border-radius:0 0 2px 2px;width:3px;height:11px;position:absolute;top:8px}.brand-mark b:first-of-type{left:13px}.brand-mark b:nth-of-type(2){left:18px}.brand-mark b:nth-of-type(3){left:25px}.desktop-nav{gap:34px;height:100%;display:flex}.desktop-nav button{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:14px;font-weight:600;position:relative}.desktop-nav button:after{content:"";background:var(--forest);height:2px;transition:transform .2s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.desktop-nav button.active{color:var(--forest)}.desktop-nav button.active:after{transform:scaleX(1)}.profile-button{color:#fff;background:var(--rust);cursor:pointer;border:0;border-radius:50%;justify-self:end;width:38px;height:38px;font-weight:700}.main-content{max-width:1180px;margin:0 auto;padding:44px clamp(22px,5vw,70px) 70px}.view-stack{flex-direction:column;gap:34px;display:flex}.eyebrow{color:var(--rust);text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:700;display:block}.eyebrow.light{color:var(--gold-soft)}h1,h2,p{margin-top:0}h1,h2{font-family:Playfair Display,Georgia,serif}.welcome-row{justify-content:space-between;align-items:end;display:flex}.welcome-row h1,.page-title h1{letter-spacing:-.035em;margin:7px 0 10px;font-size:clamp(36px,5vw,52px);line-height:1.06}.welcome-row p,.page-title p{color:var(--muted);margin:0;font-size:16px}.streak-chip{border:1px solid var(--line);color:var(--rust);background:#fff;border-radius:18px;align-items:center;gap:10px;padding:10px 16px;display:flex;box-shadow:0 8px 25px #2a28230d}.streak-chip svg{font-size:24px}.streak-chip span{color:var(--muted);font-size:12px}.streak-chip b{color:var(--ink);font-size:16px;display:block}.hero-lesson{background:var(--forest);color:#fff;min-height:365px;box-shadow:var(--shadow);border-radius:28px;grid-template-columns:1.03fr .97fr;display:grid;position:relative;overflow:hidden}.hero-lesson:before{content:"";border:1px solid #ffffff14;border-radius:50%;width:290px;height:290px;position:absolute;bottom:-180px;left:-120px}.hero-copy{z-index:2;padding:clamp(32px,5vw,58px);position:relative}.hero-copy h2{max-width:520px;margin:10px 0 13px;font-size:clamp(34px,4vw,48px);line-height:1.06}.hero-copy>p{color:#ffffffbf;max-width:510px;font-size:15px;line-height:1.65}.hero-meta{color:#ffffffbf;align-items:center;gap:20px;margin:22px 0 24px;font-size:12px;display:flex}.hero-meta span{align-items:center;gap:6px;display:flex}.hero-meta span+span{border-left:1px solid #fff3;padding-left:20px}.primary-button{background:var(--forest);color:#fff;cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-weight:700;display:inline-flex;box-shadow:0 8px 20px #173f362e}.light-button{background:var(--gold-soft);color:var(--forest);box-shadow:none}.hero-instrument{background:linear-gradient(145deg,#f2e9db 0%,#d7c1a1 100%);flex-direction:column;justify-content:center;padding:45px 0 0;display:flex;position:relative}.hero-instrument:after{content:"";opacity:.13;pointer-events:none;background-image:radial-gradient(#173f36 .6px,#0000 .6px);background-size:5px 5px;position:absolute;inset:0}.staff-preview{height:140px;color:var(--forest);z-index:2;background:#ffffffad;border-radius:6px;margin:0 10%;position:relative;box-shadow:0 12px 30px #173f361f}.staff-lines{opacity:.5;background:repeating-linear-gradient(#0000 0 12px,currentColor 12px 13px);height:52px;position:absolute;top:38px;left:8%;right:5%}.clef{z-index:2;font-family:serif;font-size:64px;line-height:1;position:absolute;top:27px;left:8%}.staff-note{z-index:3;width:14px;height:10px;position:absolute;transform:rotate(-12deg)}.staff-note i{background:currentColor;border-radius:50%;position:absolute;inset:0}.staff-note:after{content:"";border-right:2px solid;height:35px;position:absolute;bottom:5px;right:0}.staff-note b{border-top:2px solid;width:19px;position:absolute;bottom:30px;left:4px;transform:rotate(30deg)}.mini-keyboard{z-index:3;filter:drop-shadow(0 -7px 10px #1e232029);height:120px;margin-top:34px;padding:0 6%;display:flex;position:relative}.white-key{background:linear-gradient(#fff,#f4f1ec);border:1px solid #9f9a91;border-radius:0 0 5px 5px;flex:1;height:100%;position:relative}.white-key.active{background:linear-gradient(#e7cfa9,#c99c5e);box-shadow:inset 0 0 0 2px #a3593440}.white-key>i{z-index:4;background:linear-gradient(90deg,#111,#303330,#0d0e0d);border-radius:0 0 4px 4px;width:58%;height:61%;position:absolute;top:-1px;right:-30%;box-shadow:1px 4px 5px #0000004d}.white-key>i.active{background:var(--rust)}.white-key em{text-align:center;width:100%;color:var(--forest);font-size:9px;font-style:normal;font-weight:700;position:absolute;bottom:8px}.today-grid{grid-template-columns:1.5fr .7fr;gap:24px;display:grid}.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 10px 40px #272a270a}.section-heading{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.section-heading h2{margin:6px 0 4px;font-size:25px}.section-heading p{color:var(--muted);margin:0;font-size:13px}.section-heading>span,.section-heading>b{color:var(--muted);font-size:13px}.time-pill{background:var(--cream);border-radius:20px;padding:7px 11px;font-size:11px!important}.practice-items{grid-template-columns:repeat(3,1fr);gap:13px;margin-top:23px;display:grid}.practice-items>div{border:1px solid #e8e3db;border-radius:14px;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:13px;display:grid}.practice-icon{border-radius:10px;place-items:center;width:37px;height:37px;font-family:serif;font-size:21px;display:grid}.practice-icon.warm{color:var(--rust);background:#f3dfd7}.practice-icon.blue{color:var(--forest);background:#dce8e6}.practice-icon.green{color:#526130;background:#e5ead8}.practice-items p{min-width:0;margin:0}.practice-items b{font-size:12px;display:block}.practice-items small{white-space:nowrap;text-overflow:ellipsis;color:var(--muted);margin-top:3px;font-size:9px;display:block;overflow:hidden}.practice-items i{color:#aaa49b;font-size:11px;font-style:normal}.progress-panel{text-align:center;flex-direction:column;align-items:center;display:flex}.progress-panel>.eyebrow{align-self:flex-start}.ring{--progress:5%;background:conic-gradient(var(--gold) var(--progress),#ebe6dd 0);border-radius:50%;place-items:center;width:116px;height:116px;margin:14px 0;display:grid;position:relative}.ring:after{content:"";background:#fff;border-radius:50%;width:90px;height:90px;position:absolute}.ring span{z-index:2;position:relative}.ring b{font-family:Playfair Display,serif;font-size:25px;display:block}.ring small{color:var(--muted);font-size:9px}.progress-panel p{color:var(--muted);margin:0 0 12px;font-size:11px}.progress-panel p b{color:var(--ink)}.thin-progress{background:#ece8e0;border-radius:4px;width:100%;height:4px;overflow:hidden}.thin-progress i{background:var(--gold);border-radius:4px;height:100%;display:block}.quote-panel{text-align:center;padding:20px}.quote-panel>span{color:var(--gold);font-family:Georgia,serif;font-size:45px;line-height:.6}.quote-panel p{max-width:700px;margin:8px auto;font-family:Playfair Display,serif;font-size:clamp(18px,2vw,24px);font-style:italic}.quote-panel small{color:var(--muted)}.page-title{max-width:760px;padding:20px 0 10px}.module-section{grid-template-columns:80px 1fr;gap:28px;padding-top:10px;display:grid}.module-number{color:var(--gold-soft);font-family:Playfair Display,serif;font-size:55px;line-height:1}.module-content{min-width:0}.module-content>.section-heading{border-bottom:1px solid var(--line);padding-bottom:18px}.lesson-list{gap:10px;padding-top:15px;display:grid}.lesson-card{text-align:left;cursor:pointer;width:100%;color:var(--ink);background:#fff;border:1px solid #e2ddd4;border-radius:15px;grid-template-columns:40px 1fr auto;align-items:center;gap:15px;padding:15px 18px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid}.lesson-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 25px #232f2812}.lesson-card.locked{opacity:.48;cursor:not-allowed}.lesson-card.locked:hover{box-shadow:none;border-color:#e2ddd4;transform:none}.lesson-status{background:var(--cream);width:34px;height:34px;color:var(--forest);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid}.lesson-status svg{width:16px}.lesson-copy small,.lesson-copy strong,.lesson-copy em{display:block}.lesson-copy small{text-transform:uppercase;letter-spacing:.09em;color:var(--rust);font-size:8px;font-weight:700}.lesson-copy strong{margin:3px 0;font-family:Playfair Display,serif;font-size:18px}.lesson-copy em{color:var(--muted);font-size:11px;font-style:normal}.lesson-arrow{color:var(--gold);font-size:22px}.repertoire-grid{grid-template-columns:repeat(2,1fr);gap:22px;display:grid}.piece-card{color:#fff;min-height:390px;box-shadow:var(--shadow);border-radius:24px;padding:30px;position:relative;overflow:hidden}.piece-card.tone-1{background:#173f36}.piece-card.tone-2{background:#884b3a}.piece-card.tone-3{background:#394d61}.piece-card.tone-4{background:#5b513b}.piece-card.tone-5{background:#694c56}.piece-card.tone-6{background:#405442}.piece-card.tone-7{background:#70543d}.piece-card.tone-8{background:#303f4d}.piece-number{opacity:.1;font-family:Playfair Display,serif;font-size:70px;position:absolute;top:14px;right:25px}.piece-staff{margin:18px -6px 26px}.piece-card .staff-preview{background:#ffffffe6;height:120px;margin:0}.piece-card .eyebrow{color:#ffffffa6}.piece-card h2{margin:8px 0 4px;font-size:28px}.piece-card p{color:#ffffffb3;min-height:38px;font-size:12px}.piece-card button{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff4d;border-radius:10px;align-items:center;gap:7px;padding:10px 15px;font-weight:700;display:flex}.stats-grid{grid-template-columns:repeat(4,1fr);gap:15px;display:grid}.stats-grid article{border:1px solid var(--line);background:#fff;border-radius:18px;padding:22px}.stats-grid small,.stats-grid span{color:var(--muted);font-size:10px;display:block}.stats-grid b{color:var(--forest);margin:5px 0;font-family:Playfair Display,serif;font-size:37px;display:block}.journey{padding:32px}.journey-line{grid-template-columns:repeat(4,1fr);gap:30px 0;margin-top:38px;display:grid;position:relative}.journey-line:before{display:none}.journey-line>div{text-align:center;position:relative}.journey-line i{z-index:2;color:#aaa39a;background:#fff;border:2px solid #ddd7ce;border-radius:50%;place-items:center;width:40px;height:40px;margin:0 auto 11px;font-style:normal;font-weight:700;display:grid;position:relative}.journey-line .started i,.journey-line .done i{border-color:var(--gold);background:var(--gold);color:#fff}.journey-line b,.journey-line small{display:block}.journey-line b{font-size:11px}.journey-line small{color:var(--muted);margin-top:3px;font-size:9px}.mobile-nav{display:none}.modal-shell{z-index:100;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#101916a6;border:0;position:absolute;inset:0}.lesson-modal{z-index:2;background:var(--paper);border-radius:25px;width:min(590px,100%);max-height:min(820px,92dvh);padding:34px;position:relative;overflow:auto;box-shadow:0 25px 80px #0000004d}.close-button{background:var(--cream);cursor:pointer;width:35px;height:35px;color:var(--forest);border:0;border-radius:50%;font-size:22px;position:absolute;top:15px;right:17px}.lesson-modal h1{margin:8px 0 0;font-size:37px}.modal-subtitle{color:var(--rust);font-size:13px}.lesson-modal>.staff-preview{height:120px;margin:22px 0}.lesson-modal>p:not(.modal-subtitle){color:var(--muted);font-size:14px;line-height:1.6}.goal-list{gap:8px;margin:18px 0;display:grid}.goal-list span{align-items:center;gap:9px;font-size:12px;display:flex}.goal-list svg{color:var(--gold)}.teacher-tip{border-left:3px solid var(--gold);background:#f2ebdf;border-radius:0 10px 10px 0;margin:20px 0;padding:12px 15px}.teacher-tip b{text-transform:uppercase;letter-spacing:.08em;font-size:11px}.teacher-tip p{color:var(--muted);margin:4px 0 0;font-size:12px;line-height:1.5}.lesson-modal>.primary-button{width:100%}.daily-progress{background:#ece7de;border-radius:5px;height:5px;margin-top:18px;overflow:hidden}.daily-progress i{background:var(--gold);border-radius:5px;height:100%;display:block}.history-list{margin-top:20px;display:grid}.history-list>div{border-bottom:1px solid #ebe6dd;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:12px 0;display:grid}.history-list>div:last-child{border-bottom:0}.history-list p{margin:0}.history-list p b,.history-list p small{display:block}.history-list p b{font-size:13px}.history-list p small{color:var(--muted);margin-top:3px;font-size:10px}.history-list>div>strong{color:var(--forest);font-family:Playfair Display,Georgia,serif;font-size:20px}.secondary-button{border:1px solid var(--line);color:var(--forest);cursor:pointer;background:#fff;border-radius:11px;padding:12px 16px;font-weight:700}.secondary-button:disabled{opacity:.5;cursor:wait}.text-button{color:var(--muted);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:8px;font-size:11px;text-decoration:underline}.danger-button{color:#a04439;cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:9px 0;font-size:11px;text-decoration:underline}.settings-modal{z-index:2;background:var(--paper);border-radius:25px;width:min(620px,100%);max-height:92dvh;padding:35px;position:relative;overflow:auto;box-shadow:0 25px 80px #0000004d}.settings-modal h1{margin:7px 0 24px;font-size:40px}.settings-group{border-bottom:1px solid var(--line);grid-template-columns:1fr minmax(170px,230px);align-items:center;gap:24px;padding:18px 0;display:grid}.settings-group label b,.settings-group label span{display:block}.settings-group label b{font-family:Playfair Display,Georgia,serif;font-size:17px}.settings-group label span{color:var(--muted);margin-top:4px;font-size:10px;line-height:1.45}.settings-group>input,.settings-group select{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:10px;padding:11px}.range-row{align-items:center;gap:12px;display:flex}.range-row input{min-width:0;accent-color:var(--forest);flex:1}.range-row strong{white-space:nowrap;color:var(--forest);font-size:12px}.install-help{border-left:3px solid var(--forest);background:#edf0e9;border-radius:0 12px 12px 0;margin:22px 0;padding:16px 18px}.install-help>b{font-family:Playfair Display,Georgia,serif}.install-help ol{color:var(--muted);margin:8px 0;padding-left:18px;font-size:11px;line-height:1.6}.install-help p{color:var(--muted);margin:5px 0 0;font-size:10px}.data-actions{gap:10px;margin-bottom:8px;display:flex}.practice-shell{z-index:120;color:var(--ink);background:#f3eee5;transition:background .2s;position:fixed;inset:0;overflow:auto}.practice-shell.flash-correct{background:#e9f0e8}.practice-shell.flash-wrong{background:#f4e5e0}.practice-header{background:var(--forest);color:#fff;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 clamp(18px,4vw,55px);display:grid}.practice-header>button{color:#fff;cursor:pointer;background:0 0;border:0;justify-self:start;align-items:center;gap:8px;display:flex}.practice-header>div{text-align:center}.practice-header small,.practice-header b{display:block}.practice-header small{text-transform:uppercase;letter-spacing:.12em;color:var(--gold-soft);font-size:8px}.practice-header b{font-family:Playfair Display,Georgia,serif;font-size:17px}.practice-header>span{font-variant-numeric:tabular-nums;justify-self:end;font-weight:700}.practice-progress{background:#d6d0c6;height:5px}.practice-progress i{background:var(--gold);height:100%;transition:width .25s;display:block}.practice-main{grid-template-columns:minmax(0,1.5fr) minmax(290px,.6fr);gap:30px;width:min(1260px,100%);min-height:calc(100dvh - 77px);margin:0 auto;padding:clamp(20px,4vw,52px);display:grid}.practice-score-panel{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:25px;flex-direction:column;min-width:0;padding:clamp(20px,3vw,38px);display:flex}.practice-labels{color:var(--muted);justify-content:space-between;font-size:10px;display:flex}.listening-dot{align-items:center;gap:7px;display:flex}.listening-dot i{background:#aaa;border-radius:50%;width:7px;height:7px}.listening-dot.live i{background:#4f986d;animation:1.5s infinite pulse;box-shadow:0 0 0 5px #4f986d1f}.practice-notation{background:#fcfbf7;border:1px solid #eee8de;border-radius:13px;height:230px;margin:25px 0 2px;position:relative;overflow:hidden}.practice-staff-lines{opacity:.62;background:repeating-linear-gradient(#0000 0 18px,#5b625f 18px 19px);height:76px;position:absolute;top:70px;left:7%;right:4%}.practice-clef{color:var(--forest);font-family:serif;font-size:88px;line-height:1;position:absolute;top:48px;left:7%}.practice-note{color:#9ca19f;width:20px;height:14px;position:absolute;transform:rotate(-12deg)}.practice-note>i{background:currentColor;border-radius:50%;position:absolute;inset:0}.practice-note>b{border-right:2px solid;height:52px;position:absolute;bottom:7px;right:0}.practice-note>em{color:var(--muted);font-size:9px;font-style:normal;position:absolute;top:22px;left:7px;transform:rotate(12deg)}.practice-note.played{color:var(--gold)}.practice-note.current{color:var(--rust);filter:drop-shadow(0 0 8px #a7573e4d);transform:rotate(-12deg)scale(1.28)}.practice-note.current:after{content:"";opacity:.28;border:1px solid;border-radius:50%;width:38px;height:38px;position:absolute;top:-12px;left:-9px}.expected-note{text-align:center;margin:8px 0 18px}.expected-note small,.expected-note b,.expected-note span{display:block}.expected-note small{text-transform:uppercase;letter-spacing:.12em;color:var(--rust);font-size:9px;font-weight:700}.expected-note b{color:var(--forest);font-family:Playfair Display,Georgia,serif;font-size:56px;line-height:1.05}.expected-note span{color:var(--muted);font-size:11px}.practice-keyboard{filter:drop-shadow(0 -4px 8px #0000001f);height:130px;padding:0 2%;display:flex}.practice-white{background:linear-gradient(#fff,#f1eee8);border:1px solid #a7a49e;border-radius:0 0 5px 5px;flex:1;height:100%;position:relative}.practice-white>i{z-index:3;background:linear-gradient(90deg,#121312,#313431,#111);border-radius:0 0 4px 4px;width:56%;height:62%;position:absolute;top:-1px;right:-29%}.practice-white.expected,.practice-white>i.expected{background:linear-gradient(#e4c997,#c69551)}.practice-white.heard:not(.expected),.practice-white>i.heard:not(.expected){background:#b96650}.practice-white em{text-align:center;color:var(--forest);font-size:9px;font-style:normal;font-weight:700;position:absolute;bottom:7px;left:0;right:0}.practice-sidebar{flex-direction:column;gap:18px;display:flex}.listen-card{background:var(--forest);color:#fff;border-radius:20px;grid-template-columns:55px 1fr;align-items:center;gap:16px;padding:22px;display:grid}.signal-bars{justify-content:center;align-items:center;gap:4px;height:48px;display:flex}.signal-bars i{background:var(--gold);border-radius:5px;width:5px;min-height:5px;transition:height 80ms;display:block}.listen-card small,.listen-card b,.listen-card em{display:block}.listen-card small{text-transform:uppercase;letter-spacing:.1em;color:var(--gold-soft);font-size:8px}.listen-card b{margin:2px 0;font-family:Playfair Display,Georgia,serif;font-size:25px}.listen-card em{color:#ffffffa1;font-size:9px;font-style:normal}.practice-message{border-left:3px solid var(--gold);color:#535c58;background:#ebe3d7;border-radius:0 10px 10px 0;min-height:44px;margin:0;padding:12px 14px;font-size:11px;line-height:1.5}.practice-actions{gap:9px;display:grid}.practice-actions button{width:100%}.mic-button{background:var(--rust);box-shadow:0 8px 20px #a7573e33}.tempo-control{border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px}.tempo-control label{color:var(--muted);justify-content:space-between;font-size:10px;display:flex}.tempo-control label b{color:var(--forest)}.tempo-control input{width:100%;accent-color:var(--forest);margin:12px 0 4px}.tempo-control>div{color:#999;justify-content:space-between;font-size:8px;display:flex}.practice-counter{gap:10px;display:flex}.practice-counter span{border:1px solid var(--line);text-align:center;color:var(--muted);background:#ffffffa6;border-radius:12px;flex:1;padding:10px;font-size:8px}.practice-counter b{color:var(--ink);font-size:18px;display:block}.result-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:min(680px,100% - 36px);min-height:calc(100dvh - 77px);margin:0 auto;padding:45px 0;display:flex}.result-medal{background:var(--forest);width:92px;height:92px;color:var(--gold-soft);box-shadow:var(--shadow);border:8px solid #ddd0b9;border-radius:50%;place-items:center;margin-bottom:22px;font-size:39px;display:grid}.result-screen h1{margin:7px 0;font-size:48px}.result-screen>p{color:var(--muted);max-width:500px;line-height:1.6}.result-stats{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin:25px 0;display:grid}.result-stats>div{border:1px solid var(--line);background:#fff;border-radius:15px;padding:18px}.result-stats b,.result-stats span{display:block}.result-stats b{color:var(--forest);font-family:Playfair Display,Georgia,serif;font-size:29px}.result-stats span{color:var(--muted);margin-top:3px;font-size:9px}.result-actions{gap:12px;display:flex}.result-actions button{min-width:170px}@keyframes pulse{50%{box-shadow:0 0 0 8px #4f986d00}}@media (width<=850px){.topbar{justify-content:space-between;height:66px;padding:0 22px;display:flex}.desktop-nav{display:none}.brand{font-size:19px}.brand-mark{width:32px;height:32px}.profile-button{width:34px;height:34px}.main-content{padding:30px 18px 96px}.welcome-row{align-items:flex-start}.welcome-row h1,.page-title h1{font-size:36px}.welcome-row p{font-size:14px}.streak-chip{padding:8px 11px}.hero-lesson{grid-template-columns:1fr}.hero-copy{padding:32px}.hero-copy h2{font-size:35px}.hero-instrument{min-height:265px;padding-top:30px}.staff-preview{height:120px}.mini-keyboard{height:105px;margin-top:26px}.today-grid,.practice-items{grid-template-columns:1fr}.progress-panel{min-height:260px}.module-section{grid-template-columns:48px 1fr;gap:12px}.module-number{font-size:36px}.lesson-card{grid-template-columns:35px 1fr auto;padding:13px 12px}.lesson-copy strong{font-size:16px}.repertoire-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.journey-line{grid-template-columns:1fr;gap:18px;margin-left:10px}.journey-line:before{width:2px;height:auto;inset:5% auto 5% 20px}.journey-line>div{text-align:left;grid-template-rows:auto auto;grid-template-columns:52px 1fr;display:grid}.journey-line i{grid-row:1/3;margin:0}.journey-line b{align-self:end}.journey-line small{align-self:start}.mobile-nav{z-index:60;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffff0;border-radius:19px;grid-template-columns:repeat(4,1fr);height:66px;display:grid;position:fixed;overflow:hidden;box-shadow:0 10px 40px #18241f2e}.mobile-nav button{color:#8b928e;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:9px;font-weight:600;display:flex}.mobile-nav button.active{color:var(--forest);background:#f1eee7}.mobile-nav svg{font-size:21px}.practice-main{grid-template-columns:1fr;gap:18px;padding:22px}.practice-sidebar{grid-template-columns:1fr 1fr;display:grid}.listen-card,.practice-message{grid-column:1/-1}.practice-actions{grid-column:1}.tempo-control{grid-area:3/2}.practice-counter{grid-column:2}.practice-notation{height:205px}.practice-keyboard{height:115px}.settings-modal{padding:30px}.settings-group{grid-template-columns:1fr minmax(170px,230px)}}@media (width<=500px){.streak-chip{display:none}.hero-copy{padding:28px 25px}.hero-meta{flex-wrap:wrap}.panel{padding:22px}.module-section{grid-template-columns:1fr}.module-number{display:none}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid article{padding:16px}.stats-grid b{font-size:30px}.lesson-modal{padding:30px 22px 24px}.lesson-modal h1{font-size:31px}.settings-modal{padding:28px 20px}.settings-group{grid-template-columns:1fr;gap:10px}.data-actions{display:grid}.practice-header{height:64px;padding:0 14px}.practice-header>button span{display:none}.practice-header b{font-size:14px}.practice-main{padding:13px}.practice-score-panel{border-radius:17px;padding:15px}.practice-notation{height:160px;margin-top:16px}.practice-staff-lines{background:repeating-linear-gradient(#0000 0 14px,#5b625f 14px 15px);height:61px;top:47px}.practice-clef{font-size:67px;top:35px}.practice-note{width:16px;height:11px}.practice-note>b{height:40px}.expected-note b{font-size:44px}.practice-keyboard{height:90px}.practice-sidebar{display:flex}.result-screen h1{font-size:38px}.result-stats{gap:6px}.result-stats>div{padding:13px 6px}.result-stats b{font-size:23px}.result-actions{width:100%;display:grid}.result-actions button{width:100%;min-width:0}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}