:root{color-scheme:light dark;--ground:#F4F3EA;--ink:#2F323A;--muted:#5A5D66;--rule:#E4DAC3;--gold:#D1A866;--gold-fill:#EFE0BF;--field:#FFFDF7;--panel:#F6EDD8;--lab:#4F6B78;--body:Lato,"Gill Sans",Arial,sans-serif;--display:"Playfair Display",Georgia,serif}
:root{--tonic:#e2eadc;--predominant:#dee8ed;--dominant:#eeddd3}
.modernist-wheel .wheel-key path{fill:var(--modern-fill);stroke:var(--rule);stroke-width:1}.modernist-wheel .wheel-key[aria-pressed=true] path{stroke:var(--ink);stroke-width:4}
.modernist-choices [aria-pressed=true],.modernist-axis [aria-pressed=true]{color:var(--ink)}
@media(prefers-color-scheme:dark){:root{--tonic:#394736;--predominant:#35464e;--dominant:#4a3b35}}
.modernist-choices{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}.modernist-choices button{flex:1 1 170px}.modernist-axis{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}.modernist-choices [aria-pressed=true],.modernist-axis [aria-pressed=true]{border:2px solid var(--lab);background:var(--panel)}#modernist-exercises{margin-bottom:1rem}#modernist-exercises label{display:block;font-size:.85rem}#modernist-exercises select{max-width:100%}.answer.modernist-answer{display:block}.modernist-answer .staff-scroll{height:222px;max-height:222px}.modernist-answer .listen{margin-top:.6rem}.modernist-answer #modernist-description{font-size:.9rem;margin:.3rem 0 .6rem}.modernist-answer #key-title{font-size:1.5rem}.modernist-wheel .modernist-role{font:700 15px var(--body)}.modernist-wheel .wheel-key:focus-visible path{stroke:var(--lab);stroke-width:5}.modernist-wheel .wheel-key.sounding path{fill:var(--lab)}.modernist-wheel .wheel-key.sounding text{fill:var(--field)}.modernist-event.sounding{color:var(--lab)}
@media(prefers-color-scheme:dark){:root{--ground:#2C3239;--ink:#FBF4E4;--muted:#C9C3B4;--rule:#4A4E58;--gold-fill:#4A4232;--field:#383C45;--panel:#363A43;--lab:#8FAEBC}}
*{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.5 var(--body)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}
.join-legend-mark{display:inline-block;border:2px solid var(--lab);border-radius:50%;width:1.4em;height:1.4em;text-align:center;line-height:1.1;color:var(--ink)}
.motion-subsets button[aria-pressed=true]{color:var(--ink)}
.note-name{white-space:nowrap}.accidental{font-family:Bravura;font-size:1.15em;font-weight:400;line-height:0;position:relative;top:-.27em;margin-left:.025em}
::selection{background:var(--gold-fill);color:var(--ink)}a{color:var(--lab);text-underline-offset:.2em}button,select,a,[tabindex]{-webkit-tap-highlight-color:transparent}button,select{font:inherit;font-size:.9rem;color:var(--ink);background:var(--field);border:1px solid var(--rule);border-radius:8px;min-height:44px;padding:.45rem .8rem;cursor:pointer}button:disabled,select:disabled{opacity:.65;cursor:default}button:not(:disabled):hover{border-color:var(--lab)}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--field);padding:1rem;z-index:2}
.review-banner{font-size:.8rem;text-align:center;background:var(--gold-fill);padding:.45rem 1rem}.mast{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--rule);color:var(--lab)}.brand{font:700 1.2rem var(--display);color:var(--ink)}main{max-width:1180px;margin:auto;padding:1.5rem 1.25rem 3rem}.title-row{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem}h1{font:700 clamp(2rem,4vw,2.8rem)/1.15 var(--display);margin:.2rem 0 .5rem}h2{font:700 1.9rem var(--display);margin:0 0 .2rem}h3{font-size:1rem;margin:.15rem 0 .5rem}.intro{margin:.3rem 0 1.3rem;color:var(--muted)}.draft-note{font-size:.75rem;padding:.15rem .3rem;background:var(--gold-fill);white-space:nowrap}.controls{display:flex;align-items:end;flex-wrap:wrap;gap:.65rem;margin-bottom:1rem}.controls label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--muted)}.display-switch{display:flex;gap:0;margin-left:auto}.display-switch button{border-radius:0}.display-switch button:first-child{border-radius:8px 0 0 8px}.display-switch button:last-child{border-radius:0 8px 8px 0}button[aria-pressed=true]{background:var(--lab);color:var(--field);border-color:var(--lab)}
.views{display:flex;flex-wrap:wrap;gap:1.2rem;padding:.9rem 0 1rem;border-block:1px solid var(--rule);margin-bottom:1.3rem}.view-group{display:flex;flex-direction:column;gap:.35rem}.group-label{font-size:.75rem;color:var(--muted)}.view-buttons{display:flex;flex-wrap:wrap;gap:.35rem}.view-buttons button{border-radius:999px;background:transparent;font-size:.85rem}.view-buttons button[aria-pressed=true]{background:var(--lab);color:var(--field)}
.stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.6rem;align-items:start}.wheelbox{background:var(--field);border:1px solid var(--rule);border-radius:16px;padding:.6rem}.wheelbox svg{width:100%;display:block}.wheel-hint{text-align:center;color:var(--muted);font-size:.82rem;margin:.25rem 0 .5rem}.wheel-key{cursor:pointer}.wheel-key path{fill:var(--field);stroke:var(--rule);stroke-width:1}.wheel-key[aria-pressed=true] path{fill:var(--gold-fill);stroke:var(--gold);stroke-width:2}.wheel-key:hover path{stroke:var(--lab);stroke-width:2}.wheel-key:focus{outline:none}.wheel-key:focus-visible path{stroke:var(--lab);stroke-width:4}.wheel-key text{fill:var(--ink);font:700 23px var(--display);pointer-events:none}.wheel-center{fill:var(--ink);font:700 32px var(--display)}.wheel-center-sub{fill:var(--muted);font:15px var(--body)}
.answer{background:var(--panel);border-radius:14px;padding:1rem 1.2rem}.answer p{margin:.3rem 0;color:var(--muted)}#signature{width:240px;max-width:100%;height:auto;display:block;color:var(--ink)}.view-panel{padding:1.1rem 0;border-bottom:1px solid var(--rule)}.view-panel p{color:var(--muted);margin:.25rem 0}.listen{padding:1.2rem 0 .5rem}.listen p{margin:.4rem 0}.transport{display:flex;gap:.5rem;flex-wrap:wrap}.status{min-height:1.5em;font-size:.85rem;color:var(--muted)}.link-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;font-size:.85rem}.review-footer{border-top:1px solid var(--rule);padding-top:1rem;margin-top:2rem;font-size:.85rem;color:var(--muted)}[hidden]{display:none!important}
@media(max-width:860px){.stage{grid-template-columns:1fr}.display-switch{margin-left:0}.wheelbox{max-width:600px;width:100%;justify-self:center}.views{gap:.8rem 1.1rem}}
@media(max-width:420px){main{padding:1.1rem .8rem 2rem}.mast{padding:.8rem}.controls{gap:.6rem}.view-buttons button{padding-inline:.7rem}.stage{gap:1rem}.answer{padding:.9rem 1rem}.wheel-key text{font-size:27px}.wheel-center{font-size:36px}.wheel-center-sub{font-size:19px}}
.keys-wheel .wheel-key text{font-size:27px}.minor-key path{fill:var(--ground);stroke:var(--rule);stroke-width:1}.minor-key text{font:18px var(--body);fill:var(--ink)}.minor-key.relative-home path{fill:var(--gold-fill);stroke:var(--gold);stroke-width:2}.wheel-key.related-key path,.minor-key.related-minor path{fill:var(--panel)}.minor-key path.parallel-position{fill:none;stroke:var(--lab);stroke-width:3;stroke-dasharray:6 4}.ring-signature{color:var(--muted);pointer-events:none}.keys-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .9rem;font-size:.75rem;color:var(--muted)}.keys-legend span:before{content:'';display:inline-block;width:14px;height:10px;margin-right:.3rem;vertical-align:middle;border:1px solid var(--rule)}.legend-home:before{background:var(--gold-fill);border-color:var(--gold)!important}.legend-related:before{background:var(--panel)}.legend-parallel:before{border:2px dashed var(--lab)!important}.keys-explanation,.source-links{font-size:.85rem;color:var(--muted)}h4{font-size:.95rem;margin:1rem 0 .3rem}.accidental-order{display:flex;flex-wrap:wrap;gap:.3rem}.accidental-order>span{padding:.2rem .4rem;border:1px solid var(--rule);border-radius:4px}.in-signature{background:var(--gold-fill);font-weight:700}.relationship-audio{margin-top:.5rem}
.button-link{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .8rem;border:1px solid var(--rule);border-radius:8px;background:var(--field);font-size:.9rem;text-decoration:none}.wheel-dialog{padding:1rem;background:var(--field);color:var(--ink);border:1px solid var(--rule);border-radius:14px;width:calc(100% - 24px);max-width:940px;max-height:calc(100% - 24px)}.wheel-dialog::backdrop{background:#0008}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.dialog-heading h2{font-size:1.3rem}.wheel-dialog>p{font-size:.9rem}.wheel-detail{overflow:auto;max-height:65vh;border:1px solid var(--rule);border-radius:8px}.wheel-detail #wheel{display:block;width:790px;height:790px;max-width:none}.guide{max-width:760px}.guide section{margin:1.8rem 0}.guide section h2{font-size:1.5rem}.guide nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.guide .draft-note{white-space:normal}.guide .future-views{color:var(--muted)}
.related-marker{fill:var(--ink)}.keys-legend .legend-related:before{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.answer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:.8rem;align-items:start;padding:.85rem 1rem}
.answer .listen{padding:0}.answer .listen h3{color:var(--muted);font-weight:400;font-size:.85rem}
.answer .status{grid-column:1/-1;margin:.3rem 0 0;font-size:.75rem;min-height:0}
.key-comparisons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-bottom:.85rem}
.comparison{border:1px solid var(--rule);border-radius:10px;padding:.65rem .75rem;background:var(--field);min-width:0;display:flex;flex-direction:column;align-items:start}
.comparison.relative{border-top:3px solid var(--gold)}.comparison.parallel{border-top:3px dashed var(--lab)}
.view-panel .relative-reading,.view-panel .parallel-reading{font:700 1.4rem var(--display);color:var(--ink);margin:0}
.view-panel .comparison-caption{font-size:.8rem;margin:.05rem 0 .2rem}
.comparison-signature{height:65px;max-width:100%;width:auto;color:var(--ink);margin-bottom:.3rem}
.comparison .relationship-listen{font-size:.8rem;padding-inline:.5rem;margin-top:auto}
.comparison .source-links{font-size:.7rem;margin-top:.3rem}
.view-panel{padding:.8rem 0}.source-links{font-size:.75rem}.keys-explanation{font-size:.8rem}
.wheel-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
#download-status{min-height:0;margin:0;text-align:center}.wheel-hint{margin:.3rem 0}.keys-legend{margin:.4rem 0 .6rem}
.stage{gap:1.2rem}.views{padding:.65rem 0 .75rem;margin-bottom:1rem}.intro{margin-bottom:.8rem}
.dialog-heading{flex-wrap:wrap}.dialog-heading h2{margin-right:auto}#download-detail-status:empty{display:none}
.staff-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;width:100%;margin:.2rem 0 .35rem}
.reading,.key-identity{min-width:0}
.wheel-key.scale-member path{fill:var(--gold-fill);stroke:var(--gold);stroke-width:2}.wheel-key.scale-member[aria-pressed=true] path{fill:var(--panel);stroke:var(--ink);stroke-width:3}.wheel-key.scale-changed path{stroke:var(--lab);stroke-dasharray:6 4;stroke-width:3}.wheel-key .scale-degree{font:15px var(--body)}.scale-choices{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}.scale-choices button{font-size:.8rem}.scale-change{padding:.4rem .5rem;border-left:3px dashed var(--lab)}.answer.scales-answer{display:block}.scales-answer .key-identity{display:block}.scales-answer .listen{padding-top:.35rem}.scales-answer #chord-notes{font-size:.85rem;display:flex;flex-wrap:wrap;gap:.15rem}.sounding{filter:drop-shadow(0 0 2px var(--gold))}.scale-staff-note.sounding{color:var(--lab)}.scale-note.sounding{background:var(--gold-fill)}
.staff-scroll svg,#signature{max-width:none;display:block;flex:none}
.comparison-signature{margin:0}
#wheel .wheel-key .pole-label{font:18px var(--body)}
.answer.chords-answer{display:block}.chords-answer .key-identity{display:flex;flex-direction:column}.chords-answer #key-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.chords-answer #signature-label{order:-1;font-size:1.15rem;color:var(--ink);margin-bottom:.4rem}.chords-answer .listen{margin-top:.35rem}.chord-family button[aria-pressed=true]{color:var(--ink)}
.wheel-key.chord-member.family-tonic path{fill:#e2eadc}.wheel-key.chord-member.chord-tonic path{fill:#cbd9c0}.wheel-key.chord-member.family-predominant path{fill:#dee8ed}.wheel-key.chord-member.family-dominant path{fill:#eeddd3}.wheel-key.chord-member[aria-pressed=true] path{stroke:var(--ink);stroke-width:4}.wheel-key .chord-roman{font:700 25px var(--display)}.wheel-key .chord-wheel-name{font:17px var(--body)}.wheel-key .pole-label{font:11px var(--body)}.reference-minor{opacity:.7;pointer-events:none}.reference-minor text{font:13px var(--body)}.chord-families{display:grid;gap:.5rem}.chord-family{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}.chord-family h3{width:100%;font-size:.8rem;margin:0}.chord-family button{font-size:.8rem}.chord-sequences{margin-top:.7rem}.chord-family.family-tonic button{background:#e2eadc}.chord-family.family-predominant button{background:#dee8ed}.chord-family.family-dominant button{background:#eeddd3}.chord-family button[aria-pressed=true]{border:2px solid var(--ink)}
#chord-map{margin:.8rem 0;text-align:left}#chord-map .chord-families{display:flex;flex-wrap:wrap;gap:.8rem}#chord-map .chord-family{align-content:start}.chords-answer .listen h3{display:none}
@media(prefers-color-scheme:dark){.wheel-key.chord-member.family-tonic path,.chord-family.family-tonic button{fill:#3b4937;background:#3b4937}.wheel-key.chord-member.chord-tonic path{fill:#485940}.wheel-key.chord-member.family-predominant path,.chord-family.family-predominant button{fill:#354850;background:#354850}.wheel-key.chord-member.family-dominant path,.chord-family.family-dominant button{fill:#504039;background:#504039}}
.wheel-key .scale-degree-sign{font:17px Bravura}
.degree-label{display:inline-flex;align-items:baseline;white-space:nowrap}.degree-number{position:relative;display:inline-block}.degree-caret{position:absolute;left:50%;transform:translateX(-50%);bottom:.6em;font-size:.85em;line-height:1}.scale-interaction-outline[hidden]{display:none}
@media(max-width:420px){
  .answer .key-identity{display:contents}.answer .key-identity h2{grid-column:1;grid-row:1}.answer #signature-label{grid-column:1;grid-row:2}
  .answer .listen{grid-column:2;grid-row:1/3}.answer .staff-scroll{grid-column:1/-1;grid-row:3}
  .key-comparisons{grid-template-columns:1fr}
}
@media(max-width:420px){.answer{gap:.5rem;padding:.75rem}.answer .transport{gap:.3rem}.answer button{font-size:.8rem;padding-inline:.5rem}.answer h2{font-size:1.5rem}.comparison{padding:.55rem}.comparison h3{font-size:.85rem}.comparison .relationship-listen{font-size:.75rem}.key-comparisons{gap:.4rem}}
.motion-member path{fill:var(--gold-fill)}.motion-member[aria-pressed=true] path{stroke:var(--ink);stroke-width:3}.motion-choices,.motion-steps{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}.motion-steps button{font-size:.8rem}.motion-steps button[aria-pressed=true]{border:2px solid var(--ink)}.motion-choices button[aria-pressed=true]{background:var(--gold-fill)}.motion-paths .sounding{stroke:var(--gold);filter:none}
.motion-choices button[aria-pressed=true]{color:var(--ink)}
.motion-steps button[aria-pressed=true]{color:var(--ink)}.motion-edge{opacity:.65}.motion-arrow{opacity:.65}.motion-edge.selected-motion,.motion-arrow.selected-motion{opacity:1}.soprano-scroll-hint{font-size:.75rem}.soprano-step.sounding{color:var(--lab);filter:none}
#motion-exercises{padding:0 0 .9rem;border-bottom:1px solid var(--rule);margin-bottom:.8rem}#motion-exercises h3{margin:0;font-size:.85rem;color:var(--muted)}.motion-choices button[aria-pressed=true]{background:var(--lab);color:white}.motion-steps button{border-radius:5px;padding:.3rem .5rem;background:var(--field)}.motion-steps button[aria-pressed=true]{background:var(--gold-fill)}#motion-context{font-weight:700;color:var(--ink);border-left:4px solid var(--lab);padding-left:.6rem}#motion-controls h4,#motion-soprano h4{margin:.7rem 0 .25rem;font-size:.85rem}.soprano-choices{display:flex;gap:.3rem;flex-wrap:wrap}.soprano-choices button{font-size:.8rem;padding:.3rem .5rem}.soprano-choices button[aria-pressed=true]{border:2px solid var(--lab)}.soprano-tone{color:var(--lab)}.motion-edge{opacity:.22}.motion-arrow{opacity:.3}.motion-edge.selected-motion,.motion-arrow.selected-motion{opacity:1}.motion-edge.sounding{opacity:1;stroke:var(--ink);stroke-width:7}.motion-arrow.sounding{opacity:1;fill:var(--ink)}@media(prefers-reduced-motion:no-preference){.motion-edge.sounding{stroke-dasharray:8 5;animation:motion-flow .65s linear infinite}@keyframes motion-flow{to{stroke-dashoffset:-13}}}
.motion-paths .motion-edge,.motion-paths .motion-arrow{opacity:.65}.motion-paths .selected-motion,.motion-paths .sounding{opacity:1}.soprano-step.sounding{color:var(--lab)}
.soprano-step.selected-soprano{color:var(--lab)}
.motion-pair-staff{width:100%;min-width:0}.motion-pair-chord.playing-chord .chord-notehead{fill:var(--lab);stroke:var(--lab);stroke-width:.6}.motion-pair-chord.playing-chord .staff-chord-label,.motion-pair-chord.playing-chord .staff-roman{fill:var(--lab);font-weight:bold}
.motion-current-pair path{fill:var(--gold-fill);stroke:var(--lab);stroke-width:3}.wheel-key.motion-playing path{fill:var(--lab);stroke:var(--ink);stroke-width:5}.wheel-key.motion-playing text{fill:var(--ground);color:var(--ground)}
#motion-context{font-size:.8rem;min-height:1.5em;margin:.25rem 0 0;border:0;padding:0}
#motion-exercises{margin:0 0 1rem;padding:0 0 1rem}#motion-exercises .motion-choices{margin:0;gap:.7rem}#motion-exercises .motion-choices button{min-width:12rem}.motion-subsets{margin:.65rem 0 0;padding-left:1rem;border-left:3px solid var(--rule);display:flex;gap:.5rem;flex-wrap:wrap}.motion-subsets button{font-size:.8rem;text-align:left}.motion-subsets button[aria-pressed=true]{border:2px solid var(--lab);background:var(--panel)}.motion-set-names{display:block;font-size:.75rem;color:var(--muted);margin-top:.2rem}.motion-joins{font-size:.8rem;margin:.4rem 0;color:var(--muted)}
.motion-paths .motion-edge{opacity:1;stroke-width:4;stroke-dasharray:none!important;animation:none!important;filter:none}.motion-paths .motion-arrow{opacity:1;stroke:none!important;filter:none}.motion-paths .motion-edge.sounding{stroke:var(--ink)}.motion-paths .motion-arrow.sounding{fill:var(--ink)}
.motion-steps button[data-motion-pair]{text-align:left}.motion-steps button.sounding{background:var(--gold-fill);color:var(--ink);border-color:var(--ink);filter:none}
.cycle-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}.cycle-choices button{font-size:.85rem}.cycle-choices button[aria-pressed=true]{background:var(--panel);color:var(--ink);border:2px solid var(--lab)}
.wheel-key.cycle-member path{fill:var(--gold-fill)}.wheel-key.cycle-member[aria-pressed=true] path{stroke:var(--ink);stroke-width:3}.wheel-key.cycle-context text{fill:var(--muted)}
.wheel-key.cycle-member.sounding path{fill:var(--panel);stroke:var(--lab);stroke-width:4}.cycle-staff-note.sounding .cycle-notehead{fill:var(--lab)}.cycle-staff-note.sounding{filter:none}
.answer.cycles-answer{display:block}.cycles-answer .key-identity{display:block}.cycles-answer #key-title{font-size:1.5rem;min-height:2rem;margin:0}.cycles-answer #signature-label{font-size:.85rem;min-height:3rem}.cycle-step-reading{display:block}.cycles-answer .staff-scroll{height:164px}.cycles-answer .listen{padding-top:.2rem}.cycles-answer #chord-notes:empty{display:none}.cycles-answer .transport{flex-wrap:nowrap}.cycles-answer .status{min-height:2.5em;margin-top:.4rem}
@media(max-width:600px){.cycle-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.cycles-answer .transport button{font-size:.8rem;padding-inline:.45rem}}
.wheelbox:has(.cycles-wheel) .wheel-hint{min-height:4.65em}
.tuning-choices{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}.tuning-choices button[aria-pressed=true]{border:2px solid var(--lab);background:var(--panel);color:var(--ink)}
.tuning-wheel text{font-family:'Lato',sans-serif;font-size:24px;fill:var(--ink)}.tuning-wheel .tuning-data{font-size:18px}.tuning-wheel .tuning-centre{font-size:26px;font-weight:700}.tuning-wheel [role=button]{cursor:pointer}.tuning-wheel [role=button]:focus-visible .tuning-node{stroke:var(--lab);stroke-width:5}.tuning-wheel .sounding .tuning-node{fill:var(--lab)}.tuning-wheel .sounding text{font-weight:700}.tuning-wheel .sounding .tuning-name{text-decoration:underline}
.tuning-wheel.tuning-closed:has([data-tuning-step="12"].sounding) [data-tuning-step="0"] .tuning-node{fill:var(--lab)}
.tuning-wheel-scroll{overflow-x:auto;max-width:100%}.tuning-wheel-scroll:focus-visible{outline-offset:-3px}
.wheelbox:has(.tuning-wheel){min-width:0}
.history-wheel text{font:24px Lato,sans-serif;fill:var(--ink)}.history-wheel .history-centre{font-size:27px;font-weight:700}.history-wheel .history-centre-sub{font-size:18px}.history-wheel [role=button]{cursor:pointer}.history-wheel [role=button]:focus-visible circle{stroke:var(--lab);stroke-width:4}.history-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;list-style:none;margin:.4rem 0;padding:0}.history-timeline button{width:100%;font-size:.85rem;min-height:48px}.history-timeline button[aria-pressed=true]{background:var(--panel);color:var(--ink);border:2px solid var(--lab)}.history-answer{display:block}.history-answer .key-identity{display:block}.history-reading p{font-size:.9rem}.history-sources{padding-left:1.1rem;font-size:.85rem}.history-schematic-note{font-size:.8rem!important}.view-panel[data-view=history]{padding:.2rem 0 .8rem}.history-answer #key-title{font-size:1.5rem}
.history-wheel [data-minor=true] text{font-size:20px}
@media(max-width:600px){.tuning-wheel-scroll #wheel{min-width:600px}}
@media(max-width:600px){.stage:has(.history-wheel) .reading{display:contents}.stage:has(.history-wheel) .view-panel[data-view=history]{grid-row:1}.stage:has(.history-wheel) .wheelbox{grid-row:2}.stage:has(.history-wheel) .answer{grid-row:3}}
.answer:has(#tuning-readout:not([hidden])){display:block}.tuning-facts{display:grid;grid-template-columns:1fr auto;gap:.35rem .65rem;font-size:.9rem}.tuning-facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tuning-note-scroll{overflow-x:auto;max-width:100%;border-block:1px solid var(--rule);padding:.5rem 0}.tuning-notes{display:flex;width:max-content;margin:0;padding:0;list-style:none;gap:.4rem}.tuning-notes li{display:grid;min-width:96px;padding:.3rem .4rem;border:1px solid var(--rule);border-radius:6px;font-size:.8rem;font-variant-numeric:tabular-nums}.tuning-notes li.sounding{outline:2px solid var(--lab);background:var(--panel)}.tuning-note{font-size:.8rem;color:var(--muted)}.tuning-choices button{flex:1 1 150px}.answer:has(#tuning-readout:not([hidden])) .transport{flex-wrap:wrap}