:root{color-scheme:dark}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#01050a}
.harmonic-stage,#harmonic-canvas{position:absolute;inset:0;width:100%;height:100%}
#harmonic-canvas{touch-action:none;cursor:grab}
#harmonic-canvas:active{cursor:grabbing}
#harmonic-panel h2{font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sfi-blue-muted);margin:0 0 9px}
#harmonic-panel .sfi-panel-section{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09)}
#harmonic-panel .sfi-control-row{--sfi-control-label-width:76px;--sfi-control-value-width:44px;margin-block:11px;font-size:12px}
#harmonic-panel output{font-variant-numeric:tabular-nums}
#harmonic-panel .sfi-segmented-control button{white-space:normal;min-width:0}
.harmonic-equation{margin-top:12px;min-height:108px}
.harmonic-equation strong{display:block;font-size:18px;overflow-x:auto;padding-block:7px;white-space:nowrap}
.harmonic-equation .katex{font-size:1em}
.harmonic-equation .sfi-result-detail,.harmonic-note{font:12px/1.5 system-ui,sans-serif;color:var(--sfi-blue-muted);white-space:normal}
.harmonic-note{margin:9px 0}
#harmonic-profile{display:block;width:100%;height:auto}
[hidden]{display:none!important}
#harmonic-profile-legend{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
#harmonic-panel #harmonic-profile-legend button{display:flex;align-items:center;justify-content:center;gap:5px;padding-inline:3px;font-size:12px}
.harmonic-mode-dot{width:5px;height:5px;border-radius:50%;background:var(--mode-color);flex:none}
#harmonic-spectrum{display:block;width:100%;height:auto;margin:8px 0}
#harmonic-gallery{--sfi-button-columns:2}
#harmonic-gallery button{display:grid;gap:4px;text-align:left}
#harmonic-gallery svg{width:100%;height:30px;display:block}
#harmonic-gallery button span{font-size:11px}
#harmonic-gallery-section{margin-top:14px}
.harmonic-actions{display:flex;flex-wrap:wrap;gap:8px}
/* Keep explanatory plots compact in the wide bottom-panel layout. */
#harmonic-profile,#harmonic-spectrum{max-width:420px;margin-inline:auto}
/* The shell and first local section otherwise draw two adjacent rules. */
#harmonic-panel .sfi-world-rotation{border-bottom:0;margin-bottom:0;padding-bottom:0}
#harmonic-panel [data-sfi-world-panel-body] > .sfi-panel-section:first-child{border-top:0;padding-top:0}
#harmonic-play{width:100%}
/* Explicitly rectangular exhibit cards; override shared action-button pills. */
#harmonic-panel .harmonic-gallery{--sfi-button-columns:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;border-radius:0;padding:0}
#harmonic-panel .harmonic-gallery button{border-radius:8px;min-width:0;min-height:78px;padding:10px;display:grid;align-content:center;gap:5px;white-space:normal;text-align:left}
#harmonic-panel .harmonic-gallery button span{font-size:11px;line-height:1.4}
#harmonic-panel .harmonic-gallery svg{width:100%;height:32px;display:block}
#harmonic-panel #harmonic-profile-legend{border-radius:var(--sfi-panel-radius,12px);grid-template-columns:repeat(6,minmax(0,1fr))}
#harmonic-panel #harmonic-profile-legend button{border-radius:6px}
#harmonic-functions{display:block;width:100%;height:auto;max-width:420px;margin-inline:auto}
#harmonic-function-equation{display:block;overflow-x:auto;font-size:14px;padding-block:8px}
#harmonic-palette-section{margin-top:14px}
#harmonic-panel .harmonic-gallery svg{height:56px}
#harmonic-panel .harmonic-gallery small{font-size:10px;color:var(--sfi-blue-muted);white-space:nowrap}
.harmonic-graph-equation{display:block;overflow-x:auto;font-size:14px;padding-top:10px}
/* Intermediate is a two-column instrument panel, not enlarged phone controls. */
@media (min-width:641px) and (max-width:1119px){
#harmonic-panel [data-sfi-world-panel-body]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start}
#harmonic-panel .sfi-panel-section{min-width:0}
#harmonic-panel .harmonic-equation,#harmonic-favorites-section,#harmonic-profile-section{grid-column:1/-1}
#harmonic-panel .harmonic-equation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;min-height:0}
#harmonic-panel .harmonic-equation .sfi-result-detail{grid-column:1/-1}
#harmonic-panel .harmonic-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#harmonic-parameters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
#harmonic-drum-mode{max-width:360px}
#harmonic-profile-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.harmonic-radial-controls,.harmonic-radial-graph{min-width:0}
#harmonic-gallery-section{grid-column:1/-1}
#harmonic-panel #harmonic-play{width:auto;min-width:150px}
#harmonic-panel .harmonic-actions button{flex:0 1 auto}
#harmonic-panel .sfi-segmented-control{max-width:420px}
#harmonic-scaling,#harmonic-environment{align-self:start}
}
#harmonic-panel .harmonic-sphere-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#harmonic-panel .harmonic-sphere-legend button{border-radius:6px;min-height:38px;padding:6px;font-size:11px;white-space:nowrap}
#harmonic-sphere-mode{margin-top:10px}
#harmonic-sphere-gallery{margin-top:10px}
@media(min-width:641px) and (max-width:1119px){
#harmonic-sphere-mixture{grid-column:1/-1}
#harmonic-panel .harmonic-sphere-legend{grid-template-columns:repeat(6,minmax(0,1fr))}
#harmonic-sphere-weights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
#harmonic-panel #harmonic-sphere-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
#harmonic-sphere-mode{max-width:360px}
}
/* Worked mathematics belongs beside the native controls during a lesson. */
#harmonic-panel .harmonic-lesson-board{grid-column:1/-1;min-width:0;margin-top:0}
.harmonic-lesson-equation{overflow-x:auto;font-size:13px;max-width:100%}
.harmonic-lesson-board canvas{display:block;width:100%;height:auto;max-width:600px;margin-inline:auto}
#harmonic-lesson-board #harmonic-function-section{border-top:0;padding-top:0;margin-top:0}
#harmonic-lesson-board #harmonic-function-section>h2,
#harmonic-lesson-board #harmonic-function-equation{display:none}
.harmonic-lesson-legend{display:flex;flex-wrap:wrap;gap:5px 14px;font:11px/1.4 system-ui}
@media(max-width:640px){
#harmonic-world:has(#harmonic-lesson-board){--sfi-world-panel-condensed-height:min(40dvh,340px)}
}
/* Multiline reconstruction groups use the established rectangular group radius.
Capsule radii belong to single-row selectors, never a tall button grid. */
#harmonic-reconstruction .sfi-segmented-control{border-radius:var(--sfi-panel-radius,12px)}
#harmonic-reconstruction .sfi-segmented-control button{border-radius:6px}
#harmonic-reconstruction [data-sfi-control-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
#harmonic-reconstruction [data-modes]{grid-template-columns:repeat(5,minmax(0,1fr))}
#harmonic-reconstruction canvas{display:block;width:100%;height:auto;max-width:600px}
#harmonic-reconstruction #reconstruction-phase{min-width:0}
#harmonic-reconstruction .sfi-control-row:has(#reconstruction-phase){--sfi-control-value-width:64px}
#harmonic-reconstruction [data-modes] button{padding:3px;display:grid;gap:2px;font-size:10px;line-height:1.3;border:0;background:transparent}
#harmonic-reconstruction [data-modes] button[data-included="true"]{border:0;background:transparent;color:#e4f1fa}
#harmonic-reconstruction [data-modes] canvas{width:100%;height:auto;aspect-ratio:96/80}