:root{--ink:#17233c;--muted:#606a80;--bg:#f2f4f8;--paper:#fff;--line:#dfe4ee;--accent:#6556b8;--lav:#eeeafa;--good:#286d60;--good-bg:#e8f4ef;--radius:22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.55;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}button,a{touch-action:manipulation}button{border:0}button:disabled{opacity:.48;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #9c8bdd;outline-offset:4px}a{color:var(--accent)}h1,h2,h3,p{margin:0}h1{font-size:clamp(30px,4.1vw,44px);line-height:1.16;letter-spacing:-1.5px;font-weight:650;margin:8px 0 12px}h2{font-size:23px;line-height:1.25;letter-spacing:-.65px;margin:5px 0 12px}h3{font-size:20px;line-height:1.3}p+p{margin-top:12px}.muted{color:var(--muted)}.small{font-size:14px}.lead{max-width:620px;margin-bottom:28px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:1.7px;color:var(--accent)}.shell{max-width:1140px;margin:auto;padding:0 36px}.top{display:flex;justify-content:space-between;align-items:center;padding:28px 0 22px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font-size:29px;letter-spacing:-1.3px;font-weight:700;line-height:1.1}.brand-mark{display:grid;place-items:center;background:var(--ink);color:#c9c1fb;border-radius:14px;width:46px;height:48px;font-size:32px;font-weight:400}.brand-sub{display:block;margin-top:5px;font-size:9px;font-weight:650;letter-spacing:2px}.privacy{font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center}.dot{width:6px;height:6px;border-radius:50%;background:var(--good)}.tabs{display:flex;border-bottom:1px solid var(--line);gap:32px;margin-bottom:34px}.tabs button{background:none;padding:15px 0 13px;border-bottom:3px solid transparent;color:var(--muted);font-size:14px;font-weight:650;white-space:nowrap}.tabs button.active{border-bottom-color:var(--accent);color:var(--ink)}.view{display:none}.view.active{display:block}.intro-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.spark{display:inline-block;color:#aea1d3;font-size:23px;vertical-align:top;margin:0 0 0 13px}.daily{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:var(--muted)}.daily>span:first-child{font-size:34px;line-height:1.15;color:var(--ink);font-weight:300}.welcome{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 22px;border-radius:16px;background:var(--lav);margin-bottom:24px}.welcome p{font-size:14px;color:var(--muted);margin-top:3px}.welcome strong{font-size:15px}.welcome button{white-space:nowrap}.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:24px;align-items:start}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 4px 22px #17233c03}.exercise-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.pill{border:1px solid var(--line);border-radius:30px;padding:5px 11px;white-space:nowrap;font-size:12px}.trainer h2{margin-bottom:8px}.trainer>.muted{font-size:14px;min-height:43px}.staff-wrap{overflow-x:auto;margin:10px -10px 0;scrollbar-width:thin;scroll-behavior:smooth}.staff-wrap svg{display:block;height:170px;min-width:100%;width:auto}.score-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding:2px 0 16px}.check{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:14px}.score-caption .check{font-size:12px;white-space:nowrap}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}.feedback{position:relative;background:#f7f8fc;border-radius:18px;text-align:center;padding:22px 20px 18px;transition:background .25s}.feedback.hit{background:var(--good-bg)}.target-label{font-size:12px;letter-spacing:2px;color:var(--muted);font-weight:650}.target-note{font-size:51px;letter-spacing:-2px;line-height:1.3;font-weight:350}.guidance{font-size:22px;letter-spacing:-.4px;font-weight:600;min-height:35px}.feedback.hit .guidance{color:var(--good)}.pitch-track{height:5px;background:#dce1ed;position:relative;width:78%;margin:24px auto 8px;border-radius:5px}.sweetspot{position:absolute;left:42%;width:16%;background:#8fc4b2;height:5px}.pitch-needle{position:absolute;height:19px;width:4px;background:var(--ink);border-radius:3px;top:-7px;left:50%;transform:translateX(-50%);opacity:.25;transition:left .08s}.track-labels{display:flex;justify-content:space-between;margin:0 auto;width:80%;font-size:12px;color:var(--muted)}.detail{font-size:12px;min-height:20px;margin-top:12px;color:var(--muted)}.hold-track{height:3px;background:#e1e7ec;width:110px;margin:12px auto 0;border-radius:5px;overflow:hidden}.hold-track span{display:block;width:0;height:100%;background:var(--good);transition:width .08s}.listen-row{display:flex;gap:10px;margin:20px 0 12px}.listen-row button{flex:1}.secondary,.primary,.stop{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:11px 17px;border-radius:12px;text-decoration:none;text-align:center;font-weight:600;font-size:14px}.secondary{background:#f7f8fb;border:1px solid var(--line);color:var(--ink)}.secondary:hover{background:#eeeefa}.primary{background:var(--ink);color:white}.primary:hover{background:#2b3652}.start,.stop{width:100%;min-height:54px;font-size:16px}.stop{color:#884349;background:#faeded;border:1px solid #eacbd0}.mic-note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}.controls{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.controls label{flex:1;min-width:95px;font-size:12px;color:var(--muted)}.controls label:first-child{flex:1.7}.unit{display:block;font-size:12px}.controls select,.controls input,select{display:block;width:100%;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);min-height:44px;padding:8px 10px;font-size:14px;margin-top:6px}.controls label:has(.unit){min-width:85px;max-width:95px}.side-stack{display:grid;gap:24px}.daily-plan h2{font-size:21px}.daily-plan ol{list-style:none;padding:0;margin:24px 0}.daily-plan li{display:flex;gap:14px;margin:20px 0}.daily-plan li>span{color:#a89aca;font-size:16px;font-weight:500;padding-top:1px}.daily-plan li strong{font-size:14px}.daily-plan li p{font-size:13px;color:var(--muted);margin-top:2px}.next-card{position:relative;background:linear-gradient(145deg,#f5f2fb,#fff)}.next-card h3{margin:10px 0}.next-card p.muted{font-size:14px}.tiny-spark{position:absolute;right:22px;top:15px;font-size:25px;color:#aa99c5}.text-button{display:inline-block;background:none;color:var(--accent);font-weight:650;font-size:14px;padding:12px 0;text-decoration:none}.notice{margin-top:16px;padding:14px;border-radius:12px;background:#fff5e4;color:#775421;font-size:14px}.result{margin-top:20px;padding:20px;border:1px solid #cfdfd7;border-radius:14px;background:#f2f8f4}.result h3{margin-bottom:8px}.result p{font-size:14px}.result button{margin:14px 8px 0 0}.course-tools{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.course-tools label{font-size:12px;color:var(--muted);width:260px}.week{margin-bottom:26px}.week-title{display:flex;align-items:center;gap:14px;margin-bottom:13px}.week-number{font-size:12px;font-weight:600;color:var(--accent);background:var(--lav);border-radius:9px;min-width:42px;height:42px;display:grid;place-items:center}.week-title h2{font-size:21px;margin:0}.week>p{margin-bottom:14px;font-size:14px;max-width:740px}.exercise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.exercise-tile{display:block;text-align:left;border:1px solid var(--line);background:white;border-radius:15px;padding:18px;color:var(--ink);min-height:116px}.exercise-tile:hover{border-color:#aaa0ce;background:#fdfcff}.exercise-tile .tile-meta{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}.exercise-tile strong{display:block;font-size:15px}.exercise-tile .tile-foot{display:block;font-size:12px;color:var(--accent);margin-top:8px}.free-card{margin:30px 0}.free-card .controls{border:0;margin:0;padding:12px 0 20px;max-width:540px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}.stat{background:white;border:1px solid var(--line);border-radius:18px;padding:24px}.stat strong{font-size:36px;font-weight:400;display:block;letter-spacing:-1px}.stat span{font-size:13px;color:var(--muted)}.history-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.history-row p{font-size:14px}.history-row small{color:var(--muted);font-size:12px}.history-score{text-align:right;white-space:nowrap;font-size:18px;color:var(--good)}.history-score span{display:block;font-size:12px;color:var(--muted)}.transfer{margin-top:24px}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.file-label{cursor:pointer}.file-label input{display:none}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.step-circle{display:grid;place-items:center;background:var(--lav);color:var(--accent);height:32px;width:32px;border-radius:50%;font-size:13px;margin-bottom:15px}.field{display:block;font-size:13px;margin:20px 0 12px;color:var(--muted)}.settings-grid .primary{margin-top:20px}.settings-grid .check{margin-top:18px}.settings-grid p{font-size:14px}.settings-grid p.small{font-size:12px}.status-line{margin-top:18px;padding:10px 12px;background:var(--lav);border-radius:9px;font-size:13px!important}.faq{margin-top:24px}.faq summary{font-weight:600}.faq p{font-size:14px;color:var(--muted);margin-top:15px}footer{text-align:center;padding:42px 0 32px;font-size:12px;color:#7d8496}footer span{color:#b6a6ca;padding:0 9px}[hidden]{display:none!important}@media(max-width:850px){.shell{padding:0 22px}.practice-layout{grid-template-columns:minmax(0,1fr)}.side-stack{grid-template-columns:1fr 1fr}.exercise-grid{grid-template-columns:repeat(2,1fr)}.welcome{align-items:flex-start}.daily{margin-left:12px}.daily>span:last-child{max-width:90px;text-align:right}}@media(max-width:540px){.shell{padding:0 16px}.top{padding:22px 0 18px}.tabs{gap:0;justify-content:space-between;margin-bottom:28px}.tabs button{font-size:13px;padding:13px 4px 12px}h1{font-size:31px;letter-spacing:-1px}.intro-row{align-items:flex-start}.intro-row>.daily{padding-top:20px}.spark{font-size:18px;margin-left:7px}.welcome{display:block;padding:17px}.welcome button{margin-top:12px;width:100%}.card{padding:20px;border-radius:18px}.trainer>.muted{min-height:0}.side-stack,.settings-grid{grid-template-columns:1fr}.daily-plan{display:none}.exercise-head h2{font-size:22px}.exercise-head .pill{padding:4px 8px}.feedback{padding:18px 14px 15px}.target-note{font-size:47px}.guidance{font-size:22px}.controls{gap:9px}.controls label:first-child{min-width:calc(100% - 108px)}.controls label:last-child{min-width:100%}.course-tools{align-items:stretch;flex-direction:column;gap:12px}.course-tools label{width:100%}.exercise-grid{gap:9px}.exercise-tile{padding:15px 13px}.exercise-tile strong{font-size:14px}.stats{gap:9px}.stat{padding:15px 11px}.stat strong{font-size:29px}.stat span{font-size:12px}.privacy{font-size:12px}.score-caption{font-size:12px}.free-card .controls label{min-width:100%}.history-row{gap:8px}.history-row p{font-size:13px}.brand{font-size:27px}.brand-mark{width:42px;height:44px}.daily>span:first-child{font-size:29px}.daily>span:last-child{font-size:12px}.intro-row .muted{font-size:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.audio-slider{font-size:14px;font-weight:600;color:var(--ink)}.audio-slider output{float:right;font-size:13px;font-weight:400;color:var(--muted)}.audio-slider input[type=range]{display:block;width:100%;min-height:44px;accent-color:var(--accent);margin:7px 0 0;cursor:pointer}

.mic-test-graphic{margin:16px 0 12px;padding:16px 18px;background:#f7f8fc;border:1px solid var(--line);border-radius:14px}.settings-grid .mic-test-label{margin:0;font-size:12px;color:var(--accent);font-weight:650}.mic-test-reading{display:flex;gap:16px;justify-content:space-between;align-items:baseline;margin:3px 0 5px}.mic-test-note{font-size:40px;line-height:1.25;font-weight:400;letter-spacing:-1px}.mic-test-frequency{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.mic-test-scale{position:relative;height:24px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 25%);border-right:1px solid var(--line);margin:10px 5px 3px}.mic-test-scale:before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line)}.mic-test-zero{position:absolute;left:50%;width:1px;height:24px;background:#ada2d4}.mic-test-pointer{position:absolute;left:50%;top:5px;width:14px;height:14px;background:var(--accent);border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #c8c1df;transform:translateX(-50%);transition:left .09s linear}.mic-test-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.mic-test-labels strong{color:var(--ink);font-weight:500}.settings-grid .mic-test-caption{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.4}

/* Klangweg: calm, unscored preparation and reflection. */
.listening-guide,.reflection{background:#f3f4f9;border:1px solid #dfe4ee;border-radius:16px;padding:20px;margin:20px 0}.listening-guide h3,.reflection h3{margin:8px 0;font-size:1.2rem}.listening-guide p,.reflection p{line-height:1.6}.practice-choice{margin:20px 0 8px}.listening-guide button:disabled{opacity:.4;cursor:default}.reflection .button-row{flex-wrap:wrap}#explore-next{width:100%;margin:10px 0}[hidden]{display:none!important}
.account-shell{max-width:540px;margin:6vh auto;padding:24px}.account-card{margin-top:32px}.account-card h1{font-size:2rem}.account-card input{width:100%;min-height:48px;border:1px solid #bac2d2;border-radius:10px;padding:10px 12px;font:inherit}.account-card .field{display:grid;gap:8px;margin:20px 0}.account-tabs{margin:24px 0}.account-card .text-button{display:inline-block;margin-top:16px}#account-panel .button-row{flex-wrap:wrap}#account-sync-status{min-height:1.5em}

/* Wide pitch orientation with a separate, linear precision scale. */
.pitch-readings{display:flex;justify-content:center;align-items:center;gap:clamp(28px,9vw,90px);margin-bottom:8px}.pitch-readings>div{min-width:88px}.pitch-readings .target-note,.heard-note{display:block;font-size:clamp(40px,9vw,56px);font-weight:450;line-height:1.2;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}.heard-note{color:var(--accent)}.feedback.hit .heard-note{color:var(--good)}.pitch-readings .target-label{font-size:12px;letter-spacing:1.4px}.pitch-overview{margin:20px 0 18px;padding:14px 18px 10px;border-radius:16px;color:#f7f8ff;background:radial-gradient(ellipse at 50% 20%,#344660 0%,#17233c 75%);box-shadow:inset 0 0 0 1px #ffffff16}.pitch-range-caption{display:flex;justify-content:space-between;gap:10px;color:#ced5e5;font-size:12px}.pitch-axis{height:123px;position:relative;margin:0 10px}.pitch-axis:after{content:"";position:absolute;left:0;right:0;top:75px;height:1px;background:#b5c2d655}.pitch-target-line{position:absolute;top:30px;bottom:30px;left:50%;width:2px;transform:translateX(-50%);background:#87dbc3;box-shadow:0 0 18px 6px #87dbc31b}.pitch-target-tag{position:absolute;left:50%;top:2px;transform:translateX(-50%);font-size:12px;letter-spacing:.4px;color:#a8edda}.pitch-tick{position:absolute;top:71px;height:9px;width:1px;background:#afbbd266}.pitch-tick.major{top:66px;height:19px;background:#c9d3e899}.pitch-note-label{position:absolute;top:94px;transform:translateX(-50%);font-size:14px;white-space:nowrap;color:#ced5e5}.pitch-note-label.is-target{color:#a8edda;font-weight:700}.wide-needle{position:absolute;top:32px;left:50%;z-index:2;transition:left .09s linear;color:#e4dcff}.wide-needle>span{position:absolute;bottom:2px;left:0;transform:translateX(-50%);border-radius:8px;background:#e4dcff;color:#302456;padding:3px 9px;font-size:14px;line-height:1.4;white-space:nowrap;font-weight:650}.wide-needle[data-edge=low]>span{transform:translateX(-18%)}.wide-needle[data-edge=high]>span{transform:translateX(-82%)}.wide-needle:after{content:"";position:absolute;top:0;left:-1px;height:43px;width:2px;background:currentColor}.wide-needle i{position:absolute;top:36px;left:-7px;width:14px;height:14px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px #d6c5ff22,0 0 20px #d6c5ff66}.feedback.hit .wide-needle{color:#a8edda}.feedback.hit .wide-needle>span{background:#a8edda;color:#16493e}.fine-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;text-align:left}.fine-heading>span{color:var(--muted)}.fine-heading output{text-align:right;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.pitch-track{height:26px;width:calc(100% - 14px);margin:14px auto 5px;border-radius:7px;background:repeating-linear-gradient(90deg,#cbd2df 0 1px,transparent 1px 10%),#e7ebf2;border-right:1px solid #cbd2df}.sweetspot{top:0;height:26px;border-radius:6px;background:#abd6c7b8}.fine-zero{position:absolute;left:50%;height:26px;width:1px;background:#286d60}.pitch-needle{height:34px;width:4px;top:-4px;border-radius:4px;background:var(--ink);box-shadow:0 0 0 2px #ffffffd9;opacity:1}.pitch-needle[data-outside=true]{height:14px;width:14px;top:6px;transform:translateX(-50%) rotate(45deg);border-radius:3px;background:var(--accent)}.track-labels{width:100%;font-size:12px}.detail{font-size:14px;line-height:1.45;min-height:21px}.hold-track{height:5px;width:140px}.tempo-entry{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:12px}.tempo-entry label{font-size:12px;text-align:center}.tempo-entry input{display:block;width:84px;min-height:44px;margin:4px auto 0;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);text-align:center;font-size:16px;font-variant-numeric:tabular-nums}.audio-slider output{font-size:14px}.audio-slider:has(#default-bpm){display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px}.audio-slider:has(#default-bpm) input{flex-basis:100%}.audio-slider:has(#default-bpm) output{float:none}.settings-grid #default-bpm-hint,.settings-grid #default-bpm-duration{font-size:14px}
@media(max-width:400px){.feedback{padding-left:12px;padding-right:12px}.pitch-overview{padding-left:12px;padding-right:12px}.pitch-axis{margin-left:8px;margin-right:8px}.pitch-note-label{font-size:14px}.fine-heading{align-items:flex-start;gap:8px}.fine-heading>span{max-width:45%}.pitch-readings{gap:36px}.tempo-entry{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.wide-needle,.pitch-needle{transition:none}}

#start-mic{margin-top:10px;border-color:#bcb2dd;background:#eeeafa;color:#3d326d}#start-mic:hover{background:#e3ddf5}

/* A small gold shimmer rising beside a newly completed exercise. */
.result{position:relative}
.completion-glitter{position:fixed;top:65vh;left:50%;width:72px;height:1px;transform:translateX(-50%);pointer-events:none;user-select:none;color:#b18a36;z-index:10000}
:root[data-theme="dark"] .completion-glitter{color:#e5c26d}
.completion-particle{position:absolute;left:50%;top:0;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:0;animation:completion-rise 3600ms cubic-bezier(.2,.55,.3,1) var(--delay) both}
.completion-particle.is-star{width:8px;height:8px;background:none;border-radius:0;font-size:9px;line-height:8px}
@keyframes completion-rise{0%{opacity:0;transform:translate(var(--x),0) scale(.5)}12%{opacity:.82}45%{opacity:.75}75%{opacity:.3}100%{opacity:0;transform:translate(calc(var(--x) + var(--drift)),var(--rise)) scale(.65)}}
@media(prefers-reduced-motion:reduce){.completion-glitter{display:none}.completion-particle{animation:none}}

/* A brief greeting, independent of the learning and audio lifecycle. */
body.launching{overflow:hidden}
.launch-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;overflow:hidden;isolation:isolate;text-align:center;touch-action:none;animation:launch-fade 4s ease-in-out forwards}
.launch-screen:before{content:"";position:absolute;top:-5%;left:50%;width:min(105vw,560px);height:66%;transform:translateX(-50%);background:var(--spotlight);filter:blur(26px);opacity:.8;mask-image:linear-gradient(#000 55%,transparent);animation:launch-light 1.6s .2s ease-out both}
.launch-content{position:relative;z-index:1;width:100%;max-width:360px;animation:launch-wordmark 1.5s .7s ease-out both}
.launch-screen .launch-wordmark{font-size:clamp(54px,15vw,76px);font-weight:600;line-height:1.12;letter-spacing:-3px;margin:0;text-shadow:0 0 40px var(--wordmark-glow)}
.launch-sparkles{position:absolute;z-index:2;left:50%;top:50%;width:min(90vw,400px);height:240px;transform:translate(-50%,-50%);pointer-events:none;animation:launch-light 1.3s .15s ease-out both}
.launch-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:var(--glitter-gold);opacity:0;box-shadow:0 0 6px var(--wordmark-glow);animation:launch-rise var(--duration) ease-out var(--delay) infinite}
.launch-particle.is-star{color:var(--glitter-gold);background:none;font-size:var(--size);line-height:1;border-radius:0}
@keyframes launch-rise{0%{opacity:0;transform:translate(0,18px)}25%{opacity:.65}70%{opacity:.3}100%{opacity:0;transform:translate(var(--drift),-100px)}}
@keyframes launch-light{from{opacity:0}to{opacity:.8}}
@keyframes launch-wordmark{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes launch-fade{0%,74%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.launch-screen,.launch-content,.launch-sparkles,.launch-screen:before{animation:none}.launch-particle{animation:none;opacity:.35}}

/* Profiles reuse the trainer's navy, violet and rounded controls. */
.account-fields{border:0;padding:0;margin:0;min-width:0}.account-card h1{font-size:clamp(28px,5vw,38px);line-height:1.18}.account-card .muted{line-height:1.55}.account-card .field{font-size:16px}.account-card .small{font-size:14px}.account-tabs{display:flex;padding:5px;border-radius:14px;background:var(--bg);gap:5px;margin:24px 0}.account-tabs button{flex:1;min-height:44px;border-color:transparent;background:transparent}.account-tabs button[aria-pressed=true]{color:white;background:var(--ink)}.account-fields:disabled{opacity:.6}.password-control{display:flex;align-items:center;gap:8px}.password-control input{min-width:0;flex:1}.password-control button{flex:none;min-width:72px;font-size:14px}.account-setup-note{padding:14px 16px;border:1px solid #c9c2e7;border-radius:12px;background:#f2effb;font-size:16px;line-height:1.5}.account-privacy{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.account-local{display:inline-block;margin-top:8px}.profile-heading{display:flex;align-items:center;gap:16px}.profile-heading .eyebrow{margin:0 0 5px}.profile-heading h2{margin:0;overflow-wrap:anywhere}.profile-heading p{margin:4px 0;overflow-wrap:anywhere}.profile-avatar{width:56px;height:56px;flex:0 0 56px;border-radius:18px;display:grid;place-items:center;background:var(--ink);color:#d8d0ff;font-size:26px;font-weight:600}.profile-transfer{border-top:1px solid var(--line);padding-top:16px;margin:18px 0}.profile-transfer summary{cursor:pointer;font-size:16px}.account-card button:focus-visible,.account-card a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media(max-width:450px){.account-shell{padding:24px 16px}.account-card{padding:24px 20px}.profile-heading{align-items:flex-start}.profile-heading>div{min-width:0}.account-card .account-tabs{flex-wrap:nowrap}}
.score-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.score-heading h2{font-size:30px;margin-top:8px}.score-selectors{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin:28px 0 16px}.score-selectors label{font-size:14px;color:var(--muted)}.score-selectors select{display:block;width:100%;margin-top:7px;min-height:48px}.score-preview-wrap{overflow-x:auto;border-block:1px solid var(--line);padding:18px 0 10px;-webkit-overflow-scrolling:touch}.score-preview-wrap svg{display:block;max-width:none}.score-practice-hint{font-size:14px;color:var(--muted);margin:16px 0}.tabs{overflow-x:auto;scrollbar-width:thin}.tabs button{flex-shrink:0}.score-preview-wrap:focus-visible{outline:3px solid #9c8bdd;outline-offset:4px}@media(max-width:540px){.tabs{gap:16px;justify-content:flex-start}.tabs button{font-size:14px}.score-selectors{grid-template-columns:1fr 1fr;gap:12px}.score-selectors label:first-child{grid-column:1/-1}}

/* One menu for all sections; the trainer stays clear on small screens. */
.app-top{justify-content:flex-start;gap:20px;border-bottom:1px solid var(--line);margin-bottom:28px}.app-top .brand{font-size:27px}.app-top .brand-sub{font-size:12px;letter-spacing:.8px;text-transform:none;line-height:1.3}.header-glint{margin-left:auto;color:#9685bf;font-size:22px}.menu-toggle,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;min-width:48px;border-radius:13px;background:#e8eaf1;color:var(--ink)}.menu-toggle{margin-left:auto;flex-shrink:0;padding:0 13px;font-size:14px;font-weight:650}.icon-button{background:transparent;flex-shrink:0}.menu-toggle:hover,.icon-button:hover{background:#dfddec}.menu-toggle svg,.icon-button svg{flex-shrink:0}
.app-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:fit-content;min-width:min(12rem,calc(100vw - 40px));max-width:min(14rem,calc(100vw - 40px));height:100%;height:100dvh;max-height:none;border:0;border-radius:24px 0 0 24px;padding:max(24px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) 12px;background:var(--paper);color:var(--ink);box-shadow:-12px 0 60px #10182e26;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}.app-drawer:not([open]){display:none}.app-drawer[open]{display:flex;flex-direction:column;animation:drawer-enter .22s ease-out}.app-drawer::backdrop{background:#10182e70;animation:drawer-backdrop .18s ease-out}.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 22px}.drawer-top h2{margin:0;font-size:25px}.menu-nav{display:grid;gap:8px;min-width:0}.menu-nav button{display:block;text-align:left;min-height:54px;padding:14px 14px;border-radius:13px;background:transparent;color:var(--ink);font-size:17px;font-weight:550;white-space:normal;overflow-wrap:anywhere}.menu-nav button:hover{background:#f2f0f8}.menu-nav button.active{background:var(--lav);color:#4c3d99;font-weight:700}.drawer-profile{border-top:1px solid var(--line);margin-top:28px;padding:23px 14px;min-width:0}.drawer-profile .eyebrow{font-size:12px}.drawer-profile .text-button{display:block;margin-top:8px;font-size:16px;overflow-wrap:anywhere;min-height:44px}.drawer-footer{margin-top:auto;padding:22px 14px 0;overflow-wrap:anywhere;font-size:14px;line-height:1.7;color:var(--muted)}.drawer-footer span{color:#9685bf;margin-left:6px}body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.app-drawer[open].is-closing{animation:drawer-exit .22s ease-in forwards}.app-drawer.is-closing::backdrop{animation:drawer-backdrop-exit .18s ease-in forwards}@keyframes drawer-exit{from{transform:var(--drawer-exit-from,translateX(0))}to{transform:translateX(100%)}}@keyframes drawer-backdrop-exit{from{opacity:var(--drawer-backdrop-from,1)}to{opacity:0}}
@keyframes drawer-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-backdrop{from{opacity:0}to{opacity:1}}@media(max-width:540px){.app-top{gap:16px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:18px;margin-bottom:24px}.app-top .brand{font-size:25px}}@media(prefers-reduced-motion:reduce){.app-drawer[open],.app-drawer[open].is-closing,.app-drawer::backdrop,.app-drawer.is-closing::backdrop{animation:none}}

/* A plain, persistent acknowledgement of the account's online state. */
.sync-indicator{color:var(--muted);font-size:14px;line-height:1.5;overflow-wrap:anywhere}.sync-indicator[data-state=synced]{color:var(--good)}.sync-indicator[data-state=pending],.sync-indicator[data-state=syncing]{color:var(--accent)}.sync-indicator[data-state=offline],.sync-indicator[data-state=error]{color:#865221}.transfer .sync-indicator{margin:18px 0 10px}.transfer>.small{margin-top:22px}
/* Guided course and free expert workspace share one saved learning history. */
body[data-app-mode="normal"] .expert-only,body[data-app-mode="expert"] .normal-only{display:none!important}
.mode-badge{font:inherit;font-size:14px;font-weight:650;border:1px solid #c9c2df;border-radius:999px;padding:8px 14px;min-height:44px;color:var(--accent);background:var(--lav)}
.drawer-mode{font-size:14px;color:var(--muted);margin:20px 0 0}.mode-settings{margin:24px 0}.mode-settings .field{max-width:420px;font-size:14px}.mode-settings select{font-size:16px;min-height:48px}.mode-settings p{margin:14px 0;line-height:1.6}.mode-settings .check{font-size:16px;line-height:1.5;align-items:flex-start;margin-top:24px}.mode-settings .check input{flex:none;width:20px;height:20px}.settings-done{margin-top:24px}
body[data-app-mode="normal"] .practice-layout{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
body[data-app-mode="normal"] .intro-row{max-width:760px;margin-inline:auto;margin-bottom:20px}
body[data-app-mode="normal"] #home-title{font-size:clamp(27px,5vw,38px)}
.guided-progress{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:760px;margin:0 auto 24px;color:var(--muted);font-size:14px}
.guided-progress progress{flex-basis:100%;width:100%;height:7px;border:0;border-radius:99px;overflow:hidden;accent-color:var(--accent);background:var(--line)}
.guided-progress progress::-webkit-progress-bar{background:var(--line);border-radius:99px}.guided-progress progress::-webkit-progress-value{background:var(--accent);border-radius:99px}.guided-progress progress::-moz-progress-bar{background:var(--accent)}
.guide-stages{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;font-size:14px;color:var(--muted)}
.guide-stages li{border-top:3px solid #d9dbe6;padding-top:9px;overflow-wrap:anywhere}.guide-stages li[aria-current="step"]{color:var(--accent);border-color:var(--accent);font-weight:650}.guide-stages li[data-done="true"]{border-color:#849b92}
body[data-app-mode="normal"] .listening-guide{padding:20px 0 0;border:0;background:none;margin:20px 0}
body[data-app-mode="normal"] .listening-guide p{font-size:16px;max-width:62ch}
body[data-app-mode="normal"] #guide-step{font-size:12px}
body[data-app-mode="normal"] #guide-next{display:none}
body[data-app-mode="normal"] #guided-action{flex:1;min-height:52px;font-size:16px}
body[data-app-mode="normal"] #guide-back{min-width:65px}
body[data-app-mode="normal"] #guided-comfort{display:block;margin-top:12px}
body[data-app-mode="normal"] .reflection{margin-bottom:12px;font-size:16px}
body[data-app-mode="normal"] .result{padding:20px 0 0;background:none;border:0}
body[data-app-mode="normal"] .result .primary{min-height:52px;width:100%;font-size:16px}
body[data-app-mode="normal"] .result h3{font-size:21px}
body[data-app-mode="normal"] .result p{font-size:16px;line-height:1.55}
.course-complete{max-width:760px;margin:0 auto}.course-complete p{margin:18px 0;line-height:1.6}.course-complete .primary,.course-complete .text-button{display:block;margin-top:18px}
.course-resume{margin:20px 0 28px}.course-resume p{margin-bottom:14px;font-size:16px}
.course-week{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding:22px 12px}.course-week h2{font-size:20px;line-height:1.3;margin:0 0 6px}.course-week p{font-size:14px;color:var(--muted);line-height:1.5}.course-week .week-number{flex:none}.course-week>div{flex:1}.course-week.is-current{background:var(--lav);border-radius:14px}.course-week-status{font-size:14px;color:var(--accent)}
body[data-app-mode="normal"] #kurs>.faq{margin-bottom:24px}
@media(max-width:540px){.guide-stages{font-size:12px;gap:5px}.mode-badge{padding:8px 11px}.guided-progress{gap:10px}.course-week{gap:12px;padding:18px 8px}.course-week h2{font-size:18px}.course-week-status{display:none}.mode-settings .check{align-items:flex-start}.mode-settings .small{font-size:14px}.course-complete h2{font-size:25px}}



/* A single calm task in the guided course. */
body[data-app-mode="normal"] #heute>.intro-row{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-app-mode="normal"] .practice-layout,body[data-app-mode="normal"] .course-complete{max-width:660px}
body[data-app-mode="normal"] .trainer{padding:30px 32px}
body[data-app-mode="normal"] .exercise-head{padding-bottom:22px;border-bottom:1px solid var(--line)}
body[data-app-mode="normal"] .exercise-head h2{font-size:clamp(24px,4.5vw,30px);margin:8px 0 0}
body[data-app-mode="normal"] .guide-stages{display:none}
body[data-app-mode="normal"] .listening-guide{margin:24px 0 20px;padding:0}
body[data-app-mode="normal"] .listening-guide h3{font-size:22px;margin:8px 0 10px}
body[data-app-mode="normal"] .listening-guide #guide-step{font-size:12px;color:var(--muted);letter-spacing:1.2px}
body[data-app-mode="normal"] .listening-guide #guide-text{line-height:1.65}
body[data-app-mode="normal"] .listening-guide .button-row{margin-top:4px}
.guided-main-action{margin-top:20px}.guided-main-action:has([hidden]){display:none}
body[data-app-mode="normal"] #guided-action{width:100%}
body[data-app-mode="normal"] .staff-wrap svg{height:145px}
body[data-app-mode="normal"] .listen-row{margin:12px 0 0}
body[data-app-mode="normal"] .listen-row button{min-height:44px;background:none;border:0;color:var(--accent)}
body[data-app-mode="normal"] #guided-comfort{width:100%;text-align:center;font-weight:500;font-size:14px;margin-top:8px}
body[data-app-mode="normal"] .mic-note{font-size:12px;margin-top:0}
body[data-app-mode="normal"] #pitch-detail{display:none}
body[data-app-mode="normal"] .pitch-track{margin-top:20px}
body[data-app-mode="normal"][data-practicing="true"] #guide-text,body[data-app-mode="normal"][data-practicing="true"] #guide-title{display:none}
body[data-app-mode="normal"][data-practicing="true"] .listening-guide{margin:14px 0 0}
body[data-app-mode="normal"][data-guide-step="3"] #guide-text,body[data-app-mode="normal"][data-guide-step="3"] .reflection>h3,body[data-app-mode="normal"][data-guide-step="3"] .reflection>.small,body[data-app-mode="normal"][data-guide-step="3"] .result>p{display:none}
body[data-app-mode="normal"][data-guide-step="3"] .reflection{padding:0;background:none;border:0;margin-top:0}
body[data-app-mode="normal"][data-guide-step="3"] .result>h3{font-size:16px;color:var(--good)}
body[data-app-mode="normal"] #kurs .guided-progress{max-width:none;margin:20px 0}
@media(max-width:540px){body[data-app-mode="normal"] .trainer{padding:24px 20px}body[data-app-mode="normal"] .app-top{margin-bottom:18px}body[data-app-mode="normal"] .exercise-head{padding-bottom:18px}body[data-app-mode="normal"] .listening-guide{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.launch-particle{animation:none;opacity:.7}}

/* Settings are ordered by everyday use, with the course switch in their header. */
#einstellungen{max-width:940px;margin-inline:auto}
.settings-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:4px 0 8px}
.settings-header h1{margin:0;font-size:clamp(26px,4vw,38px)}
.settings-mode-switch{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;gap:9px;min-height:48px;margin-left:auto;flex:none;cursor:pointer;font-size:14px;line-height:1.4;color:var(--muted)}
.settings-mode-switch input{z-index:1;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.mode-switch-track{display:block;position:relative;width:46px;height:28px;flex:none;border-radius:999px;background:var(--surface-hover,var(--lav));border:1px solid var(--line);transition:background .15s}
.mode-switch-track:after{content:"";display:block;position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .15s}
.settings-mode-switch input:checked+.mode-switch-track{background:var(--accent);border-color:var(--accent)}
.settings-mode-switch input:checked+.mode-switch-track:after{transform:translateX(18px);background:var(--paper)}
.settings-mode-switch input:focus-visible+.mode-switch-track{outline:3px solid var(--accent);outline-offset:4px}
body[data-app-mode="normal"] .mode-label-normal,body[data-app-mode="expert"] .mode-label-expert{font-weight:700;color:var(--ink)}
.settings-mode-description{font-size:14px;line-height:1.5;margin-bottom:28px}
.settings-sections{display:grid;gap:12px}
#einstellungen .settings-section{margin:0;min-width:0;padding:0;overflow:hidden}
#prepared-score{min-width:0;padding:0;overflow:hidden}
#prepared-score .file-label{max-width:100%;white-space:normal}
body[data-practicing="true"] #prepared-score,body[data-task-active="true"] #prepared-score{display:none!important}
.settings-section>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:20px 24px;font-size:18px;font-weight:600;line-height:1.5;list-style:none;cursor:pointer}
.settings-section>summary::-webkit-details-marker{display:none}
.settings-section>summary:after{content:"";width:9px;height:9px;flex:none;margin:0 4px 4px 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s ease}
.settings-section[open]>summary:after{transform:rotate(225deg);margin-bottom:0}
.settings-section>summary:focus-visible{outline-offset:-5px;border-radius:var(--radius)}
.settings-content{padding:2px 24px 24px}
.settings-section[open]>summary{margin-bottom:14px;border-bottom:1px solid var(--line)}
.settings-section h2{font-size:22px;margin:0 0 20px}
.settings-section h3{font-size:18px;line-height:1.4;margin:0 0 12px}
.settings-section p{font-size:16px;line-height:1.6}
.settings-section p.small,.settings-section .field{font-size:14px}
.settings-section .field{margin:16px 0 10px}
.settings-section select{font-size:16px;min-height:46px}
.settings-section #headphones{max-width:420px}
.settings-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.settings-group{min-width:0}
.settings-group+.settings-group{border-left:1px solid var(--line);padding-left:28px}
.settings-details{margin-top:20px;border-top:1px solid var(--line);padding-top:8px}
.settings-details>summary{padding:12px 0;font-size:16px;font-weight:600;color:var(--accent)}
.settings-details>p{margin-top:10px}.settings-details .button-row{margin:18px 0}
.settings-section #sound-check{margin-top:18px}.settings-section #sound-status{margin-top:10px}
.guided-mic-setting{margin:0 0 20px}.guided-mic-setting .check{font-size:16px;align-items:flex-start;gap:10px}.guided-mic-setting input{flex:none;margin-top:4px}.guided-mic-setting p{margin-top:8px}
.settings-section .mic-test-label{font-size:12px;color:var(--accent);font-weight:650}.settings-section .mic-test-caption{font-size:14px;color:var(--muted)}
.settings-data .profile-heading{margin-bottom:16px}.settings-data .profile-heading h2{margin-bottom:0}.settings-data .profile-heading p{font-size:14px}.settings-data #account-sync-status{margin:18px 0 12px}
.settings-data #settings-progress{display:block;margin-top:14px;text-align:left;min-height:44px}
#settings-local-profile .secondary{margin-top:18px}
.settings-help h3{margin-top:12px}
.settings-done{margin-top:26px;min-height:50px}
@media(max-width:640px){.settings-section>summary{padding:18px 20px;min-height:64px}.settings-content{padding:2px 20px 20px}.settings-columns{grid-template-columns:minmax(0,1fr);gap:24px}.settings-group+.settings-group{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}.settings-header{gap:8px 12px}.settings-header h1{font-size:26px}.settings-mode-description{margin-bottom:22px}.settings-section h2{font-size:21px}.settings-mode-switch{gap:7px}}
@media(max-width:360px){.settings-header h1{font-size:24px}.settings-mode-switch{margin-left:auto}.settings-header{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.mode-switch-track,.mode-switch-track:after,.settings-section>summary:after{transition:none}}

/* The running exercise becomes a calm working surface in both modes. */
.practice-score,.practice-actions{min-width:0}
.note-name .note-octave{font-size:.36em;letter-spacing:0;font-weight:400;opacity:.58;margin-left:.08em;vertical-align:baseline}
.pitch-note-label .note-octave,.wide-needle .note-octave{font-size:.66em}
.practice-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.practice-mic{font-size:14px;color:var(--muted)}
.practice-mic[data-state="on"]{color:var(--good)}
body[data-practicing="true"] #heute>.intro-row,body[data-practicing="true"] #welcome,
body[data-practicing="true"] .side-stack,body[data-practicing="true"] #listening-guide,
body[data-practicing="true"] #exercise-tip,body[data-practicing="true"] #score-return,
body[data-practicing="true"] .practice-choice,body[data-practicing="true"] #practice-explanation,
body[data-practicing="true"] #score-practice-hint,body[data-practicing="true"] #measurement-controls,
body[data-practicing="true"] .score-caption .check,body[data-practicing="true"] .exercise-head .pill,
body[data-practicing="true"] #listen-first,
body[data-practicing="true"] #pitch-detail,body[data-practicing="true"] .shell>footer{display:none!important}
body[data-practicing="true"] .app-top{padding-block:14px;margin-bottom:16px}
body[data-practicing="true"] .practice-layout{display:block;max-width:1040px;margin-inline:auto}
body[data-practicing="true"] .trainer{padding:24px;min-width:0}
body[data-practicing="true"] .exercise-head{padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--line)}
body[data-practicing="true"] .exercise-head h2{font-size:clamp(22px,3vw,28px);margin-top:5px}
body[data-practicing="true"] .exercise-head .eyebrow{font-size:12px}
body[data-practicing="true"] .staff-wrap{margin:0;scroll-padding-inline:22px}
body[data-practicing="true"] .staff-wrap svg{height:clamp(168px,25svh,224px)}
body[data-practicing="true"] .score-caption{font-size:14px;margin:4px 0 14px;color:var(--muted)}
body[data-practicing="true"] .feedback{padding:18px 20px;border-radius:16px}
body[data-practicing="true"] .pitch-readings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
body[data-practicing="true"] .pitch-readings>div{min-width:0}
body[data-practicing="true"] .pitch-readings .target-label{font-size:14px;letter-spacing:.3px}
body[data-practicing="true"] .target-note,body[data-practicing="true"] .heard-note{font-size:clamp(48px,8svh,72px);line-height:1.12;margin-top:4px;min-height:1.12em}
body[data-practicing="true"] .guidance{font-size:15px;line-height:1.45;min-height:22px;margin:8px 0}
body[data-practicing="true"] .pitch-overview{display:block;margin:12px 0 14px;padding:12px 14px 8px}
body[data-practicing="true"] .pitch-axis{height:96px;margin-inline:10px}
body[data-practicing="true"] .pitch-axis:after{top:56px}
body[data-practicing="true"] .pitch-target-line{height:57px;top:9px}
body[data-practicing="true"] .pitch-tick{top:52px;height:8px}
body[data-practicing="true"] .pitch-tick.major{top:47px;height:18px}
body[data-practicing="true"] .pitch-note-label{top:72px;font-size:15px}
body[data-practicing="true"] .wide-needle{top:21px}
body[data-practicing="true"] .wide-needle:after{height:35px}
body[data-practicing="true"] .wide-needle i{top:28px}
body[data-practicing="true"] .fine-heading{display:flex;align-items:baseline;font-size:14px;gap:8px}
body[data-practicing="true"] .fine-heading output{font-size:13px;max-width:60%}
body[data-practicing="true"] .pitch-track{margin:12px auto 5px}
body[data-practicing="true"] .track-labels{display:flex;font-size:12px}
body[data-practicing="true"] .hold-track{margin-top:12px}
#measurement-display[data-inactive="true"] .wide-needle{opacity:.58}
body[data-practicing="true"] .practice-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;padding-bottom:env(safe-area-inset-bottom)}
body[data-practicing="true"] .practice-toolbar{display:contents}
body[data-practicing="true"] .practice-mic{flex:none;max-width:100px;text-align:right;line-height:1.4}
body[data-practicing="true"] #practice-restart{grid-row:1;grid-column:1}
body[data-practicing="true"] .listen-row{grid-row:1;grid-column:2;margin:0}
body[data-practicing="true"] #stop{grid-row:1;grid-column:3}
body[data-practicing="true"] #explore-next{grid-column:1/-1;grid-row:2;margin:0}
body[data-practicing="true"] .practice-actions button{min-height:46px;padding:10px 8px;font-size:14px;margin:0}
body[data-practicing="true"] #notice{grid-column:1/-1}
@media(min-width:900px){
 body[data-practicing="true"] .trainer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 30px;min-height:min(740px,calc(100svh - 150px));align-content:center;padding:28px 32px}
 body[data-practicing="true"] .exercise-head{grid-column:1/-1;align-self:start;margin-bottom:28px}
 body[data-practicing="true"] .practice-score{align-self:center}
 body[data-practicing="true"] .staff-wrap svg{height:250px}
 body[data-practicing="true"] .score-caption{margin-top:20px}
 body[data-practicing="true"] .feedback{align-self:center}
 body[data-practicing="true"] .practice-actions{grid-column:1/-1;grid-template-columns:1fr auto auto auto;align-items:center;padding-top:20px;margin-top:24px;border-top:1px solid var(--line)}
 body[data-practicing="true"] #practice-restart{grid-column:2;grid-row:1}
 body[data-practicing="true"] .listen-row{grid-column:3;grid-row:1}
 body[data-practicing="true"] #stop{grid-column:4;grid-row:1}
 body[data-practicing="true"] #explore-next{grid-column:2/-1;grid-row:2}
 body[data-practicing="true"] .practice-actions button{padding-inline:20px}
}
@media(max-width:560px){
 body[data-practicing="true"] .shell{padding-inline:12px}
 body[data-practicing="true"] .app-top{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px;margin-bottom:10px}
 body[data-practicing="true"] .trainer{padding:14px 16px;border-radius:18px}
 body[data-practicing="true"] .exercise-head{margin-bottom:8px;padding-bottom:12px}
 body[data-practicing="true"] .practice-mic{font-size:12px;max-width:84px}
 body[data-practicing="true"] .feedback{padding:10px 12px}
 body[data-practicing="true"] .staff-wrap svg{height:clamp(140px,17svh,160px)}
 body[data-practicing="true"] .score-caption{margin:2px 0 8px}
 body[data-practicing="true"] .target-note,body[data-practicing="true"] .heard-note{font-size:48px}
 body[data-practicing="true"] .pitch-readings{margin-bottom:4px}
 body[data-practicing="true"] .guidance{font-size:14px;margin:4px 0;min-height:21px}
 body[data-practicing="true"] .pitch-overview{margin:8px 0 10px;padding-top:8px;padding-bottom:6px}
 body[data-practicing="true"] .pitch-axis{height:76px}
 body[data-practicing="true"] .pitch-axis:after{top:40px}
 body[data-practicing="true"] .pitch-target-line{top:5px;height:44px}
 body[data-practicing="true"] .pitch-tick{top:36px}
 body[data-practicing="true"] .pitch-tick.major{top:31px}
 body[data-practicing="true"] .pitch-note-label{top:52px;font-size:14px}
 body[data-practicing="true"] .wide-needle{top:9px}
 body[data-practicing="true"] .wide-needle:after{height:31px}
 body[data-practicing="true"] .wide-needle i{top:24px}
 body[data-practicing="true"] .hold-track{margin-top:8px}
 body[data-practicing="true"] #measurement-display[data-inactive="true"] .hold-track{display:none}
 body[data-practicing="true"] .practice-actions{gap:8px;margin-top:12px}
}

/* Fokus: shared rhythm, surfaces and sequential course Steps. */
#kurs,#fortschritt,#intervalle{max-width:900px;margin-inline:auto}
#kurs .lead{margin:12px 0 24px;font-size:15px;max-width:600px}
.course-resume{padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.course-resume p{font-weight:600}.course-resume .primary{flex:none}
.course-steps{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.course-step{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.step-row{width:100%;display:flex;align-items:center;gap:18px;padding:18px 20px;text-align:left;color:var(--ink);background:transparent}
button.step-row:hover{background:var(--surface-hover)}
.step-index{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;background:var(--surface-soft);color:var(--muted);font-variant-numeric:tabular-nums}
.step-copy{display:grid;gap:3px;min-width:0;flex:1}.step-meta{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.3px}.step-copy strong{font-size:16px;font-weight:600;line-height:1.35}.step-topic{font-size:13px;color:var(--muted)}
.step-context{border-top:1px solid var(--line);padding:12px 20px;color:var(--muted);font-size:13px}.step-context summary{min-height:24px}.step-context p{padding:12px 0 4px;max-width:650px}
.step-status{font-size:12px;color:var(--muted);white-space:nowrap}
.course-step.is-current{border-color:var(--accent);background:var(--lav)}.is-current .step-index{background:var(--primary-bg);color:var(--primary-text)}.is-current .step-meta,.is-current .step-status{color:var(--accent)}
.is-complete .step-index{background:var(--good-bg);color:var(--good)}.is-complete .step-status{color:var(--good)}
#kurs .faq{margin-top:28px}.course-tools{margin:24px 0}.course-tools label{width:360px;max-width:100%}
.stat{box-shadow:none}.stat strong{font-size:34px;font-weight:450}.stat small{font-size:16px;color:var(--muted);letter-spacing:0;margin-left:3px}
.free-card{max-width:720px}.free-card .primary{min-width:180px}.account-card{box-shadow:none}.account-shell>.brand{font-weight:600}.profile-avatar{border-radius:50%}
.pitch-overview{border:1px solid var(--line);box-shadow:none;background:var(--paper);color:var(--ink)}
.pitch-range-caption,.pitch-note-label{color:var(--muted)}.scale-name{font-weight:600;color:var(--ink)}
.pitch-axis:after,.pitch-tick{background:var(--meter-line)}.pitch-tick.major{background:var(--muted)}
.pitch-target-line{background:var(--good);box-shadow:none}.pitch-target-tag,.pitch-note-label.is-target{color:var(--good)}
.wide-needle{color:var(--accent)}.wide-needle>span{background:var(--accent);color:var(--primary-text)}.wide-needle i{box-shadow:0 0 0 4px var(--lav)}
.feedback.hit .wide-needle{color:var(--good)}.feedback.hit .wide-needle>span{background:var(--good);color:var(--paper)}
.pitch-readings .target-note{color:var(--good)}.pitch-needle{background:var(--accent)}
body[data-app-mode="normal"][data-guide-step="2"]:not([data-practicing="true"]) .listening-guide{margin:12px 0}
body[data-app-mode="normal"][data-guide-step="2"]:not([data-practicing="true"]) #exercise-tip{display:none}
body[data-app-mode="normal"][data-guide-step="2"]:not([data-practicing="true"]) .feedback{padding:14px}
body[data-app-mode="normal"][data-guide-step="2"]:not([data-practicing="true"]) .pitch-overview{margin:10px 0;padding:8px 12px}
body[data-practicing="true"] .pitch-range-caption{font-size:11px}
@media(max-width:560px){
 .course-resume{padding:18px;align-items:stretch;flex-direction:column;gap:12px}.course-resume .primary{width:100%}
 .step-row{padding:15px 13px;gap:12px}.step-index{width:32px;height:32px}.step-copy strong{font-size:15px}.step-topic{font-size:12px}.step-status{font-size:11px}.course-step:not(.is-current) .step-status{display:none}
 .stat strong{font-size:29px}.free-card .primary{width:100%}.free-card .controls{gap:14px}
 body[data-practicing="true"] .exercise-head h2{font-size:22px}
 body[data-practicing="true"] .score-caption{padding-bottom:8px;font-size:12px}
 body[data-practicing="true"] .fine-heading>span{max-width:none;white-space:nowrap}
}
@media(max-width:560px) and (max-height:760px){
 body[data-practicing="true"] .app-top{margin-bottom:8px;padding-block:8px}
 body[data-practicing="true"] .trainer{padding:12px}
 body[data-practicing="true"] .exercise-head{padding-bottom:8px;margin-bottom:2px}
 body[data-practicing="true"] .staff-wrap svg{height:100px}
 body[data-practicing="true"] .score-caption{margin:0;padding-bottom:4px}
 body[data-practicing="true"] .pitch-overview{margin:6px 0 8px}
 body[data-practicing="true"] .feedback{padding:8px 10px}
 body[data-practicing="true"] .target-note,body[data-practicing="true"] .heard-note{font-size:42px}
 body[data-practicing="true"] .pitch-readings .target-label{font-size:12px}
 body[data-practicing="true"] .guidance{margin:2px 0}
 body[data-practicing="true"] .practice-actions{margin-top:8px}
}

/* A one-time, device-local explanation before any microphone permission. */
.microphone-notice{width:min(440px,calc(100% - 32px));max-height:calc(100svh - 32px);margin:auto;padding:28px;color:var(--ink);overflow:auto}
.microphone-notice::backdrop{background:#080d16b8}
.microphone-notice h2{margin:10px 0 18px}.microphone-notice p{font-size:16px;line-height:1.55}.microphone-notice .eyebrow{font-size:12px}.microphone-notice .muted{font-size:14px;margin-top:16px}
.microphone-notice .primary{width:100%;margin-top:24px;min-height:48px}
/* Learning extension follows the existing Fokus surface and spacing. */
#lernweg{max-width:1060px;margin-inline:auto}#learning-content{display:grid;gap:20px;grid-template-columns:1fr 1fr}#learning-content>details,#learning-content>.questionnaire{grid-column:1/-1}.learning-summary,.learning-next,.questionnaire{padding:28px}.learning-summary h2,.learning-next h2{font-size:24px;line-height:1.35}.answer-list{display:grid;gap:10px;margin:20px 0}.answer-list label{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:12px;font-size:16px;cursor:pointer}.answer-list input{width:20px;height:20px;accent-color:var(--accent);flex:none}.questionnaire input[type=text],#goal-text{display:block;width:100%;font:inherit;padding:12px;margin-top:8px}.questionnaire progress{width:100%;height:8px;margin-bottom:22px}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.skills-grid>div{display:grid;gap:4px;border-top:1px solid var(--line);padding-block:12px}.skills-grid span{color:var(--muted);font-size:14px}.learning-alternatives{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.wait-control{margin:14px 0}.wait-control>small{display:block;color:var(--muted);margin-top:8px}.wait-control input[role=switch]{appearance:none;width:36px;height:22px;border-radius:20px;background:var(--line);position:relative;cursor:pointer;flex:none}.wait-control input[role=switch]:before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:var(--paper);left:3px;top:3px;transition:transform .2s}.wait-control input[role=switch]:checked{background:var(--accent)}.wait-control input[role=switch]:checked:before{transform:translateX(14px)}.wait-control input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.tap-pad{min-height:110px;font:inherit;font-size:22px;border-radius:20px;background:var(--lav);color:var(--ink);border:2px solid var(--accent);touch-action:manipulation}#task-panel{width:100%}#task-notation{overflow:auto}#task-panel h2{font-size:24px}#task-message{min-height:48px;padding:12px;background:var(--lav);border-radius:10px}#learning-invite{align-items:center}body[data-task-active=true] #heute>.intro-row,body[data-task-active=true] #learning-invite,body[data-task-active=true] .learning-alternatives,body[data-task-active=true] .side-stack,body[data-task-active=true] .trainer>:not(#task-panel){display:none!important}body[data-task-active=true] .trainer{height:calc(100dvh - 100px);overflow:auto;padding:20px}body[data-task-active=true] .practice-layout{display:block;max-width:960px;margin:auto}body[data-task-active=true] #task-panel{display:block}#task-panel .button-row{flex-wrap:wrap}
body[data-practicing=true] #learning-invite,body[data-practicing=true] .learning-alternatives,body[data-practicing=true] .wait-control,body[data-practicing=true] #stop{display:none!important}
body[data-practicing=true] .shell{height:100dvh;display:flex;flex-direction:column;padding-block:env(safe-area-inset-top) env(safe-area-inset-bottom)}body[data-practicing=true] .app-top{flex:none;padding-block:8px;margin-bottom:8px}body[data-practicing=true] .shell>main{flex:1;min-height:0}body[data-practicing=true] #heute,body[data-practicing=true] .practice-layout{height:100%;min-height:0}body[data-practicing=true] .trainer{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(90px,1fr) auto auto;gap:8px;padding:12px 18px;align-content:stretch}body[data-practicing=true] .exercise-head{margin:0;padding:0;border:0}body[data-practicing=true] .exercise-head h2{font-size:20px}body[data-practicing=true] .practice-score{min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}body[data-practicing=true] .staff-wrap{min-height:0}body[data-practicing=true] .staff-wrap svg{height:clamp(100px,17dvh,210px)}body[data-practicing=true] .score-caption{margin:0;font-size:14px}body[data-practicing=true] .feedback{padding:8px 12px}body[data-practicing=true] .target-note,body[data-practicing=true] .heard-note{font-size:clamp(30px,5dvh,56px)}body[data-practicing=true] .pitch-overview{margin:4px 0 8px;padding:6px 12px}body[data-practicing=true] .guidance{font-size:14px;margin:2px 0}body[data-practicing=true] .practice-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;border:0}body[data-practicing=true] #practice-restart{grid-column:1;grid-row:1}body[data-practicing=true] .listen-row{grid-column:2;grid-row:1}body[data-practicing=true] #practice-pause{grid-column:3;grid-row:1}body[data-practicing=true] #practice-end{grid-column:4;grid-row:1}body[data-practicing=true] #explore-next{grid-column:1/-1;grid-row:2}body[data-practicing=true] .practice-actions button{min-height:44px;padding:8px;font-size:14px}body[data-practicing=true] #result,body[data-practicing=true] #reflection{display:none!important}
@media(min-width:850px), (orientation:landscape) and (min-width:620px){body[data-practicing=true] .trainer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px 22px}body[data-practicing=true] .exercise-head{grid-column:1/-1}body[data-practicing=true] .feedback{grid-column:2;grid-row:2;align-self:center}body[data-practicing=true] .practice-score{grid-column:1;grid-row:2}body[data-practicing=true] .practice-actions{grid-column:1/-1;grid-row:3}body[data-practicing=true] .staff-wrap svg{height:clamp(120px,27dvh,250px)}}
@media(max-height:480px) and (orientation:landscape){body[data-practicing=true] .app-top{padding-block:0;margin-bottom:4px;min-height:36px}body[data-practicing=true] .exercise-head .eyebrow{display:none}body[data-practicing=true] .exercise-head h2{font-size:18px;margin:0}body[data-practicing=true] .trainer{padding:8px 12px;gap:4px 20px}body[data-practicing=true] .pitch-readings{display:flex;justify-content:space-between;margin:0}body[data-practicing=true] .pitch-readings>div{display:flex;align-items:center;gap:8px}body[data-practicing=true] .target-note,body[data-practicing=true] .heard-note{font-size:28px;margin:0}body[data-practicing=true] .guidance{min-height:18px;margin:0}body[data-practicing=true] .pitch-overview{margin:0;padding:0 12px}body[data-practicing=true] .pitch-axis{height:55px}body[data-practicing=true] .pitch-axis:after{top:27px}body[data-practicing=true] .pitch-tick{top:24px}body[data-practicing=true] .pitch-tick.major{top:19px}body[data-practicing=true] .pitch-target-line{top:0;height:32px}body[data-practicing=true] .pitch-note-label{top:38px}body[data-practicing=true] .wide-needle{top:0}body[data-practicing=true] .wide-needle:after{height:27px}body[data-practicing=true] .wide-needle i{top:20px}body[data-practicing=true] .pitch-track{margin-top:7px}body[data-practicing=true] .hold-track{margin-top:4px}body[data-practicing=true] .feedback{padding:4px 10px}body[data-practicing=true] #explore-next{grid-column:2;grid-row:1}body[data-practicing=true] .practice-actions button{min-height:40px}}
@media(max-width:700px){#learning-content{grid-template-columns:1fr}.skills-grid{grid-template-columns:1fr}.learning-summary,.learning-next,.questionnaire{padding:20px}#task-panel h2{font-size:21px}.answer-list label{padding:12px}}
@media(prefers-reduced-motion:reduce){.wait-control input:before{transition:none}}

.task-hidden{display:none!important}


body[data-task-active=true] .shell{height:100dvh;display:flex;flex-direction:column;padding-block:env(safe-area-inset-top) env(safe-area-inset-bottom)}body[data-task-active=true] .app-top{padding-block:8px;margin-bottom:8px;flex:none}body[data-task-active=true] main{flex:1;min-height:0}body[data-task-active=true] #heute,body[data-task-active=true] .practice-layout{height:100%;min-height:0}body[data-task-active=true] .trainer{height:100%;padding:12px 18px;overflow:visible}body[data-task-active=true] footer{display:none}body[data-task-active=true] #task-panel{height:100%;display:flex;flex-direction:column;gap:6px}#task-panel h2{margin:0;font-size:22px}#task-panel .task-instruction{display:none}#task-panel .task-body{min-height:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}#task-panel .task-stimulus,#task-panel .task-response{min-width:0;min-height:0}#task-notation svg{display:block;width:auto;min-width:100%;height:clamp(90px,14dvh,160px)}#task-panel .button-row{display:flex;gap:6px;flex-wrap:nowrap;margin:0}#task-panel .button-row>*{flex:1}#task-message{min-height:0;margin:0;padding:8px;font-size:14px}#task-panel h3{font-size:17px;margin:8px 0}#task-panel .answer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}#task-panel .answer-list>button{min-height:44px;padding:8px;font-size:14px}#task-panel .answer-list #tap-pad{min-height:90px;grid-column:1/-1}#task-panel .answer-list #tap-ready{grid-column:1/-1}#task-panel .task-footer{margin-top:auto}#task-panel .task-footer button{min-height:44px;font-size:13px;padding:8px 5px}
@media(orientation:landscape) and (min-width:620px){#task-panel .task-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:18px}#task-panel .eyebrow{display:none}#task-panel h2{font-size:18px}#task-panel .answer-list #tap-pad,#task-panel .answer-list #tap-ready{grid-column:auto}#task-panel .answer-list #tap-pad{min-height:65px}#task-panel h3{font-size:15px;margin:6px 0}#task-panel .task-footer{max-width:100%;width:100%}#task-notation svg{height:100px}body[data-task-active=true] .app-top{min-height:36px;padding-block:0;margin-bottom:4px}}

/* Follow-up: calm preparation, dedicated active controls. */
body:not([data-practicing="true"]) #measurement-display{display:none!important}
.topic-intro{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px}.topic-intro summary{font-weight:600}.topic-intro p{margin-top:12px}.topic-intro svg{max-width:100%}
body[data-practicing="true"] .topic-intro{display:none}

/* Fixed playhead: the notation moves; timing remains in the exercise engine. */
.staff-wrap{position:relative}.staff-playhead{display:none}
body[data-practicing=true] .staff-wrap{overflow:hidden;scroll-behavior:auto}
body[data-practicing=true] #staff{will-change:transform}
body[data-practicing=true] #staff svg{min-width:0;max-width:none}
body[data-practicing=true] .staff-playhead{display:block;position:absolute;left:50%;top:8%;height:76%;width:1px;background:var(--accent);opacity:.25;pointer-events:none}
body[data-practicing=true] .practice-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-practicing=true] .listen-row{display:contents!important}
body[data-practicing=true] #hear-target{grid-row:1;grid-column:1/3}
body[data-practicing=true] #listen-all{grid-row:1;grid-column:3/5}
body[data-practicing=true] #practice-restart{grid-row:2;grid-column:1}
body[data-practicing=true] #practice-pause{grid-row:2;grid-column:3}
body[data-practicing=true] #practice-end{grid-row:2;grid-column:4}
body[data-practicing=true] #explore-next{grid-row:2;grid-column:2;min-width:0;font-size:13px}
body[data-completed=true] #practice-pause{background:var(--primary-bg,var(--ink));color:var(--primary-text,#fff);border-color:transparent}
body[data-completed=true] #listen-all,body[data-completed=true] #hear-target{display:none!important}
body[data-completed=true] .feedback{background:var(--good-bg)}
.completion-glitter{top:85dvh;left:50%;width:1px;overflow:visible}
.completion-particle{width:5px;height:5px;animation-duration:5200ms;box-shadow:0 0 10px currentColor}
.completion-particle.is-star{width:15px;height:15px;font-size:17px;line-height:15px;box-shadow:none}
@media(max-height:480px) and (orientation:landscape){body[data-practicing=true] .practice-actions{grid-template-columns:repeat(6,minmax(0,1fr))}body[data-practicing=true] #hear-target{grid-column:1;grid-row:1}body[data-practicing=true] #listen-all{grid-column:2;grid-row:1}body[data-practicing=true] #practice-restart{grid-column:3;grid-row:1}body[data-practicing=true] #explore-next{grid-column:4;grid-row:1}body[data-practicing=true] #practice-pause{grid-column:5;grid-row:1}body[data-practicing=true] #practice-end{grid-column:6;grid-row:1}}

.topic-example{overflow:auto}.topic-example svg{height:140px;min-width:320px;width:auto}.topic-intro table{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px}.topic-intro th,.topic-intro td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}.progress-details{margin-top:24px}.progress-details>summary{padding:14px 0}.learning-observed{grid-column:1/-1}

body[data-practicing=true] #start,body[data-practicing=true] #start-mic{display:none!important}


/* Keep native file selection accessible with the existing button appearance. */
.file-label{position:relative;overflow:hidden}
.file-label input[type="file"]{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-label:focus-within{outline:3px solid var(--accent,#6756a1);outline-offset:3px}

/* Compact feedback keeps target, sung note and fine deviation visible. */
body[data-practicing=true] .trainer{grid-template-rows:auto minmax(130px,1fr) auto auto}
body[data-practicing=true] .practice-score{overflow:visible}
body[data-practicing=true] .staff-wrap{overflow:hidden}
body[data-task-active=true] #task-panel .task-footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-task-active=true] #task-panel .task-footer button{min-width:0;overflow-wrap:anywhere}
@media(max-height:720px) and (orientation:portrait){
 body[data-practicing=true] .app-top,body[data-task-active=true] .app-top{min-height:44px;padding-block:0;margin-bottom:4px}
 body[data-practicing=true] .trainer,body[data-task-active=true] .trainer{padding:8px 12px;gap:6px}
 body[data-practicing=true] .exercise-head h2{font-size:18px;margin:0}
 body[data-practicing=true] .feedback{padding:6px 8px}
 body[data-practicing=true] .pitch-readings{display:flex;justify-content:space-between;gap:8px;margin:0}
 body[data-practicing=true] .pitch-readings>div{display:flex;align-items:center;gap:6px}
 body[data-practicing=true] .target-note,body[data-practicing=true] .heard-note{font-size:28px;margin:0}
 body[data-practicing=true] .guidance{margin:4px 0}
 body[data-app-mode][data-practicing=true] .pitch-track{margin:7px auto 3px}
 body[data-practicing=true] .hold-track{margin-top:4px}
 body[data-task-active=true] #task-panel{gap:4px}
 body[data-task-active=true] #task-panel .eyebrow{display:none}
 body[data-task-active=true] #task-panel h2{font-size:20px}
 body[data-task-active=true] #task-panel .task-body{flex:1 0 auto;gap:4px;justify-content:flex-start}
 body[data-task-active=true] #task-panel #task-notation svg{height:90px}
 body[data-task-active=true] #task-panel .answer-list #tap-pad{min-height:60px}
 body[data-task-active=true] #task-panel .task-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
}
/* Keep both pitch scales. Small screens and larger text may scroll rather
   than hiding feedback or clipping the exercise controls. */
body[data-practicing=true] .trainer{min-height:min-content}
body[data-task-active=true] #task-panel{min-height:min-content}
@media(min-width:850px), (orientation:landscape) and (min-width:620px){body[data-practicing=true] .trainer{grid-template-rows:auto minmax(130px,1fr) auto}}

/* Standalone melody playback uses the same lane without starting a practice. */
.staff-wrap[data-preview=true]{overflow:hidden;scroll-behavior:auto}
.staff-wrap[data-preview=true] #staff{will-change:transform}
.staff-wrap[data-preview=true] #staff svg{min-width:0;max-width:none}
.staff-wrap[data-preview=true] .staff-playhead{display:block;position:absolute;left:50%;top:8%;height:76%;width:1px;background:var(--accent);opacity:.25;pointer-events:none}
.preview-controls{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}
.preview-controls button{flex:1;font-size:.85rem;padding:9px 10px}
.task-hidden{display:none!important}
@media(prefers-reduced-motion:reduce){.staff-wrap[data-preview=true] #staff{will-change:auto}}
.duet-picker{margin-block:22px}.duet-picker select{min-width:0;width:100%}.duet-picker .controls{margin-top:12px}.duet-preparation{grid-column:1/-1;font-size:.9rem}.duet-preparation p{margin:8px 0}.duet-preparation button{min-height:44px}.duet-picker .small{overflow-wrap:anywhere}
body[data-practicing=true] .duet-preparation #duet-setup,body[data-practicing=true] .duet-preparation #duet-description{display:none}
body[data-practicing=true] .duet-preparation{grid-row:4;max-width:100%}
/* One stable, touch-sized row, including before preview and after success. */
body .practice-actions .practice-toolbar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;grid-column:1/-1;grid-row:auto;width:100%;margin-block:10px}
body .practice-actions .practice-toolbar[hidden]{display:none!important}
body .practice-actions .practice-toolbar #practice-restart,body .practice-actions .practice-toolbar #practice-start,body .practice-actions .practice-toolbar #practice-pause{grid-column:auto;grid-row:auto;min-width:0;min-height:48px;padding:10px 6px;font-size:15px}
body[data-practicing=true] .practice-actions .practice-toolbar{grid-row:2}
body[data-practicing=true] #practice-end{grid-row:3;grid-column:1/-1}
body[data-practicing=true] #explore-next{grid-row:3;grid-column:1/3}
body[data-completed=true] #practice-pause{background:var(--surface,#fff);color:var(--ink);border-color:var(--line)}
body[data-completed=true] .duet-preparation{grid-row:4}

/* Keep the complete notation at readable size; extra ledger lines and verses
   grow the lane instead of squeezing glyphs or clipping a flex child. */
body svg.notation-lane{width:var(--notation-width)!important;height:var(--notation-height)!important;min-width:0!important;max-width:none;flex:none;display:block}
body .staff-wrap{flex:none;padding-block:.5rem}
body[data-practicing=true] .practice-score{min-height:min-content;align-self:start}
body[data-practicing=true] .trainer{height:auto;min-height:100%;grid-template-rows:auto minmax(min-content,1fr) auto auto}
@media(min-width:850px), (orientation:landscape) and (min-width:620px){body[data-practicing=true] .trainer{grid-template-rows:auto minmax(min-content,1fr) auto}}