:root {
  color-scheme: light dark;
  --primary: #4477AA;
  --info: #66CCEE;
  --neutral: #BBBBBB;
  --alert: #EE6677;
  --ink: #203246;
  --muted: #536477;
  --paper: #F7F8FA;
  --line: #DCE3EB;
  --surface: #FFFFFF;
  --plot: #F3F6FA;
  --selected: #E7EDF4;
  --disabled: #EDF1F5;
  --shadow: #20324608;
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E3EAF2;
    --muted: #A8B8CB;
    --paper: #0F1722;
    --line: #33465C;
    --surface: #172331;
    --plot: #111C29;
    --selected: #25374D;
    --disabled: #243447;
    --shadow: #00000033;
  }
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
a { color: var(--ink); text-decoration-color: var(--primary); text-underline-offset: .25em; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.site-shell { width: min(100% - 3rem, 1040px); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px; border-bottom: 1px solid var(--line); }
.wordmark { font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.brand-mark { color: var(--primary); font-size: 1.55rem; letter-spacing: -.15em; margin-right: .65rem; }
nav { display: flex; gap: .4rem; }
nav a { padding: .65rem 1rem; text-decoration: none; border-radius: 9px; font-size: .9rem; }
nav a[aria-current="page"] { color: var(--ink); background: var(--selected); }
.home { padding-top: 1rem; }
.intro { padding: 1.5rem .5rem 0; }
.eyebrow { font-size: .69rem; font-weight: 700; letter-spacing: .16em; color: var(--muted); margin: 0 0 .7rem; }
h1 { font-size: 1.6rem; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 .5rem; }
p { line-height: 1.65; }
.intro > p:last-child { color: var(--muted); font-size: .9rem; margin: 0; }
.audio-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; box-shadow: 0 12px 38px var(--shadow); }
h2 { font-size: 1.35rem; letter-spacing: -.025em; margin: 0; }
.mic-status { font-size: .74rem; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 50px; padding: .4rem .8rem; margin: 0; text-align: center; }
.spectrum-panel { container-type: inline-size; position: relative; padding: 2.2rem 1.5rem 1rem 3.3rem; background: var(--plot); border: 1px solid var(--line); border-radius: 13px; }
#dancinglights { --balloon-headroom: 40%; --plot-side-inset: 0%; --plot-baseline: 3px; padding-inline: var(--plot-side-inset); position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); height: clamp(210px, 28vw, 320px); }
#dancinglights::before { content: ""; position: absolute; inset: var(--balloon-headroom) var(--plot-side-inset) var(--plot-baseline); background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%); pointer-events: none; }
.balloon-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; contain: layout paint; pointer-events: none; }
.balloon-layer canvas { display: block; width: 100%; height: 100%; }
.bark-copy { position: absolute; top: 0; bottom: 0; }
.bark-group { position: relative; min-width: 0; }
.meter { position: relative; height: 100%; min-width: 0; }
.meter:focus-visible { z-index: 2; }
.meter-track { position: absolute; inset: var(--balloon-headroom) 0 var(--plot-baseline); pointer-events: none; }
.physics-controls { font-size: .8rem; margin-top: 1rem; }
.physics-controls summary { cursor: pointer; }
.physics-controls label { display: block; margin: .5rem 0; }
.physics-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.physics-fields input { width: 6rem; margin-left: .5rem; }
.physics-status { margin: 0; font-size: .8rem; }
.audio-card[data-expanded] .physics-controls { display: none; }
.audio-card[data-expanded] .physics-status:not(:empty) { position: absolute; bottom: 1rem; z-index: 2; background: var(--surface); }
.meter-guide { position: absolute; top: var(--balloon-headroom); bottom: var(--plot-baseline); left: calc(var(--plot-side-inset) - 2.6rem); display: flex; flex-direction: column; justify-content: space-between; font-size: .6rem; letter-spacing: .05em; color: var(--muted); }
.meter-guide > :first-child { transform: translateY(-50%); }
.meter-guide > :last-child { transform: translateY(50%); }
.spectrum-labels { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .6rem; letter-spacing: .13em; padding-top: 1rem; }
.audio-controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: 1rem; }
.scroll-control { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .65rem; }
button { border: 1px solid var(--primary); border-radius: 9px; padding: .75rem 1.1rem; font-size: .85rem; cursor: pointer; min-height: 44px; }
button.primary { background: var(--primary); color: white; }
button.fullscreen-button, button.motion-button { background: var(--surface); color: var(--ink); border-color: var(--line); }
button:disabled { cursor: default; color: var(--muted); background: var(--disabled); border-color: var(--line); }
button:not(:disabled):hover { box-shadow: 0 0 0 2px var(--line); }
.display-note { color: var(--muted); font-size: .7rem; margin: .75rem 0 0; display: flex; justify-content: space-between; gap: 1rem; }
.control-note, .display-status { margin: 0; }
.frame-rate { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 7ch; text-align: right; }
.display-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.wake-status { white-space: nowrap; }
.screen-error, .audio-stopped { color: var(--ink); font-size: .82rem; margin: 0; }
.screen-error:not(:empty) { margin-top: .75rem; }
html:has(.audio-card[data-expanded]), body:has(.audio-card[data-expanded]) { overflow: hidden; }
.site-shell:has(.audio-card[data-expanded]) { visibility: hidden; }
.audio-card[data-expanded] { visibility: visible; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; position: fixed; inset: 0; z-index: 100; width: 100%; height: 100dvh; margin: 0; padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); border: 0; border-radius: 0; overflow: hidden; background: var(--plot); touch-action: pinch-zoom; }
/* Keep the enclosure behind a footer whose rows reserve their actual height. */
.audio-card[data-expanded] > :not(.song-tools, .display-note, .recognized-song, .recovery-notices) { position: absolute; }
.audio-card[data-expanded] .spectrum-panel { inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 0; padding: 0; border: 0; border-radius: 0; }
.audio-card[data-expanded] #dancinglights { height: 100%; min-height: 0; background: none; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.audio-card[data-expanded] .audio-controls { position: absolute; top: max(.75rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); z-index: 3; padding: 0; }
.audio-card[data-expanded] .fullscreen-button { position: fixed; top: max(.75rem, env(safe-area-inset-top)); left: max(.75rem, env(safe-area-inset-left)); z-index: 101; width: auto; height: auto; min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid var(--line); overflow: visible; clip-path: none; white-space: nowrap; pointer-events: auto; }
.audio-card[data-expanded] :is(.mic-status, .primary, .scroll-control, .meter-guide, .spectrum-labels, .control-note, .wake-status, .calibration-status, .calibration-controls) { display: none; }
.audio-card[data-expanded] .display-note { position: relative; order: 2; flex: none; align-self: flex-end; z-index: 3; margin: 0; pointer-events: none; }
.audio-card[data-expanded] .frame-rate { padding: .2rem .35rem; border-radius: 4px; color: var(--ink); background: var(--surface); }
/* Recovery instructions must paint above every row of the song footer. */
.audio-card[data-expanded] :is(.audio-error, .screen-error, .audio-stopped):not(:empty) { position: absolute; bottom: max(.75rem, env(safe-area-inset-bottom)); left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right)); z-index: 4; padding: .75rem; background: var(--surface); border-radius: 9px; }
.audio-card::backdrop { background: var(--paper); }
.audio-error { color: var(--ink); font-size: .82rem; margin: 0; overflow-wrap: anywhere; }
.audio-error:not(:empty) { border-left: 3px solid var(--alert); padding-left: .75rem; margin-top: .75rem; }
.how-it-works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.25rem .5rem; }
h3 { font-size: .92rem; margin: 0 0 .5rem; }
.how-it-works p { color: var(--muted); font-size: .8rem; margin: 0; }
.learning-topics { margin: 2.5rem 0; }
.learning-intro { max-width: 65ch; color: var(--muted); font-size: .9rem; }
.learning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.learning-card { min-width: 0; display: flex; flex-direction: column; gap: .75rem; padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.learning-card h3 { font-size: 1rem; margin: 0; }
.learning-card p { color: var(--muted); font-size: .85rem; margin: 0; }
.learning-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: auto; font-size: .8rem; }
.learning-links a { display: inline-flex; align-items: center; min-height: 44px; }
footer { border-top: 1px solid var(--line); padding: 1rem 0; color: var(--muted); font-size: .7rem; display: flex; justify-content: space-between; gap: 1rem; }
.about-page { max-width: 720px; margin: 4rem auto; }
.about-page h2 { margin-top: 2.5rem; }
.about-page li { padding: .4rem 0; line-height: 1.6; }
@media (max-width: 640px) {
  .site-shell { width: calc(100% - 2rem); }
  .site-header { min-height: 60px; }
  .wordmark { font-size: .55rem; }
  .brand-mark { margin-right: .3rem; }
  nav a { padding: .6rem .7rem; font-size: .8rem; }
  .audio-card { padding: .75rem; }
  .mic-status { font-size: .6rem; padding: .35rem .5rem; }
  .audio-controls { flex-wrap: wrap; gap: .5rem; }
  .button-row { gap: .35rem; }
  button { font-size: .75rem; padding: .65rem .6rem; }
  .display-note { flex-direction: column; gap: .15rem; }
  .display-note .mic-status { align-self: flex-start; }
  .spectrum-panel { padding-right: .65rem; padding-left: 3rem; }
  .meter-guide { left: calc(var(--plot-side-inset) - 2.55rem); }
  .how-it-works { grid-template-columns: 1fr; gap: 1rem; }
  footer { flex-direction: column; gap: .5rem; }
}
.frequency-tooltip { display: flex; align-items: center; gap: .45rem; position: absolute; top: .25rem; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: .3rem .6rem; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: .75rem; pointer-events: none; }
.frequency-tooltip[hidden] { display: none; }
.frequency-swatch { width: .85rem; height: .85rem; flex: none; background: var(--band-color); border: 1px solid currentColor; }
.audio-card[data-expanded] .frequency-tooltip { top: var(--fullscreen-control-bottom, 10rem); }

