:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#191816;background:#f6f3ed;--paper:#fffdf8;--ink:#191816;--muted:#6f6a61;--line:#ded8cc;--accent:#244f3d;--accent2:#e6efe9;--bad:#8a2f2b;--good:#235b3e;--warn:#8a5a18}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f1eee7 0,#f8f6f1 45%,#f2eee7 100%);min-height:100vh}.shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0 60px}.topbar{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:750;color:var(--muted);margin:0 0 5px}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;margin:0;font-weight:600}h1{font-size:clamp(2rem,5vw,3.5rem)}h2{font-size:1.55rem}h3{font-size:1rem}.name-field{display:grid;gap:6px;font-size:.8rem;color:var(--muted);min-width:min(280px,42vw)}input,button{font:inherit}input[type=text],input:not([type]),.name-field input{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px 12px;color:var(--ink)}input:focus,button:focus-visible{outline:3px solid rgba(36,79,61,.18);outline-offset:2px}.card{background:rgba(255,253,248,.94);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 14px 40px rgba(46,39,28,.06);margin-bottom:18px}.section-head{display:flex;align-items:start;justify-content:space-between;gap:20px}.section-head.compact{align-items:center}.muted{color:var(--muted)}.small{font-size:.8rem}#instruction{margin:.4rem 0 0}.badge{display:inline-flex;margin:0 0 8px;padding:5px 9px;border-radius:999px;background:var(--accent2);color:var(--accent);font-size:.76rem;font-weight:800}.question-count{text-align:right;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.question-count strong{display:block;color:var(--ink);font-size:1.6rem;letter-spacing:0}.storage-status{font-size:.76rem;padding:6px 9px;border-radius:999px;background:#efebe2;color:var(--muted);white-space:nowrap}.scope-help{margin:.65rem 0 1rem}.scope-fieldset,.answer{border:0;padding:0;margin:0;min-width:0}.scope-fieldset:disabled{opacity:.52}.scope-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.scope-group{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.scope-group h3{margin-bottom:9px}.scope-options{display:flex;flex-wrap:wrap;gap:7px}.check-chip{position:relative;display:inline-flex}.check-chip input{position:absolute;opacity:0;pointer-events:none}.check-chip span{display:inline-flex;align-items:center;min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#faf8f3;font-size:.78rem;line-height:1.15;cursor:pointer;transition:.15s ease}.check-chip input:checked+span{background:var(--accent2);border-color:#9bb5a8;color:var(--accent);font-weight:750}.check-chip input:focus-visible+span{outline:3px solid rgba(36,79,61,.18);outline-offset:2px}.transport{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;padding:22px 0 18px}button{border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 15px;cursor:pointer;font-weight:700;color:var(--ink);transition:.12s ease}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:white;border-color:var(--accent)}.toggle{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--muted)}.toggle input{width:auto;accent-color:var(--accent)}.volume-control{display:grid;grid-template-columns:auto minmax(100px,180px) 48px;align-items:center;gap:8px;margin-left:auto;font-size:.78rem;color:var(--muted)}.volume-control input{accent-color:var(--accent);width:100%}.volume-control output{text-align:right;font-variant-numeric:tabular-nums}.answer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.answer{display:grid;align-content:start;gap:8px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.answer legend{padding:0 3px;font-size:.82rem;color:var(--muted);font-weight:800}.choice-list{display:grid;gap:7px}.choice{width:100%;text-align:left;padding:9px 10px;border-radius:9px;font-size:.83rem;font-weight:650;background:#faf8f3}.choice.selected{background:var(--accent2);border-color:#87a494;color:var(--accent);box-shadow:0 0 0 2px rgba(36,79,61,.08)}.answer.correct{border-color:var(--good);box-shadow:0 0 0 2px rgba(35,91,62,.08)}.answer.wrong{border-color:var(--bad);box-shadow:0 0 0 2px rgba(138,47,43,.08)}.answer.correct .choice.selected{border-color:var(--good)}.answer.wrong .choice.selected{border-color:var(--bad);background:#f6e9e7;color:var(--bad)}.answer.locked .choice{pointer-events:none}.answer.locked .choice:not(.selected){opacity:.45}.actions{display:flex;gap:10px;margin-top:18px}.feedback{min-height:1.4em;margin-top:15px;font-weight:650}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}.feedback.warn{color:var(--warn)}.notation-wrap{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}.notation-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.notation{overflow-x:auto;border-radius:12px;background:#fff;border:1px solid var(--line);padding:8px}.notation svg{display:block;min-width:720px;width:100%;height:auto}.solution-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.solution-labels > span{display:grid;gap:3px;background:#f0ece3;border-radius:9px;padding:8px;font-size:.82rem;text-align:center}.solution-labels strong{font-size:.72rem;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:9px;margin-top:14px}.stat{border:1px solid var(--line);border-radius:11px;padding:10px;background:#fff}.stat strong{display:block;font-size:.95rem}.stat span{font-size:.76rem;color:var(--muted)}.key-stats-wrap{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.key-stats-wrap h3{margin-bottom:9px}.key-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}.key-stat{display:grid;gap:2px;border-radius:10px;background:#f3f0e9;padding:8px 9px}.key-stat strong{font-size:.8rem}.key-stat span{font-size:.7rem;color:var(--muted)}details summary{cursor:pointer;font-weight:800}details ul{color:#48443e;line-height:1.55;padding-left:1.2rem}.rules-card p{margin-bottom:0}@media(max-width:960px){.scope-grid,.answer-grid{grid-template-columns:1fr 1fr}.volume-control{margin-left:0;width:100%;grid-template-columns:auto 1fr 48px}}@media(max-width:780px){.shell{width:min(100% - 18px,1180px);padding-top:14px}.topbar{align-items:stretch;flex-direction:column}.name-field{min-width:100%}.card{padding:16px;border-radius:14px}.solution-labels{grid-template-columns:1fr 1fr}.scope-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.scope-grid,.answer-grid{grid-template-columns:1fr}.transport button,.actions button{flex:1}.section-head{gap:10px}.question-count{min-width:56px}.scope-card .section-head{align-items:flex-start}.storage-status{white-space:normal;text-align:right}.notation-head{flex-direction:column}.volume-control{grid-template-columns:auto 1fr 46px}}

