/* PM-APP-12: consumer layout; shared theme and geometry stay unchanged. */
*{box-sizing:border-box}
body{margin:0;background:var(--panel);color:var(--text);font:14px/1.5 var(--font,system-ui)}
button,select,input{font:inherit}
button,select{border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text);padding:8px 12px}
button{cursor:pointer}button:hover{background:var(--panelAlt)}button:disabled{opacity:.45;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--tone);outline-offset:3px}
a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:1.375rem;line-height:1.3}h2{font-size:1.1875rem}h3{font-size:0.9375rem}
[hidden]{display:none!important}
.topbar{min-height:60px;padding:10px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;font-size:1.125rem;font-weight:700;line-height:1.2;margin-right:auto}
.brand-icon{display:grid;place-items:center;width:32px;height:32px;background:var(--root);color:var(--root-text);font-size:1.625rem;border-radius:4px}
.brand small{display:block;font-size:0.5625rem;letter-spacing:1.5px;color:var(--textMuted);margin-top:4px}.edition{display:none}
.app-shell{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;max-width:1440px;margin:auto;padding:20px 24px}
main{min-width:0}.mode-nav{display:flex;flex-direction:column;gap:6px;align-self:start;position:sticky;top:20px}
.mode-nav button{text-align:left;padding:12px 14px;background:transparent;border-color:transparent}
.mode-nav button[aria-pressed=true]{color:var(--tone);border-color:var(--tone);background:var(--tone-soft);font-weight:650}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}.learning-workspace{grid-template-columns:minmax(0,1fr)!important}
.panel{border:1px solid var(--line);background:var(--surface);border-radius:8px;min-width:0}.lab{padding:16px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.legend{display:flex;align-items:center;gap:5px;font-size:0.6875rem;color:var(--textMuted)}.legend span{width:9px;height:9px;border-radius:50%;margin-left:6px}.legend b{font-weight:500}
.root-dot{background:var(--root)}.tone-dot{border:1.5px solid var(--tone)}.selection-dot{background:var(--text)}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line);font-size:0.75rem}
.toolbar>label:first-child,.learning-controls label{display:flex;gap:8px;align-items:center}.toolbar select{padding:5px 10px}
.segmented{display:flex;border:1px solid var(--line);border-radius:5px;padding:2px;background:var(--panel)}.segmented button{border:0;padding:4px 12px;background:transparent}
.segmented button[aria-pressed=true]{background:var(--surface);color:var(--tone);font-weight:700}.check{display:flex;align-items:center;gap:6px;white-space:nowrap}input[type=checkbox]{accent-color:var(--tone)}
.board-surface{margin-top:4px}.audio-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0 8px;font-size:0.6875rem;color:var(--textMuted)}
.audio-label{font-weight:600;flex:0 0 auto}#audio-retry{font-size:0.6875rem;padding:4px 8px}
.board-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:0;scrollbar-width:thin;scrollbar-color:var(--lineStrong) var(--panel)}
#board{width:100%}#board svg{display:block;width:100%!important;height:auto!important;max-width:860px;min-width:614px;margin:auto}
#board [role=button]{cursor:pointer}#board [role=button]:focus{outline:none}#board [role=button]:focus-visible circle{stroke:var(--text);stroke-width:4}
#board .is-selected circle{stroke:var(--text);stroke-width:3.5;stroke-dasharray:3 2}#board .same-pitch circle{fill:var(--tone-soft);stroke:var(--tone);stroke-width:3}
#board .is-playing circle{fill:var(--root-soft);stroke:var(--root);stroke-width:5}
#board .is-hidden-note circle,#board .is-hidden-note text{opacity:0}
/* Separate, non-interactive live input layer: original labels and selection remain intact. */
.live-guitar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;padding-block:2px;border-bottom:1px solid var(--ui-line)}
#live-guitar-note,#live-guitar-status,.live-guitar>details[open]{grid-column:1/-1}
.live-guitar>details:not([open]){grid-column:2;grid-row:1}
.live-guitar>details summary{min-height:44px;padding:10px 0;font-size:.875rem}
.live-guitar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.live-guitar-actions h2{margin:0;margin-inline-end:auto;font-size:1rem}
.live-guitar-actions button{min-height:44px}
.live-guitar p{margin:2px 0;overflow-wrap:anywhere}
.live-guitar-help,#live-guitar-status{font-size:.875rem;color:var(--ui-muted)}
#live-guitar-status:empty{display:none}
#live-guitar-note{font-size:.875rem;font-weight:600;min-height:1.5em}
#live-guitar-data{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.875rem;max-height:240px;overflow:auto}
#board .live-guitar-overlay circle{fill:var(--ui-surface);stroke:var(--root);stroke-width:2;transform-box:fill-box;transform-origin:center}
#board .live-guitar-overlay text{fill:var(--text);font-size:11px;font-weight:700}
#board .is-hidden-note:hover circle,#board .is-hidden-note:focus circle,#board .is-selected circle,#board .is-selected text,#board .same-pitch circle,#board .same-pitch text,#board .is-playing circle,#board .is-playing text{opacity:1}
#board .is-auditioned,#board .is-playing{animation:audition-feedback 180ms ease-out}
@keyframes audition-feedback{from{opacity:.6}to{opacity:1}}
.neck-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:0.625rem;color:var(--textMuted);margin:4px 0 12px}.neck-nav label{display:none}
.feedback-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.85fr);gap:16px;padding-top:12px;border-top:1px solid var(--line)}
.note-inspector{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;padding-left:12px;border-left:0}
.eyebrow{display:none}#note-detail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}#note-detail strong{font-size:1.625rem;line-height:1.2;font-weight:600;white-space:nowrap}#note-detail>span{font-size:0.75rem;color:var(--textMuted)}
#note-detail b,#note-detail small{display:block}#note-detail b{font-weight:500;color:var(--text)}#note-detail small{font-size:0.6875rem}.note-technical{font-size:0.6875rem;margin-top:4px}.note-technical summary{cursor:pointer}
.note-inspector button{font-size:0.6875rem;padding:6px 8px;white-space:nowrap}.selection-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.selection-heading h3{font-size:0.75rem;font-weight:500}
.selection-heading h3 span{margin-left:4px;color:var(--tone)}.selection-heading button{font-size:0.6875rem;padding:5px 8px}.selected-notes{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px;min-height:0}.note-chip{font-size:0.6875rem;padding:5px 8px;background:var(--tone-soft);border-color:var(--tone);color:var(--tone)}
.learning-task,.scale-panel{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:5px;margin-bottom:8px}.learning-task h3{font-size:1rem;margin:8px 0}.learning-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:0.75rem}.learning-controls select{padding:5px 8px}.learning-controls span{font-size:0.6875rem;color:var(--textMuted)}.learning-controls [aria-invalid=true]{border-color:var(--danger)}
.task-switch{display:flex;align-items:center;gap:8px;font-size:0.75rem}.task-switch select{padding:5px 8px}#learning-summary{margin:8px 0 4px}#learning-feedback{font-size:0.75rem;color:var(--textMuted);margin:0 0 8px;min-height:18px}
.learning-actions{display:flex;flex-wrap:wrap;gap:8px}.learning-actions button{font-size:0.75rem;padding:6px 10px}#learning-answers{margin:8px 0}.learning-source{display:block;margin-top:4px}.lab[data-board-mode=learn] .panel-heading{display:none}
.source-details{font-size:0.6875rem;color:var(--textMuted);margin-top:8px}.source-details summary{cursor:pointer}.source-details p{margin-top:8px}.source-details a{color:var(--tone);text-decoration:underline}
.scale-panel h3{font-size:0.9375rem;margin:8px 0 4px}.scale-panel>p{font-size:0.875rem;margin:4px 0}#scale-warnings{font-size:0.75rem;color:var(--textMuted)}
.caged{padding:16px}.aside-description{font-size:0.75rem;color:var(--textMuted);margin:8px 0 12px}.shapes{display:flex;gap:4px}.shapes button{flex:1;min-width:0;padding:6px 0}.shapes strong{display:block;font-size:1.0625rem}.shapes span{display:block;font-size:0.5625rem}.shapes button[aria-pressed=true]{background:var(--root-soft);border-color:var(--root);color:var(--root)}
.shape-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;font-size:0.6875rem}.shape-caption>span{color:var(--textMuted)}#chord-diagram{max-width:210px;margin:8px auto}#chord-diagram svg{width:100%;height:auto;display:block}
.chord-tones{display:flex;justify-content:center;gap:20px;margin-bottom:12px}.chord-tones span{display:grid;text-align:center}.chord-tones strong{font-size:1.125rem}.chord-tones small{font-size:0.625rem;color:var(--textMuted)}.shape-actions{display:flex;gap:6px}.shape-actions button{flex:1;font-size:0.6875rem;padding:6px}
.primary{background:var(--root);border-color:var(--root);color:var(--root-text)}.primary:hover{background:var(--root-stroke)}#shape-limit{font-size:0.6875rem;color:var(--textMuted);margin:8px 0}.try-card{border-top:1px solid var(--line);padding-top:12px}.try-card h3{margin-bottom:6px}.try-card p{font-size:0.75rem;color:var(--textMuted)}.rule{display:grid;gap:4px;font-size:0.6875rem;margin-top:8px}.rule>span{color:var(--root)}.rule strong{font-weight:500}
.performance-note{padding:6px 10px;border-left:0;background:var(--panel);font-size:0.75rem;margin-top:6px;min-height:30px}.performing .board-scroll{touch-action:none}
.performing .caged,.performing #scale-panel,.performing #explore-toolbar,.performing #selection-feedback,.performing #experiment-panel{display:none!important}.performing .workspace{grid-template-columns:minmax(0,1fr)!important}
footer,.experiment-strip{display:none}
.circle-panel{padding:16px}.circle-heading{margin-bottom:16px}.circle-heading p{font-size:0.75rem;color:var(--textMuted);margin-top:8px}.circle-content{display:grid;grid-template-columns:minmax(328px,460px) minmax(220px,1fr);gap:24px;align-items:center}
.circle-ring{position:relative;width:100%;min-width:328px;max-width:460px;aspect-ratio:1}.circle-node{position:absolute;width:44px;height:44px;min-width:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;display:grid;place-items:center;border-radius:50%;clip-path:circle(50%);font-size:0.75rem;font-weight:600;touch-action:manipulation}
.circle-node.minor{background:var(--panel);font-size:0.6875rem}.circle-node[aria-pressed=true]{background:var(--tone-soft);border-color:var(--tone);color:var(--tone)}.circle-node:focus-visible{outline:none;border:3px solid var(--tone)}
.circle-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:0.75rem;text-align:center;white-space:nowrap;color:var(--textMuted)}.circle-center small{display:block;font-size:0.625rem}
.circle-info h3{font-size:1.375rem}.circle-info>p{font-size:0.875rem;margin:8px 0}.circle-neighbors{display:flex;gap:8px;margin:12px 0}.circle-neighbors button{min-height:44px;flex:1;font-size:0.75rem;padding:6px}.circle-info label{display:flex;align-items:center;gap:8px;font-size:0.75rem}.circle-info #circle-enharmonic{font-size:0.75rem;color:var(--textMuted)}#circle-to-board{min-height:44px;margin:8px 0}
@media(max-width:1100px){.app-shell{grid-template-columns:1fr;gap:12px;padding:16px}.mode-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}.mode-nav button{padding:7px 12px}.workspace{grid-template-columns:1fr}.caged{max-width:none}.feedback-area{grid-template-columns:1fr 1fr}.circle-content{gap:16px}}
@media(max-width:600px){.topbar{padding:8px 12px;gap:8px;flex-wrap:wrap}.brand{font-size:0.9375rem}.brand small{display:none}.topbar button{font-size:0.6875rem;padding:6px 8px}.app-shell{padding:12px 8px;gap:10px}.mode-nav{flex-wrap:nowrap;overflow-x:auto;min-width:0}.mode-nav button{flex:0 0 auto;padding:7px 10px;font-size:0.75rem}.lab{padding:12px}.panel-heading{margin-bottom:8px}h1{font-size:1.1875rem}.legend{display:none}.toolbar{gap:8px;font-size:0.6875rem}.segmented button{padding:4px 8px}.feedback-area{grid-template-columns:1fr;gap:12px}.note-inspector{align-items:center}#note-detail{gap:8px}#note-detail strong{font-size:1.4375rem}.learning-task,.scale-panel{padding:10px}.circle-content{grid-template-columns:1fr;gap:16px}.circle-panel{padding:10px}.circle-ring{margin:auto}.circle-info h3{font-size:1.25rem}.circle-panel{overflow-x:auto}}
@media(orientation:landscape) and (max-height:450px) and (max-width:950px){.topbar{min-height:40px;padding:4px 12px}.brand{font-size:0.8125rem}.brand-icon{width:24px;height:24px;font-size:1.25rem}.brand small{display:none}.topbar button{font-size:0.6875rem;padding:4px 8px}.app-shell{grid-template-columns:1fr;padding:6px 8px;gap:6px}.mode-nav{position:static;flex-direction:row;gap:6px}.mode-nav button{padding:3px 10px;font-size:0.6875rem}.workspace{grid-template-columns:1fr!important;gap:8px}.lab{padding:8px}.panel-heading{display:none}h1{font-size:1rem}.legend{display:none}.toolbar{padding:2px 0;border-top:0;gap:8px}.audio-controls{padding:0}#board svg{width:614px!important;max-width:614px}.neck-nav{margin:2px 0 6px}.feedback-area{padding-top:8px;gap:12px}.circle-content{grid-template-columns:minmax(328px,360px) minmax(220px,1fr);gap:12px}.circle-heading{margin-bottom:8px}.circle-info h3{font-size:1.125rem}.circle-info>p{font-size:0.75rem}.performing .mode-nav,.performing .panel-heading{display:none}.performing .app-shell{padding:4px 8px}.performing .lab{padding:4px 8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* PM-APP-13: chord lookup is a consumer of the fixed renderer and catalog. */
.chord-controls{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:5px;margin-bottom:8px}.chord-controls form{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-bottom:10px}.chord-controls form label{display:flex;align-items:center;gap:8px;font-size:0.75rem}.chord-controls input{min-width:0;width:180px;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text)}.chord-controls input[aria-invalid=true]{border-color:var(--danger)}#chord-notice{font-size:0.75rem;color:var(--textMuted);margin-top:8px}#chord-notice:empty{display:none}.chord-controls select{max-width:100%}.chord-panel{padding:16px}.chord-panel p{font-size:0.75rem;color:var(--textMuted);margin:8px 0}.chord-panel>button{width:100%}#lookup-diagram{max-width:220px;margin:8px auto}#lookup-diagram svg{width:100%;height:auto;display:block}.string-table{width:100%;font-size:0.6875rem;border-collapse:collapse;margin-top:12px;text-align:left}.string-table th,.string-table td{padding:6px 3px;border-bottom:1px solid var(--line);white-space:nowrap}.string-table th{font-weight:500;color:var(--textMuted)}.chord-panel .source-details button{font-size:0.6875rem;margin:4px 0;padding:6px}.performing .chord-panel,.performing .chord-controls{display:none!important}@media(max-width:600px){.chord-controls{padding:10px}.chord-controls .learning-controls{gap:8px}.chord-controls .learning-controls label{width:100%}.chord-controls select{flex:1;min-width:0}.chord-panel{padding:12px}}

/* PM16: paired scale names/degrees; small explanation stays opt-in. */
#scale-list{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0}
#scale-list span{white-space:nowrap}
#scale-list .scale-tonic{color:var(--root);font-weight:700;border-bottom:2px solid currentColor}
.scale-steps{font-size:0.8125rem;color:var(--textMuted);margin:6px 0}
#scale-teaching p{line-height:1.65;margin:8px 0;overflow-wrap:anywhere}
#scale-teaching .learning-controls{flex-wrap:wrap}
#scale-teaching{margin:8px 0}


.ear-panel{max-width:960px;padding:24px}.ear-panel>p{line-height:1.7}.ear-panel .learning-actions{flex-wrap:wrap;margin:16px 0}.ear-reveal{display:flex;flex-wrap:wrap;gap:24px}.ear-reveal section{flex:1 1 220px;min-width:0}.ear-reveal svg{max-width:100%;height:auto}.ear-panel select{max-width:100%}
.ear-reveal section>div{max-width:320px}

.sing-panel{max-width:960px;padding:24px}.sing-panel p{line-height:1.7;overflow-wrap:anywhere}.sing-panel .learning-controls,.sing-panel .learning-actions{flex-wrap:wrap;gap:12px}.sing-panel .learning-actions{margin:16px 0}.sing-panel h2{font-size:1.25rem;line-height:1.5;overflow-wrap:anywhere}

/* PM17 consumer shell. Shared SVG/theme/music geometry are not redefined. */
:root{--ui-bg:#f5f3ed;--ui-surface:#fffefa;--ui-ink:#262923;--ui-muted:#65695f;--ui-line:#deded3;--ui-soft:#eeece4;--ui-focus:#315e7f;--ui-good:#226044;--ui-good-bg:#eaf4eb;--ui-bad:#9e3026;--ui-bad-bg:#fff0eb}
body{background:var(--ui-bg);color:var(--ui-ink);font-size:0.9375rem;line-height:1.65}
h1{font-size:1.625rem;font-weight:650;letter-spacing:-.5px}h2{font-size:1.25rem;font-weight:650}h3{font-size:1rem}
button,select,input:not([type=checkbox]):not([type=range]){min-height:44px;font-size:0.875rem;border-color:var(--ui-line);border-radius:8px;background:var(--ui-surface);color:var(--ui-ink)}
button{padding:10px 16px;touch-action:manipulation}button:hover{background:var(--ui-soft)}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
button.primary{background:var(--root);border-color:var(--root);color:var(--root-text)}button.primary:hover{background:var(--root-stroke)}
.topbar{min-height:76px;background:var(--ui-surface);border-color:var(--ui-line);padding:14px 28px;gap:12px}.brand{font-size:1.1875rem}.brand-icon{border-radius:7px}.brand small{font-size:0.625rem;letter-spacing:1.2px;color:var(--ui-muted)}.edition{display:block;font-size:0.75rem;color:var(--ui-muted);margin-right:24px}.topbar #performance-toggle:disabled{display:none}
.app-shell{max-width:1440px;grid-template-columns:180px minmax(0,1fr);gap:28px;padding:28px}
.mode-nav{gap:24px;top:24px}.nav-section{display:flex;flex-direction:column;gap:6px}.nav-label{font-size:0.75rem;font-weight:650;color:var(--ui-muted);padding:0 14px 6px}.nav-section+.nav-section{border-top:1px solid var(--ui-line);padding-top:20px}
.mode-nav button{font-size:0.9375rem;text-align:left;padding:10px 14px;border-radius:8px}.mode-nav button[aria-pressed=true]{background:var(--ui-surface);border-color:var(--ui-line);color:var(--root);font-weight:700;box-shadow:inset 3px 0 var(--root)}
.panel{background:var(--ui-surface);border-color:var(--ui-line);border-radius:12px}.lab,.caged,.chord-panel,.circle-panel{padding:24px}.workspace{gap:20px;grid-template-columns:minmax(0,1fr) 300px}
.panel-heading{align-items:center;margin-bottom:20px}.page-caption,.page-heading>p{font-size:0.875rem;color:var(--ui-muted);margin-top:8px}.lab[data-board-mode=learn] .panel-heading{display:flex}
.toolbar{gap:16px;padding:16px 0;border-color:var(--ui-line);font-size:0.875rem}.toolbar select,.learning-controls select,.task-switch select{font-size:0.875rem;padding:8px 12px}.learning-controls,.task-switch{font-size:0.875rem}.learning-controls span{font-size:0.8125rem}
.segmented{background:var(--ui-soft);border-color:var(--ui-line);border-radius:8px}.segmented button{padding:8px 14px}.segmented button[aria-pressed=true]{color:var(--root);background:var(--ui-surface)}
.audio-controls{font-size:0.75rem;color:var(--ui-muted);gap:12px;padding:4px 0 12px}.audio-label{font-size:0.75rem}#audio-retry{font-size:0.8125rem;padding:8px 12px}.board-scroll{border-radius:8px}.neck-nav{font-size:0.75rem;margin:8px 0 20px}
.feedback-area{padding-top:20px;border-color:var(--ui-line);gap:20px}.note-inspector{padding-left:16px}#note-detail strong{font-size:1.875rem}#note-detail>span{font-size:0.875rem}#note-detail small,.note-technical{font-size:0.75rem}.note-inspector button,.selection-heading button,.note-chip{font-size:0.8125rem;padding:8px 12px}.selection-heading h3{font-size:0.875rem}.selected-notes{gap:8px;padding-top:12px}
.learning-task,.scale-panel,.chord-controls{padding:18px;background:var(--ui-bg);border-color:var(--ui-line);border-radius:8px;margin-bottom:16px}.learning-task h3,.scale-panel h3{font-size:1.125rem;margin:12px 0 8px}.learning-actions{gap:10px}.learning-actions button{font-size:0.875rem;padding:10px 16px}#learning-feedback{font-size:0.875rem;margin:8px 0 16px}.source-details{font-size:0.8125rem;color:var(--ui-muted);margin-top:16px}.source-details summary{padding:10px 0;min-height:44px}.source-details p{font-size:0.8125rem;line-height:1.7}
.scale-panel>p{font-size:0.9375rem;margin:8px 0}.scale-steps{font-size:0.875rem}#scale-list{gap:8px 16px}.scale-tonic{border-color:var(--root)}
.chord-controls form label{font-size:0.875rem}.chord-controls input{padding:8px 12px}.chord-panel p,.aside-description,.try-card p{font-size:0.875rem;line-height:1.65}.string-table{font-size:0.8125rem}.string-table td,.string-table th{padding:8px 4px;border-color:var(--ui-line)}.shape-actions button,.chord-panel .source-details button{font-size:0.8125rem}.shapes button{min-width:0}.shape-caption{font-size:0.8125rem;flex-wrap:wrap}.try-card{border-color:var(--ui-line)}
.circle-heading p{font-size:0.875rem;color:var(--ui-muted)}.circle-neighbors button{font-size:0.875rem}.circle-node{padding:0;border-radius:50%;font-size:0.75rem}.circle-node.minor{font-size:0.6875rem}
.ear-panel,.sing-panel{max-width:none;padding:28px}.ear-panel>p,.sing-panel>p{color:var(--ui-muted)}.page-heading{margin-bottom:24px}.ear-types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.ear-types button{flex:1 1 110px;padding:10px 12px;font-weight:550;background:transparent}.ear-types button[aria-pressed=true]{background:var(--root-soft);border-color:var(--root);color:var(--root);font-weight:700}
.ear-listening{padding:20px;background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:10px}.section-label{font-size:0.75rem;font-weight:650;color:var(--ui-muted)}.ear-listening h2{margin:6px 0 8px;font-size:1.375rem}.ear-listening #ear-domain{font-size:0.875rem;color:var(--ui-muted)}.ear-listening .learning-actions{margin:18px 0 12px}.ear-listening #ear-feedback{font-size:0.875rem;min-height:24px}
.ear-answer-heading{margin:24px 0 16px}.ear-answer-heading h2{font-size:1.0625rem}.ear-answer-heading p{font-size:0.875rem;color:var(--ui-muted);margin-top:6px}.ear-answer-slots{display:grid;gap:20px}.ear-answer-slots fieldset{margin:0;min-width:0;padding:0;border:0}.ear-answer-slots legend{font-size:0.875rem;font-weight:650;margin-bottom:10px}.ear-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ear-panel[data-ear-type=note] .ear-options{grid-template-columns:repeat(7,minmax(0,1fr))}.ear-panel[data-ear-type=quality] .ear-options{grid-template-columns:repeat(3,minmax(0,1fr))}.ear-panel[data-ear-type=dictation2] .ear-answer-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.ear-panel[data-ear-type=dictation3] .ear-answer-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.ear-panel[data-ear-type^=dictation] .ear-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.ear-option{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border:1px solid var(--ui-line);line-height:1.35}.answer-label{font-size:1.25rem;font-weight:650}.ear-panel[data-ear-type=note] .answer-label{font-size:1.625rem}.ear-panel[data-ear-type=quality] .answer-label{font-size:1.0625rem}.answer-mark{font-size:0.75rem;font-weight:550;min-height:16px}.ear-option[aria-pressed=true]{border-color:var(--root);box-shadow:inset 0 0 0 1px var(--root);background:var(--root-soft)}
.ear-option:disabled{opacity:1;color:var(--ui-muted);background:var(--ui-bg)}.ear-option.is-correct:disabled{border-color:var(--ui-good);background:var(--ui-good-bg);color:var(--ui-good);box-shadow:inset 0 0 0 1px var(--ui-good)}.ear-option.is-wrong:disabled{border-color:var(--ui-bad);background:var(--ui-bad-bg);color:var(--ui-bad);box-shadow:inset 0 0 0 1px var(--ui-bad)}.ear-slot-feedback{font-size:0.8125rem;margin-top:10px;line-height:1.7}.ear-slot-feedback:empty{display:none}.ear-final-actions{margin:20px 0 0!important}#ear-explanation{border-top:1px solid var(--ui-line);padding-top:8px}.ear-reveal{gap:24px;margin-top:12px}.ear-reveal p{font-size:0.875rem;color:var(--ui-muted)}
.sing-panel h1{margin-bottom:8px}.sing-panel .learning-controls{padding:18px;background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:8px;margin-top:20px}.sing-panel #sing-sequence{margin:20px 0 8px}.sing-panel #sing-target{font-size:1.375rem}.sing-panel #sing-feedback{color:var(--ui-ink);font-size:1rem;padding:14px 16px;background:var(--ui-bg);border-left:0;border-radius:4px;margin:12px 0}
@media(max-width:1100px){.app-shell{grid-template-columns:1fr;padding:20px;gap:20px}.mode-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;position:static;gap:8px;min-width:0}.nav-section{display:contents}.nav-label{display:none}.nav-section+.nav-section{border:0;padding:0}.mode-nav button{flex:0 0 auto;padding:10px 14px;font-size:0.875rem}.mode-nav button[aria-pressed=true]{box-shadow:none}.workspace{grid-template-columns:1fr}.ear-panel[data-ear-type^=dictation] .ear-answer-slots{grid-template-columns:1fr}.ear-panel[data-ear-type^=dictation] .ear-options{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.ear-panel[data-ear-type=note] .ear-options{grid-template-columns:repeat(4,minmax(0,1fr))}.ear-panel[data-ear-type=quality] .ear-options{grid-template-columns:repeat(2,minmax(0,1fr))}.edition{display:none}}
@media(max-width:600px){.topbar{min-height:64px;padding:10px;gap:8px;flex-wrap:nowrap}.brand{font-size:0.9375rem;gap:8px}.brand-icon{width:28px;height:28px;font-size:1.4375rem}.topbar button{font-size:0.75rem;padding:8px}.app-shell{padding:16px 10px;gap:16px}.mode-nav button{font-size:0.875rem;padding:10px 12px}.lab,.caged,.chord-panel,.circle-panel{padding:16px}.ear-panel,.sing-panel{padding:18px 16px}.panel-heading{margin-bottom:16px}h1{font-size:1.4375rem}.toolbar{font-size:0.8125rem;gap:10px}.learning-task,.scale-panel,.chord-controls{padding:14px}.feedback-area{grid-template-columns:1fr}.neck-nav{font-size:0.6875rem;gap:8px}.page-caption{font-size:0.8125rem}.ear-types{gap:6px;margin-bottom:18px}.ear-types button{font-size:0.8125rem}.ear-listening{padding:16px}.ear-listening h2{font-size:1.25rem}.ear-option{padding:10px 4px;min-height:84px}.answer-mark{font-size:0.6875rem}.ear-options{gap:8px}.ear-listening .learning-actions button{flex:1 1 auto;padding:10px 12px}.ear-panel[data-ear-type=name] .ear-options{grid-template-columns:repeat(2,minmax(0,1fr))}.sing-panel #sing-target{font-size:1.25rem}.circle-ring{min-width:328px}.source-details{font-size:0.75rem}}
@media(orientation:landscape) and (max-height:450px) and (max-width:950px){.topbar{min-height:64px;padding:10px 16px}.app-shell{padding:12px 10px;gap:12px}.mode-nav{gap:8px;flex-wrap:nowrap}.mode-nav button{font-size:0.8125rem;padding:8px 12px}.lab{padding:16px}.panel-heading{display:flex}.lab[data-board-mode=learn] .panel-heading{display:flex}.toolbar{padding:12px 0}.ear-panel,.sing-panel{padding:20px}.workspace{grid-template-columns:1fr!important}#board svg{width:614px!important;max-width:614px}.performing .mode-nav,.performing .panel-heading{display:none}}

@media(max-width:400px){.ear-panel[data-ear-type=note] .ear-options{grid-template-columns:repeat(3,minmax(0,1fr))}.ear-panel[data-ear-type^=dictation] .ear-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.answer-mark{white-space:pre;min-height:32px}
.challenge-panel{padding:28px;min-width:0}.challenge-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}.challenge-kinds button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:16px;gap:6px}.challenge-kinds span{font-size:0.8125rem;color:var(--ui-muted)}.challenge-kinds [aria-pressed=true]{border-color:var(--root);background:var(--root-soft);color:var(--root)}
.challenge-settings{display:flex;flex-wrap:wrap;gap:12px 18px}.challenge-settings label{display:flex;flex-direction:column;gap:6px;font-size:0.8125rem;flex:1 1 130px;min-width:0}.challenge-settings select{width:100%;min-width:0;min-height:44px}.challenge-config-note,.challenge-board-help{font-size:0.8125rem;color:var(--ui-muted);line-height:1.7;margin:14px 0}.challenge-task{padding:20px;background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:10px;margin:20px 0}.challenge-task h2{font-size:1.4375rem;margin:8px 0 12px;overflow-wrap:anywhere}.challenge-task p{font-size:0.875rem;line-height:1.7}.challenge-task .learning-actions{margin-top:16px}#challenge-board{min-width:614px}#challenge-board svg{display:block;max-width:none;width:614px!important;height:230px!important}
#challenge-board [role=button]{cursor:pointer}#challenge-board .is-hidden-note circle{opacity:0}#challenge-board .is-hidden-note:hover circle,#challenge-board [role=button]:focus-visible circle,#challenge-board .is-selected circle{opacity:1}#challenge-board .is-selected circle{stroke:var(--root);stroke-width:3}#challenge-board [role=button]:focus-visible{outline:none}#challenge-board [role=button]:focus-visible circle{stroke:var(--text);stroke-width:4}#challenge-board .is-outside-range .hit-target{fill:var(--ui-muted);opacity:.05}#challenge-pan{width:100%;min-height:44px;margin-top:8px}#challenge-review{border-top:1px solid var(--ui-line);padding-top:20px}#challenge-results{padding-left:22px;font-size:0.875rem;line-height:1.8}#challenge-results li+li{margin-top:8px}
@media(max-width:600px){.challenge-panel{padding:18px 16px}.challenge-kinds{grid-template-columns:1fr;gap:6px;margin-bottom:18px}.challenge-kinds button{flex-direction:row;align-items:center;justify-content:space-between;padding:12px;gap:8px}.challenge-kinds span{font-size:0.6875rem}.challenge-settings{gap:10px}.challenge-settings label{flex:1 1 100px}.challenge-task{padding:16px}.challenge-task h2{font-size:1.25rem}.challenge-task .learning-actions button{flex:1 1 auto}}
.challenge-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.challenge-settings label{min-width:0}
@media(max-width:600px){.challenge-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* PM21: operation layers carry glass; musical content keeps a stable solid surface. */
:root{--ui-bg:#f6f5f0;--ui-surface:#fffefa;--ui-line:#e2e1d8;--ui-glass:rgba(255,254,250,.82);--ui-ease:cubic-bezier(.16,1,.3,1)}
::selection{background:var(--root-soft);color:var(--ui-ink)}
html{scrollbar-color:var(--ui-line) var(--ui-bg)}
input,textarea{caret-color:var(--root)}
a{text-underline-offset:4px}a:focus-visible,summary:focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
h1{font-size:1.75rem;letter-spacing:-.02em;line-height:1.3;text-wrap:balance}h2{line-height:1.4;text-wrap:balance}
p{max-width:75ch}.page-heading{margin-bottom:20px}.page-heading>p{margin-top:6px}
button{transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease,transform 120ms ease}
button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.55}
button.primary{font-weight:600}select,input:not([type=checkbox]):not([type=range]){padding:8px 12px}
summary{min-height:44px;cursor:pointer;line-height:1.5;padding:12px 0;touch-action:manipulation}
.topbar{position:sticky;top:0;z-index:20;min-height:72px;background:var(--ui-surface);padding:12px 28px}
.topbar button{background:transparent}.brand small{margin-top:3px}.edition{margin-right:12px}
.app-shell{padding:24px 28px 40px;gap:24px;grid-template-columns:184px minmax(0,1fr)}
.mode-nav{top:96px;padding:12px 8px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:16px;gap:0;max-height:calc(100vh - 120px);overflow-y:auto}
.mode-nav #mode-menu>summary,.challenge-shortcut{display:none}
.nav-section{gap:4px}.nav-label{padding:8px 12px;color:var(--ui-muted)}.nav-section+.nav-section{margin-top:12px;padding-top:12px}
.mode-nav button{padding:10px 12px;min-height:44px;font-size:0.875rem;box-shadow:none}
.mode-nav button[aria-pressed=true]{box-shadow:none;background:var(--root-soft);color:var(--root);border-color:transparent}
.panel{border-radius:16px}.lab,.caged,.chord-panel,.circle-panel{padding:24px}.workspace{gap:20px}
.panel-heading{gap:16px;align-items:start}.page-caption{margin-top:6px}.toolbar{gap:12px;padding:12px 0}
.segmented{background:var(--ui-surface);padding:3px;border-radius:10px}.segmented button{background:transparent}
.board-surface,.ear-options,.challenge-task{background:var(--ui-surface)}
.learning-task,.scale-panel,.chord-controls{background:transparent;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;padding:4px 0 20px;margin-bottom:20px}
.learning-controls{gap:12px}.learning-task h3,.scale-panel h3{margin-top:16px}
.note-inspector{border-left:0;padding-left:0}.sing-panel #sing-feedback{border-left:0;border:1px solid var(--ui-line);border-radius:8px}
.try-card>.eyebrow{display:none}.source-details{margin-top:16px}.source-details summary{padding:12px 0}
.ear-panel,.sing-panel,.challenge-panel{padding:28px}.ear-types{gap:4px;background:var(--ui-bg);padding:4px;border-radius:12px;margin-bottom:20px}
.ear-types button{border-color:transparent}.ear-types button[aria-pressed=true]{background:var(--ui-surface);border-color:var(--ui-line)}
.ear-listening{background:transparent;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;padding:0 0 20px}
.ear-listening .section-label{display:none}.ear-listening h2{margin:0 0 8px}.ear-answer-heading{margin-top:20px}
.answer-label,.answer-mark,#challenge-progress,#challenge-summary{font-variant-numeric:tabular-nums}
.challenge-kinds{gap:0;background:var(--ui-bg);padding:4px;border-radius:12px;margin-bottom:16px}
.challenge-kinds button{border-color:transparent;background:transparent;border-radius:9px;padding:10px 14px;gap:2px}
.challenge-kinds button[aria-pressed=true]{background:var(--ui-surface);border-color:var(--ui-line);color:var(--root)}
.challenge-kinds strong{font-size:0.9375rem;font-weight:650}.challenge-kinds span{font-size:0.75rem}
.challenge-settings{display:block;padding:8px 0 12px}
.challenge-basics{display:grid;grid-template-columns:.7fr 1.4fr 1fr;gap:12px}
.challenge-advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:8px 0}
.challenge-config{border-bottom:1px solid var(--ui-line)}.challenge-config>summary{font-size:0.875rem;font-weight:600}
#challenge-config-summary{color:var(--ui-muted);font-size:0.8125rem;font-weight:400;margin-left:12px;overflow-wrap:anywhere}
#challenge-advanced{margin-top:6px}#challenge-advanced>summary{font-size:0.8125rem;color:var(--ui-muted)}
.challenge-config-note{margin:4px 0 0;font-size:0.75rem}
.challenge-task{padding:20px 0 8px;border:0;border-radius:0;margin:0}
.challenge-task h2{font-size:1.625rem;margin:12px 0 8px;line-height:1.4}
.challenge-task p{font-size:0.8125rem}.challenge-task .learning-actions{margin-top:14px;gap:8px}
.challenge-progress-row{display:flex;align-items:center;gap:16px;justify-content:space-between}
#challenge-progress{font-size:0.8125rem;color:var(--ui-muted)}
#challenge-steps{display:flex;gap:5px;padding:0;margin:0;list-style:none;max-width:240px;flex:1}
#challenge-steps li{position:relative;height:6px;flex:1;overflow:hidden;background:var(--ui-line);border-radius:3px}
#challenge-steps li::before{content:"";display:block;position:absolute;inset:0;background:var(--ui-good);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ui-ease)}
#challenge-steps [data-state=complete]::before{transform:scaleX(1)}
#challenge-steps [data-state=current]{background:var(--root-soft);outline:1px solid var(--root);outline-offset:-1px}
#challenge-feedback:empty{display:none}#challenge-feedback:not(:empty){margin-top:10px;padding:10px 12px;background:var(--ui-bg);border-radius:8px;color:var(--ui-ink)}
.challenge-panel[data-phase=correct] #challenge-feedback{background:var(--ui-good-bg);color:var(--ui-good)}
.challenge-panel[data-phase=wrong] #challenge-feedback{background:var(--ui-bad-bg);color:var(--ui-bad)}
.challenge-board-help{margin:8px 0 4px;font-size:0.75rem}#challenge-pan{margin-top:4px;accent-color:var(--root)}
#challenge-review{padding-top:16px;border-top:0}#challenge-review h2{font-size:1.25rem;margin-bottom:8px}
#challenge-summary{font-size:0.875rem}#challenge-results{padding-left:24px;margin:16px 0 20px}#challenge-results li+li{margin-top:6px}
.challenge-panel[data-phase=summary] #challenge-rule{display:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .topbar,.mode-nav{background:var(--ui-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 .segmented{background:rgba(255,254,250,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}
@media(max-width:1100px){
 .app-shell{grid-template-columns:1fr;gap:16px;padding:20px}.workspace{grid-template-columns:1fr}
 .mode-nav{position:relative;top:auto;overflow:visible;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border-radius:14px;z-index:15}
 .challenge-shortcut{display:flex!important;align-items:center;justify-content:space-between;gap:8px;background:var(--root-soft)!important;color:var(--root)!important;font-weight:650}
 .challenge-shortcut span{font-size:0.75rem;font-weight:400}.mode-nav #mode-menu>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;font-size:0.875rem;list-style:none}
 #mode-menu>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:4px;flex-shrink:0}
 #mode-menu[open]>summary::after{transform:rotate(225deg)}#current-mode-label{font-size:0.75rem;color:var(--ui-muted);margin-left:auto}
 #mode-menu>.nav-section{position:absolute;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:12px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;gap:6px;z-index:16}
 #mode-menu>.nav-section:first-of-type{top:60px;border-bottom:0;border-radius:12px 12px 0 0}
 #mode-menu>.nav-section+.nav-section{top:128px;margin-top:0;border-top:0;border-radius:0 0 12px 12px}
 .nav-label{display:none}.mode-nav .nav-section button{text-align:center;white-space:normal}
}
@media(max-width:600px){
 .topbar{padding:10px 12px;min-height:64px;gap:8px;flex-wrap:wrap}.brand{font-size:0.9375rem}.brand-icon{width:28px;height:28px}.topbar button{font-size:0.75rem}.topbar #performance-toggle{padding:8px}
 .app-shell{padding:12px 10px 28px;gap:12px}.mode-nav{gap:4px;padding:4px}.mode-nav button{padding:10px;font-size:0.8125rem}
 .mode-nav #mode-menu>summary{padding:10px;font-size:0.8125rem;gap:4px}.challenge-shortcut span{font-size:0.6875rem}#current-mode-label{display:none}
 #mode-menu>.nav-section{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px;gap:4px}
 #mode-menu>.nav-section:first-of-type{top:56px}#mode-menu>.nav-section+.nav-section{top:164px}
 h1{font-size:1.5rem}.lab,.caged,.chord-panel,.circle-panel,.ear-panel,.sing-panel,.challenge-panel{padding:18px 16px}
 .page-heading{margin-bottom:16px}.page-heading>p{font-size:0.8125rem}.toolbar{gap:8px}.legend{display:none}
 .challenge-kinds{grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;margin-bottom:12px}
 .challenge-kinds button{justify-content:center;align-items:center;padding:10px 4px}.challenge-kinds strong{font-size:0.8125rem}.challenge-kinds span{display:none}
 .challenge-basics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.challenge-basics label:last-child{grid-column:1/-1}
 .challenge-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #challenge-config-summary{display:block;margin-left:16px;font-size:0.75rem}.challenge-config>summary{padding:8px 0}
 .challenge-task{padding-top:16px}.challenge-task h2{font-size:1.4375rem;margin-top:10px}.challenge-task .learning-actions button{flex:1 1 auto;padding:10px 12px}
 #challenge-steps{max-width:120px}.challenge-progress-row{gap:10px}.challenge-board-help{font-size:0.6875rem}
 .challenge-panel:is([data-phase=answer],[data-phase=wrong],[data-phase=correct],[data-phase=reference]) .page-heading>p{display:none}
 .challenge-panel:is([data-phase=answer],[data-phase=wrong],[data-phase=correct],[data-phase=reference]) .page-heading{margin-bottom:12px}
 .neck-nav{flex-wrap:wrap}.circle-ring{min-width:328px}
}
@media(prefers-reduced-transparency:reduce){.topbar,.mode-nav,.segmented{background:var(--ui-surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){
 .topbar,.mode-nav,.segmented,.panel{background:Canvas;color:CanvasText;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:CanvasText}
 button[aria-pressed=true]{outline:2px solid Highlight}.challenge-shortcut{background:Canvas!important;color:CanvasText!important}
 #challenge-steps li{background:Canvas;border:1px solid CanvasText}#challenge-steps [data-state=complete]::before{background:Highlight}#challenge-steps [data-state=current]{outline:2px solid Highlight}
}
@media(prefers-reduced-motion:reduce){button,#challenge-steps li::before{transition:none}.topbar,.mode-nav{scroll-behavior:auto}}

/* One bounded inspection repair: prepare with controls; reveal the board when there is a question. */
.challenge-panel:is([data-phase=setup],[data-phase=closed]) #challenge-board-wrap,
.challenge-panel:is([data-phase=setup],[data-phase=closed]) .challenge-progress-row{display:none}
.challenge-task{background:transparent}
.challenge-basics{grid-template-columns:.7fr 1.4fr}
.challenge-basics label:last-child{grid-column:auto}
.challenge-shortcut span,.challenge-board-help{font-size:0.75rem}
.challenge-panel:is([data-phase=setup],[data-phase=closed]) .challenge-task h2{font-size:1.25rem;margin-top:0}
.selection-heading h2{font-size:0.875rem;font-weight:500}.selection-heading h2 span{color:var(--tone);margin-left:4px}
.circle-info h2{font-size:1.375rem}.learning-task h2,.scale-panel h2{font-size:1.125rem;margin:16px 0 8px}
.rule{border-left:0;padding-left:0}
@media(max-width:600px){.circle-info h2{font-size:1.25rem}.challenge-shortcut span{font-size:0.75rem}.challenge-basics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* PM-APP-23: bounded challenge refinements; main content stays on the solid surface. */
.challenge-ranges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.challenge-ranges button{min-height:44px;padding:9px 12px;font-size:0.8125rem}
.challenge-ranges [aria-pressed=true]{color:var(--root);background:var(--root-soft);border-color:var(--root)}
.challenge-panel:is([data-phase=answer],[data-phase=wrong],[data-phase=correct],[data-phase=reference]) #challenge-prompt{font-size:2.25rem;line-height:1.25;font-weight:700;color:var(--root);margin:14px 0 10px;max-width:30ch}
#challenge-prompt{scroll-margin-top:88px}
#challenge-range{color:var(--ui-muted);font-size:0.8125rem;margin-bottom:10px}
#challenge-range:empty{display:none}
#challenge-sequence{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0;margin:10px 0 12px;list-style:none;font-size:0.8125rem}
#challenge-sequence [data-state=complete]{color:var(--ui-good)}
#challenge-sequence [data-state=current]{color:var(--root);font-weight:650;text-decoration:underline;text-underline-offset:4px}
#challenge-actions{margin:16px 0 20px;gap:8px}
#challenge-actions button{scroll-margin-top:88px;scroll-margin-bottom:16px}
#challenge-review-next{font-size:0.875rem;line-height:1.7;margin:12px 0;color:var(--ui-ink);max-width:70ch}
@media(max-width:600px){
 .challenge-ranges{gap:6px;margin-top:12px}.challenge-ranges button{flex:1 1 110px;font-size:0.75rem;padding:9px 8px}
 .challenge-panel:is([data-phase=answer],[data-phase=wrong],[data-phase=correct],[data-phase=reference]) #challenge-prompt{font-size:1.75rem;margin-top:12px}
 #challenge-actions button{flex:1 1 auto;padding:10px 12px}
}
/* PM-APP-22: native settings, within the existing operation surface. */
.practice-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem;margin:1.25rem 0;}
.practice-settings label{display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.practice-settings select{width:100%;min-width:0;min-height:44px;font:inherit;}
.practice-history button{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;margin:.5rem 0;min-height:44px;}
.practice-history p{overflow-wrap:anywhere;}
.practice-advanced{grid-column:1/-1;}
@media(max-width:600px){
 #ear-bank-settings,#sing-bank-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;}
 #ear-bank-settings>label:last-of-type,#sing-bank-settings>label:last-of-type{grid-column:1/-1;}
 .practice-advanced{margin-top:0;}
 .ear-panel[data-ear-type=progression] .ear-options{grid-template-columns:repeat(2,minmax(0,1fr));}
 .ear-panel[data-ear-type=progression] .answer-label{font-size:1rem;overflow-wrap:anywhere;}
}

/* PM-APP-24: approved four-entry Web shell; frozen geometry stays full size. */
body{font-size:1rem}
.shell-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.shell-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.shell-tabs{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.shell-tabs button{display:flex;align-items:center;gap:12px;min-height:48px}
.mode-nav{overflow:visible;max-height:none}
.mode-nav #challenge-shortcut{display:none!important}
.mode-nav #mode-menu>summary{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;padding:12px}
.mode-nav #mode-menu>.nav-section{position:static;grid-template-columns:1fr;background:transparent;border:0;border-radius:0}
.shell-context{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;color:var(--ui-muted);font-size:.875rem}
.shell-context button{background:transparent;border-color:transparent;padding-left:0;min-height:44px;color:var(--root)}
.home-panel,.records-panel{padding:28px;background:var(--ui-surface)}
.home-panel h1{font-size:2rem;margin:0 0 6px}.home-intro{color:var(--ui-muted);margin-bottom:24px}
.home-current{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:18px;padding:20px 0;border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line)}
.home-current h2{font-size:1.375rem}.home-current p{color:var(--ui-muted);font-size:.875rem;margin:8px 0 14px}.home-current button{min-height:48px;padding:10px 24px}
#home-board-preview{min-width:0;overflow:hidden;height:92px}#home-board-preview svg{display:block;width:380px;height:142px;transform-origin:left top;transform:scale(.65);pointer-events:none}
.home-state{font-size:.75rem;color:var(--ui-muted);margin-top:10px}.home-play-title{font-size:1.375rem;margin:28px 0 12px}
.home-play-list{display:flex;flex-direction:column}.home-play-list button{display:flex;align-items:center;gap:18px;text-align:left;min-height:80px;background:transparent;border:0;border-radius:0;border-bottom:1px solid var(--ui-line);padding:12px 0}
.home-play-list .shell-icon{width:28px;height:28px;color:var(--root)}.home-play-list strong,.home-play-list small{display:block}.home-play-list strong{font-size:1rem}.home-play-list small{font-size:.875rem;color:var(--ui-muted);margin-top:4px}
.home-play-list button::after,.home-other button::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-left:auto;flex:none}
.home-other{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin-top:24px}.home-other button{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:64px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;padding:12px 0;font-weight:600}.home-other span{font-size:.75rem;color:var(--ui-muted);font-weight:400}
.records-panel>section{padding:24px 0;border-bottom:1px solid var(--ui-line)}.records-panel>section h2{font-size:1.25rem}.records-panel>section p{margin:12px 0;font-size:.875rem;line-height:1.8}.records-panel>p:last-child{font-size:.75rem;margin-top:24px;color:var(--ui-muted)}
.wood-fretboard .wood-neck{display:block}.wood-fretboard>line{filter:none}
.wood-fretboard .is-hidden-note circle{opacity:0}.wood-fretboard [role=button]:focus-visible circle{stroke:var(--ui-focus);stroke-width:4}
.ear-options[data-option-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ear-options[data-option-count="4"] .ear-option{min-height:76px}.ear-options[data-option-count="4"] .answer-label{font-size:1.5rem}
#home-title,#records-title,#shell-current{scroll-margin-top:88px}
.challenge-panel #challenge-actions button,.ear-panel button,.sing-panel button{scroll-margin-bottom:100px}
@media(max-width:1100px){
 .app-shell{grid-template-columns:1fr;padding:16px 16px calc(100px + env(safe-area-inset-bottom,0px));gap:12px}
 .mode-nav{display:block;padding:0;background:transparent;border:0;border-radius:0;z-index:18}
 .shell-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;flex-direction:row;justify-content:space-around;gap:4px;margin:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ui-surface);border-top:1px solid var(--ui-line)}
 .shell-tabs button{flex:1;flex-direction:column;justify-content:center;gap:4px;font-size:.75rem;padding:6px;min-height:58px;border-radius:10px;text-align:center}
 .mode-nav #mode-menu>summary{padding:4px 2px;font-size:.8125rem;max-width:200px;min-height:44px}.mode-nav #mode-menu>.nav-section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px 0}
 .home-panel,.records-panel{padding:24px 18px}.home-other{grid-template-columns:1fr}.home-current{grid-template-columns:minmax(0,1fr) 110px;gap:8px}
 #home-board-preview{height:90px}#home-board-preview svg{transform:scale(.7);width:270px}
 .shell-context{margin-bottom:10px}.home-panel h1{font-size:2rem}.home-current h2{font-size:1.25rem}
 .challenge-panel #challenge-prompt{scroll-margin-top:88px}.challenge-panel #challenge-actions button{scroll-margin-bottom:100px}
}
@media(max-width:360px){.home-current{grid-template-columns:1fr}#home-board-preview{display:none}.home-panel,.records-panel{padding:22px 16px}.home-play-list button{gap:14px}.home-other span{flex-basis:100%}}
@media(orientation:landscape) and (max-height:550px){.topbar{position:relative}.app-shell{padding-bottom:90px}.shell-tabs button{min-height:44px;flex-direction:row}.shell-tabs{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}}
@supports(backdrop-filter:blur(12px)){.shell-tabs{background:var(--ui-glass);backdrop-filter:blur(12px)}}
@media(prefers-reduced-transparency:reduce){.shell-tabs{background:var(--ui-surface);backdrop-filter:none}}
@media(prefers-contrast:more){.shell-tabs{background:var(--ui-surface)}}
@media(forced-colors:active){.wood-fretboard [data-consumer-skin]{display:none}.wood-fretboard>line{stroke:CanvasText!important}.shell-tabs{background:Canvas;backdrop-filter:none}.shell-tabs [aria-current=page]{outline:2px solid Highlight}}

/* PM-APP-25: outside fret-cell numbers, independent of musical labels. */
.wood-fretboard [data-fret-label]{font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--ui-surface);stroke-width:1px}
@media(forced-colors:active){.wood-fretboard [data-fret-label]{fill:CanvasText;stroke:Canvas}}

/* PM-APP-24: first inspection repair, remove fixed-position containing block. */
.mode-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
main :is(h1,h2,[tabindex],button,select,summary){scroll-margin-top:var(--shell-top-offset,88px)!important;scroll-margin-bottom:var(--shell-bottom-offset,100px)!important}
main p,main h1,main h2,main small,main button{overflow-wrap:anywhere}
.learning-controls label,.chord-controls form label{min-width:0;max-width:100%;flex-wrap:wrap}
.learning-controls select,.chord-controls select,.chord-controls input{max-width:100%;min-width:0}
.chord-controls form label{flex:1 1 180px}.chord-controls input{width:100%}
.note-inspector,.panel-heading,.chord-tones,.shape-actions{flex-wrap:wrap}
.answer-mark{white-space:pre-wrap}
.topbar{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-top:max(12px,env(safe-area-inset-top,0px))}
@media(max-width:1100px){
 .app-shell{padding-bottom:calc(var(--shell-bottom-offset,100px) + 24px)}
 .mode-nav #mode-menu>.nav-section{display:grid;top:auto;margin:0;border:0;padding:4px 0;border-radius:0}
 .shell-tabs{left:0;right:0;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
 .shell-tabs button{flex:1 1 0;min-width:0;white-space:normal}
 .ear-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .circle-content{min-width:0}.circle-info{min-width:0}
}

/* PM-APP-19: isolated experiment, existing shell and fret material preserved. */
.guitar-experiment{margin-top:24px;padding-top:16px;border-top:1px solid var(--ui-line);font-size:.875rem}
.guitar-experiment>summary{min-height:44px;cursor:pointer;font-weight:600}
.guitar-experiment p{margin:12px 0;line-height:1.7;overflow-wrap:anywhere}
.guitar-experiment .learning-actions{margin:16px 0;gap:8px}
.guitar-experiment button{min-height:44px}
.guitar-experiment pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font-size:.75rem;background:var(--ui-bg);padding:12px}

/* PM-APP-26: main chord action precedes optional full-board exploration in DOM. */
.lab[data-board-mode=chord] .chord-panel{padding:16px 0 24px;border:0;background:transparent}
.lab[data-board-mode=chord] .chord-panel>button{width:auto;min-width:180px;min-height:48px}
.lab[data-board-mode=chord] .chord-panel>button{align-self:start;justify-self:start}
.lab[data-board-mode=chord] #lookup-diagram{max-width:210px;margin:12px 0}
.board-secondary>summary{min-height:44px;padding:12px 0;font-weight:600;color:var(--ui-ink)}
.lab[data-board-mode=chord] .board-secondary{border-top:1px solid var(--ui-line)}
.records-panel details{margin:12px 0 20px;color:var(--ui-muted);font-size:.875rem}
.records-panel details>summary{min-height:44px;padding:10px 0}
.records-panel section>button{margin:8px 12px 0 0;min-height:44px}
@media(min-width:1101px){.lab[data-board-mode=chord] .chord-panel{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:28px;align-items:start}.lab[data-board-mode=chord] #chord-name,.lab[data-board-mode=chord] #chord-summary{grid-column:1/-1}.lab[data-board-mode=chord] #lookup-diagram{grid-column:1;grid-row:3/7}.lab[data-board-mode=chord] #chord-barres,.lab[data-board-mode=chord] #chord-play,.lab[data-board-mode=chord] .string-table,.lab[data-board-mode=chord] #board-audio-controls{grid-column:2}.lab[data-board-mode=chord] .source-details{grid-column:1/-1}}

/* PM-APP-27: material preference and a reversible, naturally oriented board view. */
.board-tools{position:relative;z-index:20;background:var(--ui-surface);display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 0 16px;color:var(--ui-ink);font-size:.875rem}
.board-tools label{display:flex;align-items:center;gap:8px}.board-tools select,.board-tools button{min-height:44px;font-size:.875rem;padding:8px 12px}
.board-tools [role=status]{font-size:.8125rem;color:var(--ui-muted);flex-basis:100%}.board-tools [role=status]:empty{display:none}
.board-tools select{border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-surface);color:var(--ui-ink)}
.guitar-input-level{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.8125rem;margin:8px 0;color:var(--ui-ink)}
.guitar-input-level meter{width:min(140px,35vw);height:14px;accent-color:var(--ui-accent)}
#live-guitar-level-text{font-variant-numeric:tabular-nums}
.wood-fretboard>circle{fill:#666b70}.wood-fretboard .board-string{filter:none}
.wood-grain-image{filter:none;mix-blend-mode:normal}.wood-fretboard [data-nut]{filter:none}
.wood-fretboard .material-fret-crown{filter:drop-shadow(.8px .6px .45px #352b2059)}
.wood-fretboard .material-nut{filter:drop-shadow(1.5px 1px 1.5px #352b2066)}
.wood-fretboard [data-hardware-part=strings]{filter:drop-shadow(0 .65px .35px #352b2052)}
.board-note-visual{transform-box:fill-box;transform-origin:center;pointer-events:none;transition:transform 90ms cubic-bezier(.22,1,.36,1)}
.wood-fretboard .board-touch-ring{opacity:0;color:#71655c;pointer-events:none;transform-box:fill-box;transform-origin:center}
.wood-fretboard .is-touching .board-note-visual{transform:scale(.985)}
.wood-fretboard .is-touch-confirmed .board-touch-ring{opacity:.18}
/* Selection/focus circle rules apply to notes, never to the transient wave. */
:is(#board,#challenge-board) [data-string][data-fret]>.board-touch-ring{opacity:0;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-dasharray:none;vector-effect:non-scaling-stroke}
:is(#board,#challenge-board) [data-string][data-fret].is-touch-confirmed>.board-touch-ring{opacity:.18}
body.board-focused{background:var(--ui-surface)}
.board-focused .topbar,.board-focused .mode-nav,.board-focused .shell-tabs,.board-focused #shell-context{display:none!important}
.board-focused .app-shell{display:block;min-height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.board-focused main{min-width:0}.board-focused .board-tools{position:sticky;top:0;z-index:40;background:var(--ui-surface);padding:4px 0 8px;margin:0;gap:8px}
.board-focused #board-focus-sound:not([hidden]){display:inline-flex}
.board-focused .workspace{grid-template-columns:minmax(0,1fr)!important;gap:0}
.board-focused .lab,.board-focused .challenge-panel{border:0;border-radius:0;padding:4px 0;background:transparent}
.board-focused .panel-heading,.board-focused .page-caption,.board-focused .neck-nav,.board-focused .source-details,.board-focused .source-panel,.board-focused .source-disclosure,.board-focused .scale-teaching,.board-focused .scale-source{display:none!important}
.board-focused .toolbar{margin:0;padding:4px 0 8px;gap:10px}.board-focused .toolbar details{display:none}
.board-focused .toolbar label,.board-focused .toolbar select,.board-focused .toolbar button{min-height:44px}.board-focused .audio-controls{padding:0 0 4px}
.board-focused .board-scroll{max-width:100%;overflow:auto}.board-focused #board,.board-focused #challenge-board{width:614px;min-width:614px;margin-inline:auto}
.board-focused .learning-task,.board-focused .scale-panel{padding:8px;margin:4px 0;border:0;background:transparent}
.board-focused .learning-task>h2{font-size:1rem;margin:4px 0}.board-focused #learning-summary,.board-focused #learning-range-help,.board-focused .learning-source{display:none}
.board-focused .challenge-panel>.panel-heading,.board-focused .challenge-board-help,.board-focused #challenge-rule,.board-focused #challenge-stats,.board-focused #challenge-weak,.board-focused #challenge-config-summary{display:none!important}
.board-focused #challenge-config{margin:4px 0}.board-focused .challenge-task{padding:8px 0;margin:4px 0;border:0;background:transparent}.board-focused .challenge-task h2{font-size:1.125rem;margin:4px 0}.board-focused .challenge-task p{margin:4px 0}.board-focused #challenge-pan{margin:0}
@media(prefers-reduced-motion:reduce){.wood-fretboard .is-touching .board-note-visual{transform:none}.wood-fretboard .is-touch-confirmed .board-touch-ring{opacity:.2}}
@media(prefers-reduced-motion:reduce){.board-note-visual{transition:none}:is(#board,#challenge-board) [data-string][data-fret].is-touch-confirmed>.board-touch-ring{opacity:.2}}
@media(forced-colors:active){.wood-fretboard>circle{fill:CanvasText}.wood-fretboard .board-touch-ring{stroke:Highlight}.board-focused .board-tools{background:Canvas}.board-tools select{background:Canvas;color:CanvasText}}
@media(forced-colors:active){.wood-fretboard [data-material-hardware]{display:none}.wood-fretboard [data-nut]{filter:none}}
@media(forced-colors:active){:is(#board,#challenge-board) [data-string][data-fret]>.board-touch-ring{stroke:Highlight;fill:none}}

.board-focused .feedback-area{padding:8px 0;gap:8px}.board-focused .caged{padding:8px;border:0}.board-focused .caged>p,.board-focused .caged .source-details{display:none}
/* PM-APP-28: keep the playing surface clear; all original hit geometry stays. */
#workspace{grid-template-columns:minmax(0,1fr)}
#caged-panel{margin:12px 0 20px;background:transparent;border:0;padding:0}
#caged-panel .shapes{display:flex;gap:8px;flex-wrap:wrap}
#caged-panel .shapes button{min-width:44px;min-height:44px}
#caged-panel #chord-diagram{max-width:190px;margin:8px 0}
#board .is-empty-position .board-note-visual>circle{fill:none;stroke:none}
#board .is-empty-position:focus-visible .board-note-visual>circle{fill:none;stroke:var(--ui-focus);stroke-width:2}
#challenge-board .is-hidden-note:not(.is-selected):not(:focus-visible) .board-note-visual>circle{fill:none;stroke:none;opacity:0}
.board-focused main :is(h1,h2,[tabindex],button,select,summary){scroll-margin-top:60px!important;scroll-margin-bottom:8px!important}
.board-focused .board-tools{position:relative;flex-wrap:nowrap;min-height:44px;padding:0;margin-bottom:8px}
.board-focused .board-tools label{font-size:0;gap:0}
.board-focused .board-tools label select{font-size:.875rem;max-width:126px}
.board-focused .board-tools [role=status]{flex-basis:auto;max-width:170px;font-size:.75rem}
@media(orientation:landscape) and (min-width:800px) and (max-height:500px){
 .board-focused .app-shell{padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));min-height:100dvh}
 .board-focused .lab,.board-focused .challenge-panel{display:grid;grid-template-columns:614px minmax(160px,1fr);column-gap:12px;align-items:start;padding:0;height:calc(100dvh - 68px)}
 .board-focused #board-context-controls,.board-focused #challenge-context-controls{grid-column:2;grid-row:1;max-height:calc(100dvh - 68px);overflow:auto;overscroll-behavior:contain;padding:0 2px 4px}
 .board-focused #chord-board-details,.board-focused #challenge-board-wrap{grid-column:1;grid-row:1;margin:0;min-width:0}
 .board-focused #board-scroll,.board-focused #challenge-scroll{height:230px;max-height:none;padding:0;overflow:auto}
 .board-focused #board,.board-focused #challenge-board{height:230px}
 .board-focused #selection-feedback{margin:0;padding:4px 0;display:block}
 .board-focused #explore-selection,.board-focused .note-technical,.board-focused #octaves{display:none}
 .board-focused #note-detail{display:flex;gap:8px;align-items:center}
 .board-focused #note-detail strong{font-size:1rem}
 .board-focused #note-detail>span{font-size:.75rem}
 .board-focused .toolbar{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0}
 .board-focused .toolbar .check{font-size:.75rem;margin:0}
 .board-focused .toolbar .segmented{display:flex;flex-wrap:wrap}
 .board-focused .toolbar label{display:flex;flex-wrap:wrap;gap:4px}
 .board-focused .learning-task,.board-focused .scale-panel{padding:0;margin:0}
 .board-focused .learning-controls{display:flex;flex-wrap:wrap;gap:4px}
 .board-focused .learning-actions{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
 .board-focused .learning-actions button{flex:1 1 auto;padding:6px 8px;min-height:44px}
 .board-focused #learning-title,.board-focused #challenge-prompt{font-size:1rem;line-height:1.3;margin:4px 0}
 .board-focused #learning-feedback,.board-focused #challenge-feedback,.board-focused #challenge-range{font-size:.8125rem;line-height:1.4;margin:4px 0}
 .board-focused #scale-list,.board-focused #scale-steps{font-size:.8125rem;margin:4px 0}
 .board-focused #caged-panel{margin:8px 0;padding:0}
 .board-focused #caged-panel .shapes{gap:4px}
 .board-focused #caged-panel .try-card,.board-focused #chord-tones{display:none}
 .board-focused #board-audio-slot{grid-column:1;grid-row:2;margin-top:4px}
 .board-focused #challenge-config{margin:0;font-size:.8125rem}
 .board-focused #challenge-config summary{min-height:44px;padding:8px 0}
 .board-focused .challenge-task{padding:0;margin:4px 0}
 .board-focused #guitar-experiment,.board-focused #challenge-review,.board-focused #challenge-panel>.source-details{grid-column:2}
}

/* PM-APP-30: one consumer task rhythm; original board geometry/material/feedback stay intact. */
:root{--task-gap:16px;--task-feedback-duration:180ms}
.topbar{z-index:25}
body:not(.board-focused) .board-tools{z-index:1;scroll-margin-top:var(--shell-top-offset,92px)}
:is(#board-title,#ear-title,#sing-title,#challenge-title,#circle-title,#home-title,#records-title){scroll-margin-top:var(--shell-top-offset,92px)}
@media(min-width:1101px){body:not(.board-focused) .mode-nav{top:var(--shell-top-offset,92px)}}
.live-guitar{padding-bottom:8px}
.task-config{border-bottom:1px solid var(--ui-line);margin:16px 0 20px;padding-bottom:8px}
.task-config>summary,.board-display-options>summary{min-height:44px;padding:10px 0;font-size:.875rem;font-weight:600;cursor:pointer}
.task-config[open]>summary{margin-bottom:8px}
.board-display-options{position:relative;font-size:.875rem}
.board-display-options>div{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0}
.board-display-options .check{min-height:44px}
.board-window-help{font-size:.8125rem;color:var(--ui-muted);margin:4px 0 8px}
.board-focused .board-window-help{display:none}
:is(.ear-listening,.sing-task,.challenge-task){padding-block:20px 16px;border-bottom:1px solid var(--ui-line)}
:is(#ear-stage,#sing-target,#challenge-prompt){font-size:1.5rem;line-height:1.4;overflow-wrap:anywhere}
:is(.ear-listening,.sing-task) .learning-actions{margin-block:var(--task-gap)}
:is(#ear-feedback,#sing-feedback,#challenge-feedback):not(:empty){font-size:.875rem;line-height:1.65;padding:10px 12px;border-radius:8px;background:var(--ui-bg);color:var(--ui-ink);margin-block:12px 0}
#sing-sequence{font-size:.875rem;color:var(--ui-muted);margin-bottom:8px}
.note-inspector>div{min-width:0;max-width:100%}
#note-detail strong{white-space:normal;overflow-wrap:anywhere}
.task-config button,.task-config select{max-width:100%}
body:not(.board-focused) .board-tools label{flex-wrap:wrap}
#ear-panel,#sing-panel,#challenge-panel{max-width:none}
@media(max-width:600px){
 body:not(.board-focused) .lab{padding:16px}
 body:not(.board-focused) .lab .panel-heading{margin-bottom:12px}
 body:not(.board-focused) .lab[data-board-mode=scale] .page-caption{display:none}
 body:not(.board-focused) .lab[data-board-mode=scale] #explore-toolbar{gap:8px 12px;padding-block:8px}
 body:not(.board-focused) .lab[data-board-mode=scale] .segmented{flex:1;display:grid;grid-template-columns:1fr 1fr}
 body:not(.board-focused) .lab[data-board-mode=scale] .segmented button{white-space:normal;font-size:.8125rem;padding:8px}
 body:not(.board-focused) .lab[data-board-mode=scale] #scale-panel{padding:8px 0;margin-bottom:8px}
 body:not(.board-focused) #scale-panel>.learning-controls{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px}
 body:not(.board-focused) #scale-panel>.learning-controls label{display:grid;gap:4px}
 body:not(.board-focused) #scale-panel>.learning-controls select{width:100%;padding-inline:8px}
 body:not(.board-focused) #scale-title{margin:12px 0 4px;font-size:1.125rem}
 body:not(.board-focused) #scale-list{margin:4px 0;font-size:.875rem}
 body:not(.board-focused) #scale-details{margin-top:4px}
 .task-config{margin:12px 0 16px}
 :is(#ear-stage,#sing-target){font-size:1.25rem}
 #ear-panel,#sing-panel,#challenge-panel{padding:20px 16px}
 .ear-types{flex-wrap:wrap}
 #ear-bank-settings,#sing-bank-settings{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.task-config,.board-display-options{scroll-behavior:auto}}

/* PM-APP-30 A2 completion: direct query, optional selectors, full diagram and audition first. */
.chord-config>summary{min-height:44px;padding:10px 0;font-size:.875rem;cursor:pointer;font-weight:600}
.chord-config>.learning-controls{padding:8px 0 12px}
.lab[data-board-mode=chord] #chord-string-details{grid-column:1/-1}
@media(max-width:600px){
 .lab[data-board-mode=chord] .page-caption{display:none}
 .lab[data-board-mode=chord] #explore-toolbar{padding:8px 0;gap:8px 12px}
 .lab[data-board-mode=chord] .chord-controls{padding:8px 0;margin-bottom:8px}
 .lab[data-board-mode=chord] #chord-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:4px}
 .lab[data-board-mode=chord] #chord-search label{display:grid;gap:4px}
 .lab[data-board-mode=chord] .chord-panel{display:grid;grid-template-columns:clamp(132px,42vw,164px) minmax(0,1fr);gap:4px 12px;padding:8px 0 16px;align-items:start}
 .lab[data-board-mode=chord] #chord-name{grid-column:1/-1;grid-row:1}
 .lab[data-board-mode=chord] #chord-summary{grid-column:1/-1;grid-row:2;margin:4px 0 8px;font-size:.8125rem}
 .lab[data-board-mode=chord] #chord-spelling-note{grid-column:1/-1;grid-row:3}
 .lab[data-board-mode=chord] #lookup-diagram{grid-column:1;grid-row:4/7;max-width:164px;margin:4px 0}
 .lab[data-board-mode=chord] #chord-barres{grid-column:2;grid-row:4;margin:4px 0;font-size:.8125rem}
 .lab[data-board-mode=chord] #board-audio-controls{grid-column:2;grid-row:5;padding:4px 0;gap:4px}
 .lab[data-board-mode=chord] #chord-play{grid-column:2;grid-row:6;min-width:0;width:100%;padding:10px 8px}
 .lab[data-board-mode=chord] .source-details{grid-column:1/-1;grid-row:8;margin-top:8px}
 .lab[data-board-mode=chord] #chord-string-details{grid-row:7}
}

/* PM-APP-31: one full-neck viewport; source coordinates and hit rectangles remain unchanged. */
#board,#challenge-board{width:100%!important;min-width:0!important;height:auto!important}
#board svg,#challenge-board svg{display:block;width:100%!important;min-width:0!important;max-width:860px;height:auto!important;margin-inline:auto}
.board-scroll{overflow-x:hidden;max-width:100%}
.neck-nav label,#challenge-pan{display:none!important}
.board-note-visual{transition:none}
.wood-fretboard .is-touching .board-note-visual{transform:none}
[data-feedback-fallback] .is-touching .board-note-visual{transform:scale(.94)}
body.board-focused .board-tools{flex-wrap:wrap;gap:6px;min-height:44px}
body.board-focused .board-tools [role=status]{max-width:none;flex-basis:100%}
body.board-focused .app-shell{padding:8px;min-height:100dvh}
body.board-focused .lab,body.board-focused .challenge-panel{display:flex;flex-direction:column;height:auto;min-width:0;padding:0}
body.board-focused #chord-board-details,body.board-focused #challenge-board-wrap{order:1;width:100%;margin:0}
body.board-focused #board-audio-slot{order:2;margin:0}
body.board-focused .focus-settings{order:4;margin-top:4px;width:100%;border-top:1px solid var(--ui-line)}
body.board-focused .focus-settings>summary{min-height:44px;padding:10px 0;cursor:pointer;font-size:.875rem}
body.board-focused #board-focus-status{order:5;display:block;font-size:.8125rem;color:var(--ui-muted)}
body.board-focused #board-context-controls,body.board-focused #challenge-context-controls{max-height:none;overflow:visible;padding:8px 0}
body.board-focused #board-scroll,body.board-focused #challenge-scroll{height:auto!important;max-height:none;overflow:hidden;width:100%}
body.board-focused #board,body.board-focused #challenge-board{width:min(100%,calc((100dvh - 120px)*2.669565))!important;max-width:860px;margin-inline:auto}
body.board-focused #selection-feedback{padding:4px 0;display:block}
body.board-focused #explore-selection,body.board-focused #octaves{display:none}
body.board-focused #note-detail{gap:8px}
body.board-focused #note-detail strong{font-size:1.125rem}
body.board-focused #note-detail>span{font-size:.8125rem}
body.board-focused .note-inspector{padding:0}
body.board-focused #board-tools button{padding:8px 12px}
@media(max-width:600px){
 body:not(.board-focused) .wood-fretboard [data-string][data-fret]:not([data-fret="0"]):not(.is-selected):not(:focus-visible) .board-note-visual text{display:none}
 .board-window-help{font-size:.8125rem}
}
@media(prefers-reduced-motion:reduce){[data-feedback-fallback] .is-touching .board-note-visual{transform:none}}