.calibration-status { margin: .25rem 0; font-size: .8rem; }
.calibration-controls { margin-top: .5rem; font-size: .875rem; }
.calibration-controls summary { cursor: pointer; }
.calibration-controls label { display: block; margin: .5rem 0; }
.calibration-controls input { width: 6rem; margin-left: .25rem; font: inherit; }

.motion-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: .75rem 0; }
.motion-status { margin: 0; font-size: .82rem; }
.motion-status:empty { display: none; }
.microphone-permission, .permission-help { font-size: .82rem; margin: .75rem 0; }
.permission-help summary { cursor: pointer; }
.permission-help p { max-width: 70ch; line-height: 1.5; }
.audio-card[data-expanded] :is(.microphone-permission, .permission-help) { display: none; }
.audio-card[data-expanded] .motion-controls { display: none; }
.runtime-update { display: block; width: fit-content; min-height: 44px; padding: .6rem 0; }
.song-tools { margin: 1rem 0; font-size: .82rem; }
.song-tools p { max-width: 70ch; }
.song-detection { font-weight: 700; white-space: nowrap; }
.audio-controls .cancel-recognition[hidden] { display: none; }
.song-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.song-actions [hidden], .recognized-song[hidden] { display: none; }
.song-history summary { cursor: pointer; min-height: 44px; padding: .7rem 0; }
.song-history li { padding: .3rem 0; overflow-wrap: anywhere; }
.recognized-song { display: flex; gap: .75rem; align-items: center; min-width: 0; padding: .5rem; margin-bottom: .5rem; font-size: .85rem; background: var(--surface); color: var(--ink); border-radius: 6px; }
.song-window { flex: 1; min-width: 0; overflow: hidden; }
.song-title { display: block; width: max-content; white-space: nowrap; }
.song-overflow .song-title, .audio-card[data-expanded] .song-title { animation: song-scroll var(--song-duration) var(--song-delay) linear infinite; }
@keyframes song-scroll { from { transform: translateX(var(--song-entry)); } to { transform: translateX(var(--song-travel)); } }
@media (prefers-reduced-motion: reduce) {
  .song-title, .song-overflow .song-title, .audio-card[data-expanded] .song-title { animation: none; white-space: normal; width: auto; overflow-wrap: anywhere; }
}
.audio-card[data-expanded] .song-tools { position: relative; order: 1; flex: none; z-index: 3; margin: 0; pointer-events: none; }
.audio-card[data-expanded] .song-tools > :not(.recognition-status, .recognition-cooldown) { display: none; }
.audio-card[data-expanded] :is(.recognition-status, .recognition-cooldown) { width: fit-content; margin: 0; padding: .4rem .6rem; border-radius: 6px; background: var(--surface); }
.audio-card[data-expanded] .button-row { max-width: calc(100vw - 10.5rem); justify-content: flex-end; }
.audio-card[data-expanded] .recognized-song { position: relative; order: 3; flex: none; z-index: 3; margin: 0; pointer-events: none; }
.audio-card[data-expanded] .runtime-update { position: absolute; bottom: max(5rem, env(safe-area-inset-bottom)); left: .75rem; z-index: 3; padding: .6rem; background: var(--surface); }