/* v0.3: compact, collapsible exercise scope */
.scope-card{padding:0;overflow:hidden}.scope-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 22px;cursor:pointer;list-style:none}.scope-summary::-webkit-details-marker{display:none}.scope-summary::after{content:'▾';font-size:.9rem;color:var(--muted);transition:transform .15s ease}.scope-card:not([open]) .scope-summary::after{transform:rotate(-90deg)}.scope-summary>span:first-child{display:grid;gap:2px}.scope-summary .eyebrow{margin:0}.scope-summary strong{font-family:Georgia,"Times New Roman",serif;font-size:1.18rem;font-weight:600}.scope-summary .storage-status{margin-left:auto}.scope-card[open] .scope-summary{border-bottom:1px solid var(--line)}.scope-body{padding:16px 22px 22px}.scope-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.scope-group-head h3{margin:0}.all-chip span{font-weight:800;background:#f0ece3}.all-chip.partial span{background:#f7f0db;border-color:#d6bf7d;color:#725518}.secondary-action{background:#f3efe7;border-color:#cfc7b9}.answer[data-needs-correction="1"] legend::after{content:' · korrigieren';color:var(--bad);font-weight:700}.answer[data-corrected-attempt="1"] legend::after{content:' · gewählt';color:var(--accent)}
@media(max-width:780px){.scope-summary{padding:14px 16px}.scope-body{padding:14px 16px 16px}.scope-summary .storage-status{font-size:.68rem}}

/* v0.4 modular harmonic selector */
.chord-symbol{display:inline-flex;align-items:flex-end;justify-content:center;gap:.04em;min-height:2.15em;font-family:Georgia,"Times New Roman",serif;font-size:1.28rem;line-height:1;color:currentColor;white-space:nowrap}.chord-symbol.compact{font-size:1rem;min-height:1.65em}.degree-core{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;padding-top:.72em;min-width:1.1em}.degree-annotations{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center;gap:.2em;white-space:nowrap;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.62em;font-weight:750;line-height:1}.annotation.suspension{letter-spacing:-.03em}.figures{display:inline-grid;grid-template-rows:.62em .62em;align-self:center;margin-left:.02em;min-width:.5em;font-size:.62em;line-height:.7}.figures sup,.figures sub{position:static;font-size:1em;line-height:.7;text-align:left}.figures sup:only-child{grid-row:1/span 2;align-self:start;margin-top:.08em}.paren{align-self:flex-end;padding-bottom:.03em}.scope-symbol{min-height:38px!important;padding:5px 11px!important}.scope-symbol .chord-symbol{pointer-events:none}
.modular-answer{gap:10px}.answer-current{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label count" "symbol symbol";gap:4px 10px;min-height:83px;padding:9px 10px;border-radius:11px;background:#f7f4ed;border:1px solid #ebe5da}.answer-current-label{grid-area:label;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}.current-symbol{grid-area:symbol;display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--ink)}.current-symbol .chord-symbol{font-size:1.58rem}.candidate-count{grid-area:count;align-self:center;text-align:right;font-size:.68rem;color:var(--muted);max-width:140px}.component-picker{display:grid;gap:7px}.component-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:7px;align-items:start}.component-label{padding-top:7px;font-size:.68rem;font-weight:800;color:var(--muted)}.component-buttons{display:flex;flex-wrap:wrap;gap:5px}.component-button{padding:6px 8px;min-height:31px;border-radius:8px;background:#faf8f3;font-size:.72rem;font-weight:700}.component-button.selected{background:var(--accent2);border-color:#87a494;color:var(--accent);box-shadow:0 0 0 1px rgba(36,79,61,.06)}.component-button:disabled{opacity:.25}.fixed-row{opacity:.66}.fixed-row .component-button.selected{background:#f0ece3;color:#59544c;border-color:#ddd5c8}.answer.correct .answer-current{border-color:var(--good);background:#eef6f0}.answer.wrong .answer-current{border-color:var(--bad);background:#faefed}.answer.locked .component-picker{pointer-events:none;opacity:.48}.solution-labels .chord-symbol{font-size:1.3rem;margin-top:2px}
@media(max-width:1100px){.answer-grid{grid-template-columns:1fr 1fr}.component-row{grid-template-columns:90px 1fr}}
@media(max-width:620px){.component-row{grid-template-columns:72px 1fr}.current-symbol .chord-symbol{font-size:1.45rem}.candidate-count{max-width:110px}}

/* v0.5: answer confirmation and clearer solution symbols */
.answer-area{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:12px;align-items:stretch}
.finish-panel{display:flex;min-width:0}.finish-btn{width:100%;min-height:100%;font-size:1.08rem;border-radius:14px}
.finish-btn:not(:disabled){box-shadow:0 8px 20px rgba(36,79,61,.13)}
.solution-labels > span{min-height:82px;align-content:center;justify-items:center;padding:10px 8px}
.solution-labels strong{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}
.solution-labels .chord-symbol{font-size:1.78rem;min-height:2.25em;gap:.07em}
.solution-labels .degree{font-size:1.18em}
.solution-labels .figures{font-size:.58em;margin-left:.06em;align-self:center}
.solution-labels .degree-annotations{font-size:.52em}
@media(max-width:1100px){.answer-area{grid-template-columns:minmax(0,1fr) 105px}.finish-btn{font-size:1rem}}
@media(max-width:720px){.answer-area{grid-template-columns:1fr}.finish-panel{min-height:54px}.finish-btn{min-height:54px}.answer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.answer-grid{grid-template-columns:1fr}.solution-labels .chord-symbol{font-size:1.55rem}}

/* v0.6: clearer scope, robust finish action, instrument EQ */
.scope-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
.scope-options .check-chip{display:block;position:relative;min-width:0}
.scope-options .check-chip input{position:absolute;opacity:0;pointer-events:none}
.scope-options .check-chip>span{display:flex;align-items:center;justify-content:center;min-height:62px;width:100%;padding:8px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;transition:.12s ease}
.scope-options .check-chip input:checked+span{background:var(--accent2);border-color:#87a494;box-shadow:0 0 0 1px rgba(36,79,61,.06)}
.scope-options .scope-symbol .chord-symbol{font-size:1.35rem;min-height:2.15em}
.scope-options .scope-symbol .degree{font-size:1.14em}
.scope-options .scope-symbol .figures{font-size:.62em}
.scope-group-head .all-chip{display:inline-flex;position:relative}.scope-group-head .all-chip input{position:absolute;opacity:0}.scope-group-head .all-chip span{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer}.scope-group-head .all-chip input:checked+span{background:var(--accent2);border-color:#87a494;color:var(--accent)}
.eq-panel{width:100%;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:#faf8f3;overflow:hidden}
.eq-panel summary{padding:10px 13px;font-size:.8rem;color:var(--muted);list-style:none}.eq-panel summary::-webkit-details-marker{display:none}.eq-panel summary::after{content:'▾';float:right}.eq-panel:not([open]) summary::after{transform:rotate(-90deg)}
.eq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 13px 13px;border-top:1px solid var(--line)}
.eq-grid label{display:grid;grid-template-columns:1fr auto;gap:5px 8px;align-items:center;padding-top:10px;font-size:.74rem;font-weight:750;color:var(--muted)}
.eq-grid input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.eq-grid output{font-variant-numeric:tabular-nums;font-size:.68rem;color:var(--ink)}
.finish-btn{position:relative;z-index:2}.finish-btn:disabled{opacity:.55}
.solution-labels .chord-symbol{font-size:2rem}.solution-labels .degree-core{padding-top:.68em}.solution-labels .degree{font-size:1.3em}.solution-labels .figures{font-size:.62em;margin-left:.08em}
@media(max-width:760px){.eq-grid{grid-template-columns:1fr 1fr}.scope-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.eq-grid{grid-template-columns:1fr}.scope-options{grid-template-columns:1fr 1fr}}
.scope-options .scope-symbol{min-height:62px!important;padding:8px!important}

/* v0.7: unified function symbols, granular grading, learning table/history */
.chord-symbol{align-items:flex-end;gap:.06em}.degree-core{padding-top:1.05em}.degree-line{display:inline-flex;align-items:flex-end;gap:.02em}.degree-accidental{font-size:.88em;margin-right:.02em}.degree-annotations{top:0;min-height:.95em;align-items:center}.annotation.alteration{font-size:.92em}.suspension-annotation{display:inline-flex;align-items:center;gap:.12em;font-size:.9em;line-height:.75}.figure-stack{display:inline-grid;grid-template-rows:auto auto;align-self:center;justify-items:center;line-height:.66;font-size:.64em;min-width:.72em;margin-left:.04em}.figure-stack>span{display:block;line-height:.72}.annotation-stack{font-size:1em;margin:0;min-width:.65em}.single-figure{font-size:.67em;align-self:flex-start;margin-top:.5em;margin-left:.05em}.susp-arrow{font-size:.82em;margin:0 .02em}.target{font-family:Georgia,"Times New Roman",serif;font-size:.66em;align-self:flex-end;margin-left:.06em;padding-bottom:.02em}.chord-symbol.compact .degree-core{padding-top:.95em}.chord-symbol.compact .figure-stack{font-size:.68em}.scope-options .scope-symbol .figure-stack{font-size:.66em}.solution-labels .figure-stack{font-size:.68em}.solution-labels .single-figure{font-size:.72em}.solution-labels .degree-core{padding-top:1em}.solution-labels .degree{font-size:1.35em}

.component-row{border:1px solid transparent;border-radius:9px;padding:5px 6px;transition:.12s ease}.component-row.good{border-color:#67a57f;background:#eef7f1}.component-row.bad{border-color:#c86d66;background:#fbefed}.component-row.row-locked{opacity:.82}.component-row-content{display:grid;gap:5px}.component-subgroup{display:flex;align-items:center;gap:6px;min-width:0}.component-mini-label{width:56px;flex:0 0 56px;font-size:.61rem;color:var(--muted);font-weight:750}.component-subgroup .component-buttons{flex:1}.component-button:disabled.selected{opacity:.72}.component-row.good .component-label{color:var(--good)}.component-row.bad .component-label{color:var(--bad)}
.answer.correct{border-color:var(--good)}.answer.wrong{border-color:var(--bad)}

.stats-card,.history-card{padding:0;overflow:hidden}.stats-card[open] .scope-summary,.history-card[open] .scope-summary{border-bottom:1px solid var(--line)}.learning-table-wrap{overflow:auto;padding:12px 18px 20px;max-height:620px}.learning-table{width:100%;border-collapse:collapse;font-size:.8rem}.learning-table th{position:sticky;top:0;background:var(--paper);z-index:1;text-align:left;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;padding:8px;border-bottom:1px solid var(--line)}.learning-table td{padding:7px 8px;border-bottom:1px solid #eee9df;vertical-align:middle}.learning-table tbody tr:hover{background:#faf8f3}.learning-symbol .chord-symbol{font-size:1.08rem;justify-content:flex-start;min-height:1.8em}.history-list{display:grid;gap:7px;padding:14px 18px 18px}.history-item{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;text-align:left;background:#fff}.history-item:hover{background:#faf8f3}.history-signs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.history-signs .chord-symbol{font-size:.98rem;min-height:1.6em}.history-result{font-size:.7rem;color:var(--muted);white-space:nowrap}.history-review{border-top:1px solid var(--line);padding:16px 18px 20px}.history-review-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.history-review .solution-labels{margin-top:10px}

@media(max-width:900px){.history-item{grid-template-columns:46px 1fr}.history-result{grid-column:2;white-space:normal}.component-mini-label{width:48px;flex-basis:48px}}
@media(max-width:620px){.component-row{grid-template-columns:72px minmax(0,1fr)}.component-subgroup{align-items:flex-start;flex-direction:column;gap:3px}.component-mini-label{width:auto;flex:0 0 auto}.history-signs{gap:8px}.learning-table{font-size:.74rem}.learning-table th,.learning-table td{padding:6px}}

/* v0.8: plain scope list and plain solution signs */
.scope-grid{align-items:start}
.scope-list-group{border:0;background:transparent;padding:0 10px 0 0;border-radius:0}
.scope-list-group h3{margin:0 0 8px;font-size:1rem}
.scope-option-list{display:grid;gap:0}
.scope-list-row{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:7px;min-height:38px;padding:4px 2px;border-bottom:1px solid #eee9df;cursor:pointer}
.scope-list-row input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.scope-list-symbol{display:flex;align-items:center;min-height:28px;color:var(--ink)}
.scope-list-symbol .chord-symbol{font-size:1.08rem;justify-content:flex-start;min-height:1.8em}
.scope-all-row{font-weight:800;border-bottom:1px solid var(--line);margin-bottom:3px}
.scope-all-row.partial .scope-all-text{color:var(--warn)}
.scope-all-text{font-size:.82rem}

.solution-labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:14px;padding:8px 2px}
.solution-labels > .solution-item{display:grid;gap:4px;justify-items:center;align-content:start;min-height:64px;padding:0;background:transparent;border:0;border-radius:0;text-align:center}
.solution-position{display:block!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;font-size:.68rem!important;line-height:1.2!important;color:var(--muted)!important;text-transform:uppercase;letter-spacing:.04em;font-weight:750}
.solution-sign{display:flex;justify-content:center;align-items:center;min-height:42px}
.solution-sign .chord-symbol{font-size:1.65rem;min-height:2em;justify-content:center}
.solution-sign .chord-symbol span{background:transparent;border:0;border-radius:0;padding:0;min-height:0}
.history-review .solution-labels{padding-left:0;padding-right:0}

@media(max-width:780px){.scope-grid{grid-template-columns:1fr 1fr}.solution-labels{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.scope-grid{grid-template-columns:1fr}.scope-list-group{padding-right:0}.solution-labels{grid-template-columns:1fr 1fr;gap:12px}}

/* v1.0: implicit empty modifiers + teacher presets */
.preset-block{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#faf8f3}.preset-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:7px}.preset-list{display:flex;flex-wrap:wrap;gap:8px}.preset-row{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.8rem;font-weight:700;cursor:pointer}.preset-row input{accent-color:var(--accent);margin:0}.component-button.selected{box-shadow:0 0 0 2px rgba(36,79,61,.18)}

/* v1.0 teacher backend */
.teacher-back{align-self:center;color:var(--accent);font-weight:800;text-decoration:none}.teacher-workspace{display:grid;gap:18px}.teacher-login-row{display:flex;gap:8px;padding:0 18px 16px}.teacher-login-row input{flex:1;min-width:0}.teacher-field{display:grid;gap:6px;padding:0 18px 16px;font-size:.8rem;font-weight:800}.teacher-field input{width:100%}.teacher-assign{margin:0 18px 18px;padding:12px;border:1px solid var(--line);border-radius:10px}.teacher-assign legend{font-size:.76rem;font-weight:800;padding:0 5px}.teacher-check{display:flex;align-items:center;gap:7px;min-height:32px;font-size:.8rem}.teacher-check input{accent-color:var(--accent)}.teacher-student-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px 12px;margin-top:6px}.teacher-scope-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:0 18px 10px}.teacher-scope{padding:0 18px 18px}.teacher-set-list{display:grid;gap:6px;padding:0 18px 18px}.teacher-set-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #eee9df;padding:8px 0}.teacher-set-row>div:first-child{display:grid;gap:2px}.teacher-set-row>div:last-child{display:flex;gap:6px}.teacher-set-row .muted{font-size:.72rem}.teacher-shell code{font-size:.84em;background:#eee9df;padding:1px 4px;border-radius:4px}@media(max-width:620px){.teacher-login-row,.teacher-set-row,.teacher-scope-head{align-items:stretch;flex-direction:column}.teacher-scope{grid-template-columns:1fr}.teacher-set-row>div:last-child{width:100%}.teacher-set-row button{flex:1}}

/* v0.11 · privacy and teacher learner controls */
.privacy-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:1rem 1.15rem;border-top:1px solid var(--line,#d8d2c8)}
.privacy-controls button{white-space:nowrap}
.learner-admin-row>div:first-child{display:flex;flex-direction:column;gap:.2rem}
.learner-admin-row>div:last-child{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}

/* v0.12 · simplified responsive flow, bilingual info tips, mobile audio notice */
.simple-topbar{align-items:center}.top-subtitle{margin:.25rem 0 0}.compact-name{max-width:330px}.compact-card{box-shadow:0 8px 26px rgba(46,39,28,.045)}
.title-line{display:flex;align-items:center;gap:.45rem}.status-stack{display:flex;align-items:flex-start;gap:.8rem}.trainer-head{align-items:center}
.compact-transport{padding:16px 0 14px;border-bottom:1px solid #eee9df;margin-bottom:14px}.big-action{min-height:46px}.audio-info{margin-left:-4px}
.info-wrap{position:relative;display:inline-flex;vertical-align:middle;z-index:8}.info-tip{width:22px;height:22px;min-width:22px;padding:0;border-radius:50%;display:inline-grid;place-items:center;font:800 .72rem/1 system-ui;color:var(--accent);background:#f0f4f1;border:1px solid #aebfb6;box-shadow:none}.info-tip:hover{transform:none;background:#e2ece6}.tip-bubble{display:none;position:absolute;z-index:100;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:min(310px,80vw);padding:10px 12px;border:1px solid #cfc8bc;border-radius:10px;background:#fffdf8;box-shadow:0 12px 30px rgba(30,25,20,.16);color:#333;font:500 .75rem/1.42 system-ui;text-align:left;white-space:normal}.info-wrap:hover .tip-bubble,.info-wrap:focus-within .tip-bubble,.info-wrap.open .tip-bubble{display:block}.tip-bubble strong{font-size:.68rem;color:var(--accent)}
.scope-summary .info-wrap{margin-left:.25rem}.scope-summary{min-height:58px}.scope-body{padding-top:12px}.preset-block{margin-top:0}
.answer-area{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:12px;align-items:stretch}.finish-panel{display:flex}.finish-btn{width:100%;min-height:100%;font-size:1.05rem}.answer-grid{min-width:0}
.answer{padding:10px}.answer-current{min-height:72px}.component-row{padding:4px}.component-label{font-size:.68rem}.component-button{min-height:34px;padding:6px 8px}
.mobile-notice{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;background:rgba(20,18,15,.5);backdrop-filter:blur(3px)}.mobile-notice[hidden]{display:none}.mobile-notice-card{width:min(440px,100%);background:#fffdf8;border-radius:18px;padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.28)}.mobile-notice-icon{font-size:2.2rem}.mobile-notice-card h2{font-size:1.35rem;margin:.4rem 0 .8rem}.mobile-notice-card p{font-size:.9rem;line-height:1.48;color:#4b4740}.mobile-notice-card button{width:100%;margin-top:.4rem}.modal-open{overflow:hidden}
.teacher-workspace{display:grid!important}.teacher-shell .feedback{margin-bottom:10px}
@media(max-width:960px){.answer-area{grid-template-columns:1fr}.finish-panel{min-height:58px}.finish-btn{min-height:58px}.status-stack{align-items:center}.compact-transport{align-items:center}}
@media(max-width:760px){.simple-topbar{align-items:stretch}.compact-name{max-width:none}.trainer-head{align-items:flex-start}.title-line h2{font-size:1.35rem}.status-stack{flex-direction:column;align-items:flex-end;gap:.25rem}.compact-transport{display:grid;grid-template-columns:1fr 1fr;gap:9px}.compact-transport .volume-control{grid-column:1/-1;width:100%;margin:0}.compact-transport .toggle{min-height:36px}.audio-info{position:absolute;right:18px;margin-top:115px}.answer-grid{grid-template-columns:1fr 1fr}.answer{min-width:0}.solution-labels{grid-template-columns:1fr 1fr}.notation{margin-left:-4px;margin-right:-4px}.scope-grid{grid-template-columns:1fr 1fr}.tip-bubble{position:fixed;left:12px;right:12px;top:auto;bottom:16px;transform:none;width:auto;max-width:none;font-size:.82rem}}
@media(max-width:520px){.shell{width:calc(100% - 12px)}.card{padding:13px}.scope-summary{padding:13px}.scope-body{padding:10px 13px 14px}.answer-grid{grid-template-columns:1fr}.compact-transport{grid-template-columns:1fr}.compact-transport .volume-control{grid-column:auto}.audio-info{position:static;margin:0}.answer-current{min-height:58px}.component-row{grid-template-columns:68px minmax(0,1fr)!important}.component-buttons{gap:4px}.component-button{padding:6px;font-size:.78rem}.scope-grid{grid-template-columns:1fr}.learning-table-wrap{padding:8px;max-height:520px}.history-list{padding:10px}.solution-labels{gap:8px}.solution-sign .chord-symbol{font-size:1.45rem}.mobile-notice-card{padding:20px}}

/* v0.13 · three-level exercise selection, analytics, voice-leading editor */
.scope-mode-row{display:grid;grid-template-columns:auto minmax(220px,1fr);gap:12px;align-items:center;margin:0 0 14px;font-size:.82rem;font-weight:800}.scope-mode-row select,.guided-grid select,.editor-filter select,.editor-filter input,.editor-chords select,.editor-voice-grid select{min-height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 9px;color:var(--ink)}
.scope-mode-panel{margin-top:8px}.guided-panel{display:grid;gap:14px}.guided-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.guided-box legend{font-size:.76rem;font-weight:800;padding:0 5px}.guided-check-grid{display:flex;flex-wrap:wrap;gap:6px 14px}.guided-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.guided-grid>label:first-child{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px}.guided-check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:.82rem}.guided-check input{width:17px;height:17px;accent-color:var(--accent)}.bass-flow{font-variant-numeric:tabular-nums;font-weight:750}
/* info bubbles should never be clipped by cards or viewport edges */
.tip-bubble{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:max(16px,env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;width:min(420px,calc(100vw - 24px))!important;max-height:45vh;overflow:auto;z-index:2000!important}
.editor-nav{display:flex;gap:12px;align-items:center}.editor-layout{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(480px,1.2fr);gap:18px}.editor-intro p{margin:.3rem 0}.editor-filter{display:grid;grid-template-columns:1fr;gap:8px;padding:0 18px 12px}.diagnostic-list{max-height:650px;overflow:auto;padding:0 10px 16px}.diagnostic-row{width:100%;display:grid;gap:4px;text-align:left;padding:10px 8px;border:0;border-bottom:1px solid #eee9df;border-radius:0;background:transparent;box-shadow:none}.diagnostic-row:hover{background:#faf8f3;transform:none}.diagnostic-signs{display:flex;align-items:center;gap:10px}.diagnostic-signs .chord-symbol{font-size:1.05rem}.diagnostic-row small{color:var(--muted);font-size:.7rem}.editor-main{align-self:start}.editor-chords{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:0 18px 18px}.editor-chords label{display:grid;gap:7px;font-size:.75rem;font-weight:800}.editor-symbol{min-height:60px;display:grid;place-items:center;border:1px solid #eee9df;border-radius:10px;background:#faf8f3}.editor-symbol .chord-symbol{font-size:1.5rem}.editor-arrow{font-size:1.5rem;font-weight:900}.editor-voice-grid{display:grid;grid-template-columns:minmax(130px,1fr) 1fr 1fr;gap:7px 10px;padding:0 18px 16px;align-items:center}.voice-head{font-size:.7rem;text-transform:uppercase;color:var(--muted);font-weight:800}.voice-name{font-size:.78rem;font-weight:750}.editor-note textarea{resize:vertical;border:1px solid var(--line);border-radius:8px;padding:9px;font:inherit}.learner-card{border-bottom:1px solid #eee9df}.learner-card>summary{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0;cursor:pointer;list-style:none}.learner-card>summary::-webkit-details-marker{display:none}.learner-card>summary>div{display:grid;gap:2px}.learner-caret{font-size:.72rem;color:var(--accent);font-weight:800}.learner-detail{padding:0 0 14px}.learner-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:2px 0 12px}.learner-metrics>div{display:grid;gap:2px;padding:9px;border:1px solid #eee9df;border-radius:8px;background:#faf8f3}.learner-metrics span{font-size:.66rem;color:var(--muted)}.learner-metrics strong{font-size:.92rem}.learner-subdetails{border-top:1px solid #eee9df;padding:8px 0}.learner-subdetails summary{font-size:.78rem;font-weight:800;cursor:pointer}.teacher-data-table{display:grid;grid-template-columns:minmax(170px,2fr) repeat(3,minmax(70px,1fr));gap:1px;background:#eee9df;margin-top:8px;border:1px solid #eee9df}.teacher-data-table>div{background:#fff;padding:6px 8px;font-size:.72rem;overflow-wrap:anywhere}.teacher-data-table .td-head{font-weight:800;background:#faf8f3}.confusion-list{display:grid;gap:3px;margin-top:8px;font-size:.74rem}.learner-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media(max-width:900px){.editor-layout{grid-template-columns:1fr}.diagnostic-list{max-height:360px}.guided-grid{grid-template-columns:1fr}.scope-mode-row{grid-template-columns:1fr}.editor-nav{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:620px){.scope-body{padding-left:10px;padding-right:10px}.guided-box{padding:9px}.guided-check-grid{display:grid;grid-template-columns:1fr 1fr}.editor-chords{grid-template-columns:1fr}.editor-arrow{text-align:center;transform:rotate(90deg)}.editor-voice-grid{grid-template-columns:92px 1fr 1fr;padding-left:10px;padding-right:10px;gap:6px}.editor-voice-grid select{min-width:0;padding:6px 3px;font-size:.78rem}.teacher-data-table{grid-template-columns:minmax(120px,1.7fr) repeat(3,minmax(55px,.8fr));overflow:auto}.learner-metrics{grid-template-columns:1fr 1fr}}

/* v0.15 · visible three-tier selection */
.scope-tier{margin:0;padding:2px 0}.scope-tier>h3,.scope-fieldset>legend{margin:0 0 10px;font-size:.82rem;font-weight:850;color:var(--ink)}
.scope-divider{border:0;border-top:1px solid #ddd7cd;margin:16px 0}
.guided-dependency-note{min-height:1.1em;margin:2px 0 0;font-size:.72rem}
.scope-fieldset{border:0;padding:0;margin:0;min-width:0}.preset-title{display:none}
@media(max-width:620px){.scope-divider{margin:12px 0}.guided-check-grid{grid-template-columns:1fr 1fr}.guided-grid{gap:4px}.scope-tier>h3,.scope-fieldset>legend{font-size:.78rem}}
/* v0.15 · full-cadence voice-leading editor */
.context-editor-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(560px,1.28fr);gap:16px}.context-list{max-height:720px;border-right:1px solid #eee9df}.context-main{min-width:0;padding:0 16px 16px}.context-search{min-height:38px;border:1px solid var(--line);border-radius:8px;padding:7px 9px}.context-symbols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.context-symbol-item{display:grid;place-items:center;gap:4px;min-height:68px;border:1px solid #eee9df;border-radius:9px;background:#faf8f3}.context-symbol-item small{font-size:.63rem;color:var(--muted);text-transform:uppercase}.context-symbol-item .chord-symbol{font-size:1.15rem}.context-voice-grid{display:grid;grid-template-columns:110px repeat(4,minmax(95px,1fr));gap:7px 8px;align-items:center;margin:12px 0}.context-voice-grid select{min-width:0;min-height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px}.context-mini-signs{flex-wrap:wrap}.context-mini-signs .chord-symbol{font-size:.95rem}
@media(max-width:980px){.context-editor-layout{grid-template-columns:1fr}.context-list{max-height:340px;border-right:0;border-bottom:1px solid #eee9df}.context-main{padding:0 10px 14px}}
@media(max-width:700px){.context-symbols{grid-template-columns:1fr 1fr}.context-voice-grid{grid-template-columns:78px repeat(4,minmax(72px,1fr));overflow-x:auto}.context-voice-grid select{font-size:.75rem;padding:5px 2px}}

/* v0.16 · question type + multiple choice */
.question-type{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 14px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:#faf8f3}.question-type-label{font-size:.72rem;font-weight:850;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}.question-type label{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:9px;background:#fff;border:1px solid #e7e1d6;font-size:.8rem;font-weight:750;cursor:pointer}.question-type input{accent-color:var(--accent)}.question-type label:has(input:checked){background:var(--accent2);border-color:#9bb5a8;color:var(--accent)}
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}.mc-option{display:flex;align-items:center;justify-content:center;min-height:88px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:13px}.mc-option.selected{border-color:#668d79;box-shadow:0 0 0 3px rgba(36,79,61,.12);background:#f4faf6}.mc-option.wrong-attempt{border-color:var(--bad);background:#fbefed;box-shadow:0 0 0 2px rgba(138,47,43,.08)}.mc-option.correct-option{border-color:var(--good);background:#eef7f1;box-shadow:0 0 0 2px rgba(35,91,62,.10)}.mc-symbol-sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;width:100%;gap:7px}.mc-symbol{display:grid;place-items:center;min-width:0}.mc-symbol .chord-symbol{font-size:1.08rem}.answer-area:has(.mc-grid:not([hidden])){grid-template-columns:minmax(0,1fr) 124px}
@media(max-width:760px){.question-type{display:grid;grid-template-columns:1fr 1fr}.question-type-label{grid-column:1/-1}.question-type label{justify-content:center}.mc-grid{grid-template-columns:1fr}.mc-option{min-height:74px}.mc-symbol .chord-symbol{font-size:1rem}}
@media(max-width:520px){.question-type{grid-template-columns:1fr}.question-type-label{grid-column:auto}.mc-symbol-sequence{gap:3px}.mc-symbol .chord-symbol{font-size:.92rem}.mc-option{padding:9px 5px}}


/* v0.17 compact interaction layout */
.answer-section{display:grid;gap:8px}
.answer-mode-title{font-size:.76rem;font-weight:850;color:var(--muted);text-transform:uppercase;letter-spacing:.045em}
.answer-area:has(.mc-grid:not([hidden])){grid-template-columns:1fr}
.mc-grid{grid-template-columns:1fr 1fr;gap:9px}
.mc-option{min-height:82px;padding:10px 12px}
.mc-symbol .chord-symbol{font-size:1.15rem}

.highlight-panel{margin-top:8px}
.highlight-grid{display:grid;gap:7px;padding:8px 12px 12px}
.highlight-row{display:grid;grid-template-columns:20px minmax(110px,.8fr) minmax(120px,1.4fr) 58px;gap:9px;align-items:center;min-height:36px;font-size:.8rem}
.highlight-row>input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent)}
.highlight-row>input[type="range"]{width:100%;min-width:0}
.highlight-row output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.74rem}
.highlight-row.bass-highlight{grid-template-columns:20px 1fr auto}
.highlight-row.bass-highlight .muted{font-size:.72rem}
.eq-panel:not([open]) summary,.compact-card:not([open]) .scope-summary{padding-top:10px;padding-bottom:10px}
.eq-panel[open],.compact-card[open]{scroll-margin-top:10px}

@media(max-width:760px){
  .question-type{grid-template-columns:1fr 1fr;padding:6px;gap:5px}
  .question-type-label{display:none}
  .question-type label{min-height:38px;padding:6px 7px;font-size:.76rem}
  .mc-grid{grid-template-columns:1fr}
  .mc-option{min-height:66px;padding:8px 6px}
  .mc-symbol-sequence{gap:2px}
  .mc-symbol .chord-symbol{font-size:1rem}
  .highlight-grid{padding:6px 8px 10px}
  .highlight-row{grid-template-columns:20px minmax(92px,.9fr) minmax(90px,1.2fr) 50px;gap:6px}
}
@media(max-width:480px){
  .highlight-row{grid-template-columns:20px 1fr 46px}
  .highlight-row>input[type="range"]{grid-column:2/4}
  .highlight-row output{grid-column:3;grid-row:1}
  .highlight-row.bass-highlight{grid-template-columns:20px 1fr auto}
  .answer-mode-title{font-size:.7rem}
  .mc-symbol .chord-symbol{font-size:.9rem}
}

/* v0.18 · focused app flow + hamburger menu */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.app-shell{width:min(1220px,calc(100% - 24px));padding:14px 0 42px}
.app-header{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 2px 12px}
.brand-block h1{font-size:clamp(1.65rem,3.5vw,2.5rem)}.brand-block .top-subtitle{font-size:.76rem;margin:.12rem 0 0}
.header-status{display:flex;align-items:center;gap:12px}.header-status .question-count{display:flex;align-items:center;gap:7px;text-align:left}.header-status .question-count strong{font-size:1.2rem}
.menu-btn{width:46px;height:42px;padding:8px 10px;border-radius:12px;display:grid;align-content:center;gap:5px;background:#fffdf8;box-shadow:0 5px 18px rgba(40,35,28,.06)}.menu-btn span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px}.menu-btn:hover:not(:disabled){transform:none;background:#f2eee6}
.flow-guide{position:sticky;top:0;z-index:20;margin:0 0 10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,253,248,.96);box-shadow:0 6px 20px rgba(46,39,28,.05);backdrop-filter:blur(8px)}
.flow-step{display:flex;align-items:center;gap:10px}.flow-step .badge{margin:0;white-space:nowrap}.flow-step p{margin:0;font-size:.9rem;font-weight:700;line-height:1.3}
.flow-trainer{margin:0;padding:16px 18px 20px;border-radius:16px;box-shadow:0 10px 30px rgba(46,39,28,.055)}
.flow-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}.flow-main-action,.flow-replay{min-height:44px}.flow-replay{margin-left:auto}.flow-main-action[hidden]{display:none}
.highlight-strip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 0 12px;border-bottom:1px solid #eee9df}.highlight-strip-label{font-size:.72rem;font-weight:850;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}.highlight-chip{position:relative}.highlight-chip input{position:absolute;opacity:0;pointer-events:none}.highlight-chip span{display:inline-flex;align-items:center;min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.78rem;font-weight:750;cursor:pointer;user-select:none}.highlight-chip input:checked+span{background:var(--accent2);border-color:#8da99a;color:var(--accent)}.highlight-chip input:focus-visible+span{outline:3px solid rgba(36,79,61,.18);outline-offset:2px}
.compact-feedback{min-height:0;margin:8px 0 0;font-size:.8rem}.compact-feedback:empty{margin:0}
.flow-notation{margin-top:10px;padding-top:10px}.flow-notation .notation-head{margin-bottom:5px;font-size:.78rem}.flow-answer{margin-top:12px}.answer-mode-title{margin-bottom:4px}.flow-next{justify-content:flex-end;margin-top:12px}.flow-next button{min-width:min(260px,100%);min-height:48px;font-size:1rem}
.answer-section[hidden],.finish-panel[hidden]{display:none!important}
.answer-grid[hidden],.mc-grid[hidden]{display:none!important}
.answer-area{grid-template-columns:minmax(0,1fr) 118px;gap:10px}.finish-btn{min-height:100%}.mc-grid{grid-template-columns:1fr 1fr}

.menu-backdrop{position:fixed;inset:0;z-index:90;background:rgba(22,20,17,.32);backdrop-filter:blur(2px)}.menu-backdrop[hidden]{display:none}
.app-menu{position:fixed;z-index:100;top:0;right:0;width:min(440px,92vw);height:100dvh;background:#fffdf8;border-left:1px solid var(--line);box-shadow:-20px 0 55px rgba(30,25,20,.16);transform:translateX(102%);transition:transform .2s ease;display:flex;flex-direction:column}.app-menu.open{transform:translateX(0)}.menu-open{overflow:hidden}
.menu-head{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:9px 14px;border-bottom:1px solid var(--line);font-family:Georgia,"Times New Roman",serif;font-size:1.25rem}.menu-head button{font-size:1.6rem;line-height:1;padding:5px 11px;border:0;background:transparent}.menu-scroll{overflow-y:auto;overscroll-behavior:contain;padding:10px 12px max(24px,env(safe-area-inset-bottom))}.menu-section{padding:10px 4px 14px;border-bottom:1px solid #eee9df}.menu-section h3{font-family:inherit;font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 8px}.compact-menu-section{padding-top:2px}.menu-name{min-width:0;max-width:none}.menu-name span{font-weight:800;color:var(--ink)}
.menu-question-type{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;border:0;background:transparent;gap:6px}.menu-question-type label{justify-content:center;margin:0}.menu-question-type label span{white-space:nowrap}
.menu-details{border-bottom:1px solid #eee9df}.menu-details>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:10px 4px;list-style:none;font-size:.88rem}.menu-details>summary::-webkit-details-marker{display:none}.menu-details>summary::after{content:'›';margin-left:auto;color:var(--muted);font-size:1.15rem;transition:.15s}.menu-details[open]>summary::after{transform:rotate(90deg)}.menu-details-body{padding:4px 2px 14px}.menu-details .scope-body{padding:4px 2px 14px}
.highlight-level-grid{display:grid;gap:9px}.highlight-level-grid label,.eq-grid label{display:grid;grid-template-columns:minmax(90px,1fr) minmax(120px,1.5fr) 54px;gap:8px;align-items:center;font-size:.78rem}.highlight-level-grid input,.eq-grid input{width:100%;accent-color:var(--accent)}.highlight-level-grid output,.eq-grid output{text-align:right;font-size:.7rem;color:var(--muted)}
.menu-volume{margin:0 0 12px;width:100%;grid-template-columns:70px 1fr 48px}.eq-grid{display:grid;gap:8px}.menu-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 2px}.menu-links a{display:grid;place-items:center;min-height:40px;border:1px solid var(--line);border-radius:9px;color:var(--accent);font-size:.78rem;font-weight:800;text-decoration:none;background:#fff}
.app-menu .scope-grid{grid-template-columns:1fr 1fr;gap:8px}.app-menu .scope-group{padding:9px}.app-menu .scope-group h3{font-size:.85rem}.app-menu .scope-options{gap:5px}.app-menu .learning-table-wrap{max-height:48vh;overflow:auto}.app-menu .history-list{max-height:48vh;overflow:auto}.app-menu .privacy-controls{padding:10px 0 0}.app-menu .guided-grid{grid-template-columns:1fr}.app-menu .guided-check-grid{gap:5px 10px}

.headphone-indicator{position:fixed;z-index:80;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;background:#fff4f3;border:1px solid #c96e68;box-shadow:0 6px 22px rgba(120,30,25,.18);font-size:1.2rem}.headphone-indicator[hidden]{display:none}.headphone-warning::after{content:'';position:fixed;z-index:79;inset:0;pointer-events:none;border:2px solid rgba(190,45,40,.62);box-shadow:inset 0 0 12px rgba(190,45,40,.05)}

@media(max-width:760px){
  .app-shell{width:100%;padding:6px 8px 24px}.app-header{padding:5px 2px 7px}.brand-block h1{font-size:1.45rem}.brand-block .top-subtitle{display:none}.menu-btn{width:44px;height:38px}.flow-guide{top:0;margin-bottom:6px;border-radius:9px;padding:7px 9px}.flow-step{gap:6px}.flow-step .badge{font-size:.66rem;padding:4px 6px}.flow-step p{font-size:.8rem}.flow-trainer{padding:10px;border-radius:11px}.flow-toolbar{gap:7px;margin-bottom:7px}.flow-main-action,.flow-replay{min-height:40px;padding:8px 10px;font-size:.8rem}.highlight-strip{gap:5px;padding:5px 0 8px}.highlight-strip-label{width:100%;font-size:.63rem}.highlight-chip span{min-height:30px;padding:5px 7px;font-size:.7rem}.answer-grid{grid-template-columns:1fr 1fr;gap:7px}.answer{padding:7px}.answer-current{min-height:54px}.component-row{padding:3px}.component-button{min-height:30px;padding:5px 6px;font-size:.72rem}.answer-area{grid-template-columns:1fr;gap:8px}.finish-panel{min-height:44px}.finish-btn{min-height:44px}.mc-grid{grid-template-columns:1fr;gap:6px}.mc-option{min-height:57px;padding:6px}.flow-notation{margin-top:7px;padding-top:7px}.notation{padding:4px;border-radius:8px}.solution-labels{grid-template-columns:repeat(4,1fr);gap:4px}.solution-item{padding:4px!important}.flow-next button{width:100%;min-width:0}.app-menu{width:min(420px,96vw)}
}
@media(max-width:520px){
  .answer-grid{grid-template-columns:1fr}.header-status .question-count span{display:none}.header-status .question-count strong{font-size:1rem}.flow-replay{margin-left:0;flex:1}.flow-main-action{flex:1}.highlight-strip-label{display:none}.highlight-strip{justify-content:space-between}.highlight-chip{flex:1}.highlight-chip span{justify-content:center;width:100%;padding:5px 4px}.solution-labels{grid-template-columns:1fr 1fr}.menu-question-type{grid-template-columns:1fr}.app-menu .scope-grid{grid-template-columns:1fr}.highlight-level-grid label,.eq-grid label{grid-template-columns:88px 1fr 46px}.menu-links{grid-template-columns:1fr}
}
@media(orientation:landscape) and (max-height:560px) and (min-width:640px){
  .app-shell{padding:4px 8px 12px}.app-header{padding:2px 2px 4px}.brand-block h1{font-size:1.2rem}.brand-block .top-subtitle{display:none}.menu-btn{height:34px}.flow-guide{padding:5px 8px;margin-bottom:4px}.flow-step p{font-size:.74rem}.flow-trainer{padding:7px 9px}.flow-toolbar{margin-bottom:4px}.flow-main-action,.flow-replay{min-height:34px;padding:5px 9px}.highlight-strip{padding:4px 0 5px}.highlight-strip-label{display:none}.highlight-chip span{min-height:27px;padding:3px 7px}.answer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.answer{padding:6px}.answer-current{min-height:44px}.component-button{min-height:27px;padding:3px 5px}.component-label{font-size:.6rem}.mc-grid{grid-template-columns:1fr 1fr}.mc-option{min-height:54px}.notation-wrap{margin-top:5px;padding-top:5px}.notation svg{min-width:640px}.flow-next{margin-top:5px}.flow-next button{min-height:38px}.headphone-indicator{width:36px;height:36px;right:10px;bottom:10px}
}
.mobile-notice-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.mobile-notice-actions button{margin:0!important;width:auto!important}@media(max-width:480px){.mobile-notice-actions{grid-template-columns:1fr}.mobile-notice-actions button{width:100%!important}}

/* v0.20 · phone-first no-scroll trainer + compact app menu */
body[data-stage]{height:100dvh;min-height:100dvh;overflow:hidden}
body[data-stage] .app-shell{height:100dvh;max-height:100dvh;min-height:0;width:min(1180px,100%);padding:8px 12px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden}
body[data-stage] .app-header{flex:0 0 auto;margin:0;padding:4px 2px 6px}
body[data-stage] .flow-guide{position:relative;flex:0 0 auto;margin:0 0 6px;padding:6px 9px}
body[data-stage] .flow-trainer{flex:1 1 auto;min-height:0;margin:0;padding:8px 10px 9px;display:flex;flex-direction:column;overflow:hidden}
body[data-stage] .flow-toolbar{flex:0 0 auto;margin:0 0 4px}
body[data-stage] .compact-feedback{flex:0 0 auto;min-height:0;margin:2px 0;font-size:.72rem;line-height:1.2}
body[data-stage] .flow-notation{flex:0 1 auto;min-height:0;margin:3px 0 0;padding:3px 0 0;overflow:hidden}
body[data-stage] .flow-notation .notation-head{margin:0 0 2px;font-size:.68rem}
body[data-stage] .flow-notation .notation{overflow:hidden;padding:2px;border-radius:7px}
body[data-stage] .flow-notation .notation svg{display:block;width:100%;height:auto;min-width:0!important;max-width:100%;max-height:31dvh}
body[data-stage="2"] .flow-notation .notation svg{max-height:26dvh}
body[data-stage="3"] .flow-notation .notation svg{max-height:43dvh}
body[data-stage] .flow-answer{flex:1 1 auto;min-height:0;margin:4px 0 0;overflow:hidden;display:flex;flex-direction:column}
body[data-stage] .answer-mode-title{flex:0 0 auto;margin:0 0 2px;font-size:.7rem;line-height:1.1}
body[data-stage] .answer-area{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:5px;overflow:hidden}
body[data-stage] .answer-grid,body[data-stage] .mc-grid{min-height:0;height:100%;overflow:hidden}
body[data-stage] .finish-panel{min-height:0}
body[data-stage] .finish-btn{padding:6px;min-height:36px}
body[data-stage] .flow-next{flex:0 0 auto;margin:5px 0 0}
body[data-stage] .flow-next button{min-height:38px;padding:7px 12px}
body[data-stage] .solution-labels{margin-top:4px;gap:4px}
body[data-stage] .solution-item{min-width:0;padding:4px!important;border:1px solid transparent;border-radius:8px}
body[data-stage] .solution-item.unresolved{border:2px solid var(--bad)!important;background:#fff5f3;box-shadow:0 0 0 1px rgba(138,47,43,.06)}

/* Correct component rows no longer consume scarce correction-stage height. */
body[data-stage="2"] .component-row.row-locked{display:none!important}
body[data-stage="2"] .answer.correct{display:none!important}
body[data-stage="2"] .answer-grid{grid-auto-flow:row;align-content:start}

/* Assistance is menu-only in v0.20. */
.highlight-strip{display:none!important}
.help-grid{display:grid;gap:8px}
.help-row{display:grid;grid-template-columns:18px minmax(86px,.85fr) minmax(110px,1.5fr) 48px;gap:7px;align-items:center;min-height:34px;font-size:.76rem}
.help-row>input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent)}
.help-row>input[type="range"]{width:100%;min-width:0;accent-color:var(--accent)}
.help-row output{text-align:right;color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums}
.help-note{margin:2px 0 0;font-size:.7rem;line-height:1.35}

/* Equalizer: every instrument occupies its own full-width row. */
.app-menu .eq-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px}
.app-menu .eq-grid label,.app-menu .menu-volume{display:grid;grid-template-columns:minmax(74px,.7fr) minmax(120px,1.6fr) 48px;gap:8px;align-items:center;width:100%;margin:0;font-size:.76rem}
.app-menu .menu-volume{margin-bottom:10px}
.app-menu .eq-grid input,.app-menu .menu-volume input{min-width:0;width:100%;accent-color:var(--accent)}
.app-menu .eq-grid output,.app-menu .menu-volume output{text-align:right;font-size:.68rem;color:var(--muted)}

/* Language selector and property grid. */
.menu-select-row{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:10px;font-size:.8rem;font-weight:800}
.menu-select-row select{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 9px;color:var(--ink)}
.app-menu .guided-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px 10px}
.app-menu .guided-grid>label:first-child{display:flex!important;grid-template-columns:none!important;align-items:center;gap:7px}
.app-menu .guided-check{min-width:0;min-height:31px;justify-content:flex-start;white-space:normal}
.app-menu .guided-check span{min-width:0;text-align:left}
.app-menu .guided-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 8px}

/* Exact scope: positions vertically, symbols compactly tiled inside each position. */
.app-menu .scope-grid{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
.app-menu .scope-group{padding:7px 8px!important;border-radius:9px}
.app-menu .scope-group h3{margin:0 0 5px!important;font-size:.76rem!important}
.app-menu .scope-option-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 5px}
.app-menu .scope-list-row{min-width:0;min-height:31px;padding:3px 4px!important;display:flex;align-items:center;justify-content:flex-start;gap:4px;border-radius:7px}
.app-menu .scope-list-row input{flex:0 0 auto;width:14px;height:14px}
.app-menu .scope-list-symbol{min-width:0;overflow:hidden;display:flex;justify-content:center;flex:1}
.app-menu .scope-list-symbol .chord-symbol{font-size:.82rem;min-height:1.35em}
.app-menu .scope-all-text{font-size:.7rem;font-weight:800}

/* Learning progress must fit the menu width without horizontal scrolling. */
.app-menu .learning-table-wrap{width:100%;max-width:100%;overflow-y:auto!important;overflow-x:hidden!important;padding:0}
.app-menu .learning-table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;font-size:.66rem}
.app-menu .learning-table th,.app-menu .learning-table td{min-width:0!important;padding:5px 3px!important;overflow-wrap:anywhere;word-break:break-word;text-align:center}
.app-menu .learning-table th:nth-child(1),.app-menu .learning-table td:nth-child(1){width:21%}
.app-menu .learning-table th:nth-child(2),.app-menu .learning-table td:nth-child(2){width:25%}
.app-menu .learning-table th:nth-child(3),.app-menu .learning-table td:nth-child(3){width:24%}
.app-menu .learning-table th:nth-child(4),.app-menu .learning-table td:nth-child(4),.app-menu .learning-table th:nth-child(5),.app-menu .learning-table td:nth-child(5){width:15%}
.app-menu .learning-symbol .chord-symbol{font-size:.82rem;min-height:1.35em}

@media(max-width:760px){
  body[data-stage] .app-shell{padding:4px 6px max(5px,env(safe-area-inset-bottom))}
  body[data-stage] .app-header{min-height:42px;padding:1px 1px 3px}
  body[data-stage] .brand-block h1{font-size:1.16rem;line-height:1.05}
  body[data-stage] .brand-block .top-subtitle{display:none}
  body[data-stage] .header-status{gap:6px}
  body[data-stage] .menu-btn{width:38px;height:34px;padding:7px 8px;border-radius:9px}
  body[data-stage] .question-count{font-size:.58rem}
  body[data-stage] .question-count strong{font-size:.9rem}
  body[data-stage] .flow-guide{padding:4px 6px;margin-bottom:3px;border-radius:7px}
  body[data-stage] .flow-step{gap:5px}
  body[data-stage] .flow-step .badge{padding:3px 5px;font-size:.58rem}
  body[data-stage] .flow-step p{font-size:.69rem;line-height:1.15}
  body[data-stage] .flow-trainer{padding:5px 6px 6px;border-radius:9px}
  body[data-stage] .flow-toolbar{gap:5px;margin-bottom:2px}
  body[data-stage] .flow-main-action,body[data-stage] .flow-replay{min-height:32px;padding:5px 7px;font-size:.7rem;border-radius:8px}
  body[data-stage] .flow-replay{margin-left:auto}
  body[data-stage] .answer-area{grid-template-columns:1fr;gap:4px}
  body[data-stage] .finish-panel{flex:0 0 auto;min-height:34px}
  body[data-stage] .finish-btn{width:100%;min-height:34px}
  body[data-stage] .answer-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr;gap:4px!important}
  body[data-stage] .answer{gap:3px;padding:4px!important;border-radius:8px}
  body[data-stage] .answer legend{font-size:.62rem;line-height:1}
  body[data-stage] .answer-current{min-height:34px!important;padding:2px!important;grid-template-columns:1fr!important;gap:0}
  body[data-stage] .answer-current-label,.answer-current .candidate-count{font-size:.52rem;line-height:1.05}
  body[data-stage] .current-symbol .chord-symbol{font-size:.93rem;min-height:1.35em}
  body[data-stage] .component-picker{gap:2px}
  body[data-stage] .component-row{grid-template-columns:46px minmax(0,1fr)!important;gap:2px;padding:1px!important;border-radius:5px}
  body[data-stage] .component-label{font-size:.5rem;line-height:1}
  body[data-stage] .component-row-content{gap:2px}
  body[data-stage] .component-subgroup{gap:1px}
  body[data-stage] .component-mini-label{font-size:.44rem}
  body[data-stage] .component-buttons{gap:2px!important}
  body[data-stage] .component-button{min-height:22px!important;padding:2px 3px!important;border-radius:5px;font-size:.6rem!important;line-height:1}
  body[data-stage] .mc-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr;gap:4px!important}
  body[data-stage] .mc-option{min-height:0!important;height:100%;padding:4px!important;border-radius:7px}
  body[data-stage] .mc-symbol-sequence{gap:3px!important}
  body[data-stage] .mc-symbol .chord-symbol{font-size:.78rem;min-height:1.2em}
  body[data-stage] .flow-notation .notation svg{max-height:24dvh}
  body[data-stage="2"] .flow-notation .notation svg{max-height:22dvh}
  body[data-stage="3"] .flow-notation .notation svg{max-height:40dvh}
  body[data-stage] .solution-labels{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px}
  body[data-stage] .solution-position{font-size:.48rem!important;overflow-wrap:anywhere}
  body[data-stage] .solution-sign .chord-symbol{font-size:.92rem!important;min-height:1.3em}
  body[data-stage] .flow-next button{min-height:34px;font-size:.75rem}
  .app-menu{width:min(430px,97vw)}
}

@media(max-width:420px){
  .app-menu .scope-option-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-menu .guided-grid{grid-template-columns:1fr 1fr!important}
  .help-row{grid-template-columns:17px minmax(72px,.75fr) minmax(90px,1.4fr) 42px;gap:5px}
  .app-menu .eq-grid label,.app-menu .menu-volume{grid-template-columns:68px minmax(90px,1fr) 43px;gap:6px}
}

@media(orientation:landscape) and (max-height:650px){
  body[data-stage] .app-shell{padding:2px 6px 4px}
  body[data-stage] .app-header{min-height:30px;padding:0 1px 2px}
  body[data-stage] .brand-block h1{font-size:.98rem}
  body[data-stage] .menu-btn{height:28px;width:34px;padding:5px 7px}
  body[data-stage] .flow-guide{padding:3px 5px;margin-bottom:2px}
  body[data-stage] .flow-step p{font-size:.62rem}
  body[data-stage] .flow-trainer{padding:3px 5px 4px}
  body[data-stage] .flow-toolbar{margin-bottom:1px}
  body[data-stage] .flow-main-action,body[data-stage] .flow-replay{min-height:27px;padding:3px 6px;font-size:.64rem}
  body[data-stage] .answer-area{grid-template-columns:minmax(0,1fr) 72px;gap:4px}
  body[data-stage] .answer-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:1fr!important}
  body[data-stage] .mc-grid{grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important}
  body[data-stage] .answer-current{min-height:28px!important}
  body[data-stage] .answer-current-label,body[data-stage] .candidate-count{display:none}
  body[data-stage] .component-row{grid-template-columns:38px minmax(0,1fr)!important}
  body[data-stage] .component-button{min-height:19px!important;padding:1px 2px!important;font-size:.54rem!important}
  body[data-stage] .flow-notation .notation svg{max-height:31dvh}
  body[data-stage="2"] .flow-notation .notation svg{max-height:27dvh}
  body[data-stage="3"] .flow-notation .notation svg{max-height:49dvh}
  body[data-stage] .solution-labels{margin-top:2px}
  body[data-stage] .flow-next{margin-top:2px}
  body[data-stage] .flow-next button{min-height:29px;padding:4px 8px}
}

@media(max-height:590px) and (orientation:portrait){
  body[data-stage] .flow-guide{display:none}
  body[data-stage] .compact-feedback{font-size:.62rem}
  body[data-stage] .component-button{min-height:19px!important;font-size:.55rem!important}
  body[data-stage] .answer-current{min-height:27px!important}
  body[data-stage] .answer-current-label,body[data-stage] .candidate-count{display:none}
  body[data-stage] .flow-notation .notation svg{max-height:20dvh}
  body[data-stage="3"] .flow-notation .notation svg{max-height:38dvh}
}

/* v0.21 · landscape phone flow, larger notation, compact top line */
.compact-topbar{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:10px}
.compact-topbar .brand-block h1{margin:0;font-size:1.28rem;line-height:1}
.top-instruction{min-width:0;display:flex;align-items:center;gap:7px}
.top-instruction p{margin:0;min-width:0;font-size:.72rem;line-height:1.15;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.top-instruction .badge{flex:0 0 auto;margin:0;font-size:.62rem;padding:3px 6px}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.top-actions .flow-main-action,.top-actions .flow-replay{min-height:34px;margin:0;padding:5px 9px;font-size:.72rem;white-space:nowrap}
.top-actions .menu-btn{flex:0 0 auto}
.menu-question-counter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;padding-top:7px;border-top:1px solid #eee9df;font-size:.72rem;color:var(--muted)}
.menu-question-counter strong{font-size:.9rem;color:var(--ink)}

/* Old separate guide/toolbar no longer exists; reclaim the space. */
body[data-stage] .app-header{margin:0;padding:3px 2px 5px}
body[data-stage] .flow-trainer{padding-top:5px}

/* Longer assistance labels remain readable without squeezing the sliders. */
.help-row{grid-template-columns:18px minmax(128px,1fr) minmax(120px,1.45fr) 48px}

@media(max-width:760px){
  body[data-stage] .app-header.compact-topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:5px;min-height:34px;padding:1px 1px 3px}
  body[data-stage] .compact-topbar .brand-block h1{font-size:.92rem;letter-spacing:-.02em}
  body[data-stage] .top-instruction{gap:0;align-self:stretch;display:flex;align-items:center}
  body[data-stage] .top-instruction .badge{display:none}
  body[data-stage] .top-instruction p{font-size:.56rem;line-height:1.08;font-weight:720;-webkit-line-clamp:2}
  body[data-stage] .top-actions{gap:3px}
  body[data-stage] .top-actions .flow-main-action,body[data-stage] .top-actions .flow-replay{min-height:29px;padding:3px 6px;font-size:.6rem;border-radius:7px;max-width:128px;overflow:hidden;text-overflow:ellipsis}
  body[data-stage] .top-actions .menu-btn{width:31px;height:29px;padding:5px 6px;border-radius:7px;gap:4px}
  body[data-stage] .flow-trainer{padding:4px 5px 5px}
  body[data-stage] .compact-feedback{font-size:.61rem;line-height:1.05;margin:1px 0}
  body[data-stage] .flow-notation .notation-head{font-size:.58rem;margin-bottom:1px}
  body[data-stage] .flow-notation .notation{padding:0}
  body[data-stage] .flow-notation .notation svg{max-height:34dvh}
  body[data-stage="2"] .flow-notation .notation svg{max-height:34dvh}
  body[data-stage="3"] .flow-notation .notation svg{max-height:48dvh}
  .help-row{grid-template-columns:17px minmax(112px,1fr) minmax(96px,1.25fr) 42px;gap:5px;font-size:.68rem}
}

@media(orientation:landscape) and (max-height:650px){
  body[data-stage] .app-shell{padding:2px 5px 3px}
  body[data-stage] .app-header.compact-topbar{grid-template-columns:72px minmax(0,1fr) auto;min-height:31px;gap:6px;padding:0 1px 2px}
  body[data-stage] .compact-topbar .brand-block h1{font-size:.9rem}
  body[data-stage] .top-instruction p{font-size:.52rem;line-height:1.06;max-width:360px}
  body[data-stage] .top-actions .flow-main-action,body[data-stage] .top-actions .flow-replay{min-height:27px;padding:2px 6px;font-size:.58rem;max-width:122px}
  body[data-stage] .top-actions .menu-btn{width:30px;height:27px}
  body[data-stage] .flow-trainer{padding:2px 4px 3px}
  body[data-stage] .answer-mode-title{font-size:.58rem;margin-bottom:1px}
  body[data-stage] .flow-notation{margin-top:1px;padding-top:1px}
  body[data-stage] .flow-notation .notation-head{font-size:.54rem}
  body[data-stage] .flow-notation .notation svg{max-height:43dvh}
  body[data-stage="2"] .flow-notation .notation svg{max-height:42dvh}
  body[data-stage="3"] .flow-notation .notation svg{max-height:59dvh}
  body[data-stage] .solution-item{padding:2px!important}
  body[data-stage] .solution-position{font-size:.44rem!important}
  body[data-stage] .solution-sign .chord-symbol{font-size:.86rem!important}
  body[data-stage] .flow-next button{min-height:27px;padding:3px 7px;font-size:.64rem}
  body[data-stage] .answer-area{grid-template-columns:minmax(0,1fr) 66px;gap:3px}
  body[data-stage] .answer{padding:3px!important}
  body[data-stage] .answer legend{font-size:.56rem}
  body[data-stage] .answer-current{min-height:24px!important}
  body[data-stage] .current-symbol .chord-symbol{font-size:.82rem}
  body[data-stage] .component-row{grid-template-columns:34px minmax(0,1fr)!important;padding:0!important}
  body[data-stage] .component-label{font-size:.44rem}
  body[data-stage] .component-button{min-height:18px!important;padding:1px 2px!important;font-size:.51rem!important}
  body[data-stage] .mc-option{padding:3px!important}
  body[data-stage] .mc-symbol .chord-symbol{font-size:.73rem}

  /* Landscape menu uses the available width instead of becoming a tall phone drawer. */
  .app-menu{width:min(690px,92vw);height:100dvh}
  .menu-head{min-height:38px;padding:5px 10px;font-size:.98rem}
  .menu-scroll{padding:5px 9px max(8px,env(safe-area-inset-bottom))}
  .menu-section{padding:5px 3px 7px}
  .menu-details>summary{min-height:35px;padding:5px 3px;font-size:.75rem}
  .menu-details-body{padding:2px 1px 8px}
  .app-menu .guided-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px 7px}
  .app-menu .guided-check-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 6px}
  .app-menu .scope-option-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 5px}
  .app-menu .scope-grid{gap:5px!important}
  .app-menu .scope-group{padding:5px 7px!important}
  .help-grid{gap:5px}
  .help-row{grid-template-columns:16px minmax(145px,.95fr) minmax(150px,1.45fr) 42px;min-height:27px;font-size:.66rem}
  .help-note{font-size:.59rem;line-height:1.2}
  .app-menu .eq-grid{gap:5px}
  .app-menu .eq-grid label,.app-menu .menu-volume{grid-template-columns:76px minmax(160px,1fr) 42px;min-height:27px;font-size:.66rem}
  .app-menu .learning-table{font-size:.6rem}
  .app-menu .learning-table th,.app-menu .learning-table td{padding:3px 2px!important}
  .app-menu .learning-table-wrap,.app-menu .history-list{max-height:55vh}
}

/* v0.22 · compact manual entry + history links */
.fixed-answer{min-height:58px;display:grid;place-items:center;border:1px solid #e7e1d7;border-radius:9px;background:#faf8f3;padding:5px}
.fixed-answer .chord-symbol{font-size:1.18rem}
.direct-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;min-height:0}
.direct-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}.direct-count-3,.direct-count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.direct-option{min-width:0;min-height:42px;padding:4px 3px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center}
.direct-option .chord-symbol{font-size:.9rem;min-height:1.45em}.direct-option.selected{background:var(--accent2);border-color:#759786;box-shadow:inset 0 0 0 1px #759786}
.answer-dropdowns{display:grid;gap:5px;min-height:0}.answer-select-row{display:grid;grid-template-columns:minmax(84px,.75fr) minmax(0,1.45fr);gap:6px;align-items:center;padding:3px 4px;border:1px solid transparent;border-radius:7px}
.answer-select-label{font-size:.6rem;line-height:1.05;font-weight:800;color:var(--muted)}.answer-select{min-width:0;width:100%;height:32px;padding:3px 24px 3px 6px;border:1px solid var(--line);border-radius:7px;background:#fffdf8;color:var(--ink);font:inherit;font-size:.72rem}
.answer-select-row.good{background:#eef7f0;border-color:#9bc0a5}.answer-select-row.bad{background:#fff0ef;border-color:#d98983}.answer-select-row.row-locked{opacity:.74}.answer.wrong>.direct-answer-grid{outline:1px solid #d98983;outline-offset:2px;border-radius:8px}.answer.correct>.direct-answer-grid{outline:1px solid #9bc0a5;outline-offset:2px;border-radius:8px}
.compact-current{min-height:31px!important;padding:2px 4px!important;grid-template-columns:auto 1fr!important;gap:6px!important}.compact-current .current-symbol .chord-symbol{font-size:.78rem}.compact-current .candidate-count{font-size:.5rem!important;line-height:1.05}

.app-menu .history-list{padding:7px 1px 10px;gap:6px}.history-link{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto auto;gap:2px 5px!important;padding:6px 7px!important;border-radius:9px}
.history-number{grid-column:1;grid-row:1 / span 2;align-self:center;font-size:.58rem;color:var(--muted);font-weight:850}.history-link .history-signs{grid-column:2;grid-row:1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px!important;width:100%;align-items:center}.history-sign-cell{min-width:0;display:flex;justify-content:center;overflow:hidden}.history-link .history-signs .chord-symbol{font-size:1.04rem!important;min-height:1.5em}.history-link .history-result{grid-column:2;grid-row:2;font-size:.55rem!important;line-height:1.15;color:var(--muted);white-space:normal!important;text-align:left}

@media(orientation:landscape) and (max-height:650px){
  body[data-stage] .answer{padding:4px!important}.fixed-answer{min-height:39px;padding:2px}.fixed-answer .chord-symbol{font-size:.9rem}.direct-answer-grid{gap:3px}.direct-option{min-height:27px;padding:1px 2px;border-radius:6px}.direct-option .chord-symbol{font-size:.7rem;min-height:1.25em}.answer-dropdowns{gap:2px}.answer-select-row{grid-template-columns:58px minmax(0,1fr);gap:3px;padding:1px 2px}.answer-select-label{font-size:.43rem}.answer-select{height:24px;padding:1px 18px 1px 4px;font-size:.56rem;border-radius:5px}.compact-current{min-height:23px!important;padding:1px 2px!important}.compact-current .current-symbol .chord-symbol{font-size:.65rem}.compact-current .candidate-count{font-size:.42rem!important}
  .history-link .history-signs .chord-symbol{font-size:.95rem!important}.history-link .history-result{font-size:.5rem!important}
}
@media(max-width:520px) and (orientation:portrait){
  .direct-option{min-height:36px}.answer-select-row{grid-template-columns:72px minmax(0,1fr)}.answer-select{font-size:.66rem}.history-link .history-signs .chord-symbol{font-size:.9rem!important}
}


/* v0.22.3 · compact two-wheel manual entry and visible final solution */
.answer-dropdowns{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch}
.answer-dropdowns.single-select{grid-template-columns:1fr}
.answer-select-row{display:block;min-width:0;padding:0;border:2px solid transparent;border-radius:9px}
.answer-select-row[hidden]{display:none!important}
.answer-select{display:block;width:100%;height:46px;min-width:0;padding:3px 24px 3px 7px;border:1px solid var(--line);border-radius:8px;background:#fffdf8;color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:1.03rem;font-weight:700;line-height:1.1;text-align:center;text-align-last:center}
.answer-select option{font-family:Georgia,"Times New Roman",serif;font-size:1.05rem}
.answer-select-row.good{background:#eef7f0;border-color:#78aa86}.answer-select-row.bad{background:#fff0ef;border-color:#cf625b}
.compact-current{min-height:43px!important;padding:1px 3px!important;display:grid!important;place-items:center!important;grid-template-columns:1fr!important}
.compact-current .current-symbol{display:grid;place-items:center;min-width:0}
.compact-current .current-symbol .chord-symbol{font-size:1.22rem!important;min-height:1.4em}
.solution-item.resolved{border:2px solid #78aa86!important;background:#f3faf4}
.solution-item.unresolved{border:2px solid var(--bad)!important;background:#fff5f3}
body[data-stage="3"] .compact-feedback{display:none!important}
body[data-stage="3"] .flow-notation{flex:1 1 auto;min-height:0;overflow:visible;display:flex;flex-direction:column}
body[data-stage="3"] .flow-notation .notation{flex:1 1 auto;min-height:0;overflow:hidden}
body[data-stage="3"] .solution-labels{flex:0 0 auto;display:grid;visibility:visible;min-height:47px;margin-top:3px;padding:1px 0}

@media(max-width:760px){
  .answer-dropdowns{gap:4px}
  .answer-select{height:40px;padding:2px 18px 2px 4px;font-size:.92rem;border-radius:7px}
  .answer-select option{font-size:1rem}
  .compact-current{min-height:36px!important}
  .compact-current .current-symbol .chord-symbol{font-size:1.08rem!important}
  body[data-stage="3"] .flow-notation .notation svg{max-height:35dvh!important}
  body[data-stage="3"] .solution-labels{grid-template-columns:repeat(4,minmax(0,1fr))!important;min-height:50px;gap:3px!important}
  body[data-stage="3"] .solution-sign .chord-symbol{font-size:1.04rem!important}
}

@media(orientation:landscape) and (max-height:650px){
  .compact-current{min-height:31px!important}
  .compact-current .current-symbol .chord-symbol{font-size:.92rem!important}
  .answer-dropdowns{gap:3px}
  .answer-select{height:31px;padding:1px 16px 1px 3px;font-size:.75rem!important;border-radius:6px}
  .answer-select option{font-size:.92rem}
  body[data-stage="3"] .flow-notation .notation-head{display:none}
  body[data-stage="3"] .flow-notation .notation svg{max-height:41dvh!important}
  body[data-stage="3"] .solution-labels{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;min-height:46px;margin-top:2px!important;padding:1px 0!important;gap:3px!important}
  body[data-stage="3"] .solution-item{min-height:44px;padding:2px!important;display:grid;align-content:center}
  body[data-stage="3"] .solution-position{font-size:.46rem!important}
  body[data-stage="3"] .solution-sign .chord-symbol{font-size:1rem!important;min-height:1.25em}
}