/* Shared native controls, used by Rust and JavaScript. */
.site-header { flex-wrap: wrap; padding-block: .5rem; }
nav { flex-wrap: wrap; }
.setting-switch { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding: .35rem; cursor: pointer; font-size: .85rem; color: var(--ink); }
.setting-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 2.6rem; height: 1.5rem; border: 2px solid var(--muted); border-radius: 1rem; background: var(--surface); margin: 0; position: relative; cursor: pointer; }
.setting-switch input::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--muted); }
.setting-switch input:checked { background: var(--primary); border-color: var(--primary); }
.setting-switch input:checked::after { left: 1.2rem; background: white; }
.setting-switch:has(input:disabled) { opacity: .65; cursor: default; }
.motion-controls { margin: 0; }
.settings-section { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; font-size: .875rem; }
.settings-section > summary { min-height: 44px; cursor: pointer; font-weight: bold; }
.control-row, .settings-section label:not(.setting-switch) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin: .5rem 0; }
.settings-section :is(input:not([type=checkbox]), select, textarea) { min-height: 44px; max-width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--muted); border-radius: .4rem; padding: .35rem; }
.physics-fields { display: block; }
.settings-section input:not([type=checkbox]) { width: 10rem; }
.settings-section input[type=range] { width: min(18rem, 50%); }
.advanced-page { padding-block: 1rem; }
.reduced-motion-note { display: none; }
@media (prefers-reduced-motion: reduce) { .reduced-motion-note { display: block; } }
.audio-card[data-expanded] :is(.setting-switch, .settings-section, .motion-status) { display: none; }
.audio-card[data-expanded] .song-detection { display: inline-flex; }
.audio-card[data-expanded] .physics-status:not(:empty) { z-index: 4; }
@media (max-width: 600px) {
  .control-row, .settings-section label:not(.setting-switch) { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .settings-section :is(input:not([type=checkbox]), select, textarea) { width: 100%; }
  .settings-section input[type=range] { width: 100%; }
}
.listening-review { margin-top: 1rem; }
.input-source-controls { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.input-source-controls .control-row { flex: 1 1 15rem; justify-content: flex-start; }
.input-source-controls .review-file { flex: 1; width: auto; min-width: 0; }
.playback-controls:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.playback-controls .setting-switch { margin: 0; }
.review-plot { display: block; width: 100%; height: auto; background: var(--plot); border: 1px solid var(--line); border-radius: .5rem; }
.settings-section .review-notes { width: min(100%, 30rem); }
.review-plot-key { font-size: .75rem; }

/* One shared control bar, including expanded page/native fullscreen. */
.button-row { align-items: center; width: 100%; }
.mic-status:not(:has(span:not(:empty))) { display: none; }
.mic-status { max-width: 18ch; border: 0; padding: 0; text-align: left; }
.input-source-controls { margin-bottom: .5rem; }
.playback-controls { margin-bottom: .75rem; }
.recognition-control { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.recognition-status { flex-basis: 100%; max-width: 32ch; font-size: .75rem; margin: 0; overflow-wrap: anywhere; }
.recognition-status:empty { display: none; }
.recognition-ring { width: 24px; height: 24px; flex: none; transform: rotate(-90deg); }
.recognition-ring circle { fill: none; stroke-width: 2; }
.ring-track { stroke: var(--line); }
.ring-progress { stroke: currentColor; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--recognition-progress, 0)); }
.recognition-ring[data-phase="off"] { opacity: .45; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.audio-card[data-expanded] { justify-content: flex-end; }
.audio-card[data-expanded] .audio-controls { top: max(.5rem, env(safe-area-inset-top)); left: max(.5rem, env(safe-area-inset-left)); right: max(.5rem, env(safe-area-inset-right)); padding: 0; }
.audio-card[data-expanded] .button-row { max-width: none; justify-content: flex-start; gap: .25rem .5rem; }
.audio-card[data-expanded] .button-row .setting-switch { display: inline-flex; }
.audio-card[data-expanded] .button-row .motion-controls { display: flex; }
.audio-card[data-expanded] .fullscreen-button { position: static; min-height: 44px; }
.audio-card[data-expanded] .button-row .mic-status:has(span:not(:empty)) { display: block; }
.audio-card[data-expanded] :is(.input-source-controls, .playback-controls, .tone-status, .song-tools, .display-note, .reduced-motion-note) { display: none; }
.audio-card[data-expanded] .recognized-song { width: 100%; max-height: 32vh; overflow: auto; border-radius: 0; padding: .35rem 0; background: none; font-size: clamp(1rem, 3.5vw, 1.4rem); font-weight: 600; text-shadow: 0 0 4px var(--plot), 0 0 8px var(--plot); }
.audio-card[data-expanded] .recovery-notices { position: relative; order: 2; z-index: 4; padding: 2px; max-height: 25vh; overflow: auto; background: var(--surface); border-radius: 9px; }
.audio-card[data-expanded] .recovery-notices :is(.audio-error, .screen-error, .audio-stopped, .physics-status, .runtime-update):not(:empty) { position: static; margin: 0; padding: .5rem .75rem; display: block; }
.input-source-controls .control-row { min-width: 0; gap: .5rem; }
.input-source-controls :is(select, input) { min-height: 44px; min-width: 0; max-width: 100%; font: inherit; }
.input-source-controls select { flex: 1; width: 10rem; }
.input-source-controls .review-file { width: 10rem; }
.physics-fields .control-row input { width: 6rem; min-width: 0; flex: 0 1 6rem; }

/* A bounded scene and a reserved control grid, shared by Home and Advanced. */
.button-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: start; }
.button-row > .setting-switch, .button-row > button, .button-row > .recognition-control, .button-row > .motion-controls { min-width: 0; min-height: 44px; margin: 0; }
.button-row .setting-switch { white-space: normal; min-height: 44px; }
.button-row .setting-switch span[role="button"] { cursor: help; padding: .3rem 0; }
.button-row .setting-switch span[role="button"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.button-row .mic-status, .display-note { display: none !important; }
.visual-content { min-width: 0; }
.video-panel { padding: .5rem 0; }
.video-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.video-form label { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 200px; }
.video-form input { min-width: 0; flex: 1; min-height: 44px; font: inherit; }
.youtube-frame:has(iframe) { min-height: 200px; aspect-ratio: 16 / 9; }
.youtube-frame iframe { width: 100%; height: 100%; min-height: 200px; border: 0; display: block; }
.youtube-status { margin: .35rem 0; overflow-wrap: anywhere; }
.youtube-status:empty { display: none; }
.camera-controls { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; }
.camera-controls .control-row { flex: 1; margin: 0; }
.camera-controls input { flex: 1; min-width: 0; min-height: 44px; }
.camera-angle { min-width: 5ch; font-variant-numeric: tabular-nums; }
.control-help { position: fixed; z-index: 120; padding: .75rem; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); box-shadow: 0 4px 20px #0004; font-size: .85rem; line-height: 1.5; max-height: calc(100dvh - 24px); overflow: auto; }
.audio-card[data-expanded] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(min(2rem, 10dvh), 1fr) minmax(0, max-content) minmax(0, max-content) auto; gap: .35rem; }
.audio-card[data-expanded] > .visual-content { position: relative; inset: auto; grid-row: 1; grid-column: 1; min-height: 0; display: flex; flex-direction: column; }
.audio-card[data-expanded].video-editing > .visual-content { overflow: auto; }
.audio-card[data-expanded] .spectrum-panel { position: relative; inset: auto; flex: 1; height: auto; min-height: 0; display: flex; }
.audio-card[data-expanded] #dancinglights { flex: 1; height: auto; min-height: 0; }
.audio-card[data-expanded] .audio-controls { position: relative; inset: auto; grid-row: 4; grid-column: 1; width: 100%; padding: .25rem; background: var(--surface); border-radius: 8px; }
.audio-card[data-expanded] .recognized-song { position: relative; grid-row: 3; grid-column: 1; min-height: 0; margin: 0; max-height: none; align-items: flex-start; pointer-events: auto; }
.audio-card[data-expanded] .recovery-notices { grid-row: 2; grid-column: 1; min-height: 0; max-height: none; }
.audio-card[data-expanded] .button-row { display: grid; gap: .15rem .5rem; }
.audio-card[data-expanded] :is(.camera-controls, .display-controls, .video-form) { display: none; }
.audio-card[data-expanded].video-editing .video-form { display: flex; }
.audio-card[data-expanded] .control-help { position: fixed; }
.audio-card[data-expanded].video-active .video-panel { flex: none; min-height: 200px; }
.audio-card[data-expanded].video-active .youtube-frame { height: clamp(200px, 28dvh, 360px); aspect-ratio: auto; }
.audio-card[data-expanded] .frequency-tooltip { top: 8px; }
@media (max-width: 600px) and (orientation: portrait) {
  .button-row, .audio-card[data-expanded] .button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camera-controls .control-row { flex-wrap: wrap; }
}
@media (orientation: landscape) {
  .audio-card[data-expanded].video-active > .visual-content { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 0; }
  .audio-card[data-expanded].video-active :is(.video-panel, .youtube-frame, .youtube-frame iframe) { min-height: 0; }
  .audio-card[data-expanded].video-active .youtube-frame { height: 100%; aspect-ratio: auto; }
  .audio-card[data-expanded].video-active .video-panel { padding: 0 .5rem 0 0; display: flex; flex-direction: column; }
  .audio-card[data-expanded].video-active .youtube-frame { flex: 1; }
}
/* The switch has a 44px hit area; its visible pill remains compact. */
.button-row .setting-switch { padding: 0; gap: .3rem; min-width: 0; }
.button-row .setting-switch span { min-width: 0; }
.button-row .setting-switch input { width: 44px; height: 44px; border: 0; background: transparent; }
.button-row .setting-switch input::before { content: ''; position: absolute; box-sizing: border-box; left: 1px; top: 10px; width: 42px; height: 24px; border: 2px solid var(--muted); border-radius: 20px; background: var(--surface); }
.button-row .setting-switch input::after { left: 5px; top: 14px; width: 16px; height: 16px; }
.button-row .setting-switch input:checked { background: transparent; }
.button-row .setting-switch input:checked::before { background: var(--primary); border-color: var(--primary); }
.button-row .setting-switch input:checked::after { left: 23px; }
.button-row .recognition-control { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: .25rem; }
.button-row .recognition-control .recognition-status { grid-column: 1 / -1; }
.button-row .recognition-ring { width: 18px; height: 18px; }
.audio-card[data-expanded] .recognition-status { max-height: 12dvh; overflow: auto; }
.recognition-status[data-routine="true"] { display: none; }
.ceiling-bars .meter-track { inset: var(--plot-baseline) 0 var(--balloon-headroom); }