/* Audio Studio: car-audio design workspace, themed by global Toolbox tokens. */
/* The drivers' colours, wherever they are drawn: the studio and its listening room. */
.as-app, .as-listen { --as-mid: #38bdf8; --as-tweet: #ae8aff; --as-sub: #f5a524; --as-panel: #34d399; --as-exciter: #f472b6; }
.as-app { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
.as-heading { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4) var(--space-6); }
/* Studio / Catalog: the switch between Audio Studio's two halves (partials/audio-nav.php). */
.as-nav { display:inline-flex; flex:none; }
.as-nav .tab { flex:none; min-width:6.5rem; text-decoration:none; }
@media (max-width:480px) { .as-nav { display:flex; width:100%; } .as-nav .tab { flex:1 1 0; min-width:0; padding-inline:.4rem; } }
.as-nav .tab[aria-current="page"] { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.as-heading h1 { font-size:var(--text-3xl); }
.as-heading .lede { max-width:68ch; }
.as-topbar { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-4); }
.as-topbar__name { flex:1 1 min(270px,100%); min-width:0; max-width:450px; }
.as-topbar__name .input { width:100%; min-width:0; }
.as-topbar__name .label { margin-bottom:.4rem; display:block; }
.as-topbar__drafts { flex:0 1 260px; min-width:0; }
.as-topbar__drafts .label { margin-bottom:.4rem; display:block; }
.as-topbar__drafts .select { width:100%; }
.as-topbar__drafts[hidden] { display:none; }
.as-actions { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; align-self:flex-end; }
/* More: the actions used now and then, out of the way until wanted. */
.as-more { position:relative; }
.as-more > summary { list-style:none; cursor:pointer; }
.as-more > summary::-webkit-details-marker { display:none; }
.as-more > summary::after { content:''; width:.4rem; height:.4rem; margin-left:.45rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.as-more[open] > summary::after { transform:translateY(1px) rotate(-135deg); }
.as-more__menu { position:absolute; right:0; top:calc(100% + .35rem); z-index:20; min-width:12rem; display:grid; padding:.3rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-lg); }
.as-more__menu button { all:unset; box-sizing:border-box; padding:.5rem .7rem; border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--text); cursor:pointer; }
.as-more__menu button:hover, .as-more__menu button:focus-visible { background:var(--accent-soft); color:var(--accent-text); }
.as-more__menu button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.as-more__menu button:disabled { color:var(--text-dim); cursor:default; background:none; }
.as-savestate { display:inline-flex; align-items:center; gap:.45rem; margin-top:.55rem; font-size:var(--text-xs); color:var(--text-muted); }
.as-savestate::before { content:''; width:.5rem; height:.5rem; border-radius:50%; background:var(--text-dim); }
.as-savestate[data-state="saved"]::before { background:var(--ok-text); }
.as-savestate[data-state="modified"] { color:var(--warn-text); }
.as-savestate[data-state="modified"]::before { background:var(--warn); }
.as-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); }
.as-metric { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); display:grid; align-content:center; gap:.3rem; min-width:0; }
.as-metric span { color:var(--text-muted); font-size:var(--text-xs); font-weight:650; letter-spacing:.02em; }
.as-metric strong { font-size:clamp(1.4rem,2vw,1.9rem); font-weight:720; font-variant-numeric:tabular-nums; letter-spacing:-.045em; overflow-wrap:anywhere; line-height:1.15; }
.as-metric small { color:var(--text-dim); font-size:.71rem; }
.as-workspace { display:grid; grid-template-columns:minmax(270px,1fr) minmax(270px,1fr) minmax(260px,.95fr); grid-template-areas:"builder detail electronics" "builder detail analysis"; align-items:start; gap:var(--space-3); }
.as-panel { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); min-width:0; overflow:hidden; }
.as-builder { grid-area:builder; }
.as-detail { grid-area:detail; }
.as-electronics { grid-area:electronics; }
.as-analysis { grid-area:analysis; }
.as-panel__head { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding:1.05rem 1.1rem; border-bottom:1px solid var(--border); }
.as-panel__head h2 { font-size:1rem; line-height:1.3; }
.as-panel__head p { font-size:var(--text-xs); color:var(--text-dim); margin-top:.25rem; line-height:1.5; }
.as-panel__head .btn { white-space:nowrap; }
.as-inline-field { font-size:var(--text-xs); display:flex; flex-direction:column; gap:.25rem; color:var(--text-muted); }
.as-inline-field .select { min-width:115px; }
/* The map: the listening room's car (audio-studio-listen-cabin.js) on the same dark screen, its palette the screen's
   (below, with .as-listen__stage), in the site's light mode too. */
.as-plan-wrap {
    margin:.8rem 1.1rem 0; padding:1rem .5rem .85rem; border-radius:18px; border:1px solid hsl(220 20% 19%); color:var(--text);
    background:radial-gradient(ellipse 60% 45% at 50% 45%,hsl(var(--accent-h) 70% 45% / .14),transparent 70%),linear-gradient(180deg,hsl(225 30% 8%),hsl(228 34% 4%));
    box-shadow:inset 0 1px 0 hsl(0 0% 100% / .06);
}
#as-cabin { display:block; max-width:270px; width:100%; margin:0 auto; overflow:visible; }
#as-seats, #as-car { pointer-events:none; }
.as-studio__ambient { opacity:.5; }
/* The roof layer puts the headliner back over the cabin, for the speakers in it. */
.as-studio__headliner { display:none; fill:hsl(222 10% 15% / .93); stroke:hsl(205 45% 82% / .3); stroke-width:.8; stroke-dasharray:4 3; pointer-events:none; }
#as-cabin[data-layer="roof"] .as-studio__headliner { display:inline; }
/* The seats layer keeps the seats bright and steps the rest of the car back. */
#as-cabin[data-layer="seats"] #as-car { opacity:.55; }
.as-marker { cursor:pointer; }
.as-marker__ring { fill:transparent; stroke:var(--accent); stroke-width:2.5; opacity:0; }
.as-marker--selected .as-marker__ring { opacity:1; }
.as-marker__hit { fill:transparent; }
.as-marker__core { fill:hsl(224 24% 10% / .82); stroke:hsl(210 25% 95% / .4); stroke-width:1.4; }
.as-marker--occupied .as-marker__core { fill:var(--as-mid); stroke:var(--as-mid); fill-opacity:.22; stroke-width:2; }
.as-marker--tweeter .as-marker__core { fill:var(--as-tweet); stroke:var(--as-tweet); fill-opacity:.23; }
.as-marker--subwoofer .as-marker__core { fill:var(--as-sub); stroke:var(--as-sub); fill-opacity:.23; }
.as-marker--panel .as-marker__core { fill:var(--as-panel); stroke:var(--as-panel); fill-opacity:.23; }
.as-marker--exciter .as-marker__core { fill:var(--as-exciter); stroke:var(--as-exciter); fill-opacity:.23; stroke-dasharray:3 1.6; }
/* One layer of the map at a time (Cabin, Seats, Roof): the others' markers and channel badges step aside. */
#as-cabin[data-layer="cabin"] [data-layer]:not([data-layer="cabin"]),
#as-cabin[data-layer="seats"] [data-layer]:not([data-layer="seats"]),
#as-cabin[data-layer="roof"] [data-layer]:not([data-layer="roof"]) { display:none; }
.as-layers { display:flex; gap:.25rem; margin:.8rem 1.1rem 0; padding:.25rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-sunken); }
.as-layers button { flex:1; display:inline-flex; justify-content:center; align-items:center; gap:.4rem; padding:.4rem .5rem; border:0; border-radius:var(--radius-sm); background:none; color:var(--text-muted); font:inherit; font-size:var(--text-sm); font-weight:570; cursor:pointer; }
.as-layers button:hover { color:var(--text); }
.as-layers button[aria-pressed="true"] { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.as-layers button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.as-layers__count { min-width:1.4em; padding:0 .35em; border-radius:999px; background:var(--accent-soft); color:var(--accent-text); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.as-marker__letter { fill:var(--text); font-family:var(--font-mono); font-size:10px; font-weight:750; pointer-events:none; text-anchor:middle; dominant-baseline:central; }
.as-marker:not(.as-marker--occupied) .as-marker__letter { fill:var(--text-muted); }
.as-marker__badge { display:none; pointer-events:none; }
.as-marker__badge--on { display:inline; }
.as-marker__badge circle { fill:var(--surface); stroke:var(--border-strong); stroke-width:1.2; }
.as-marker__badge text { fill:var(--text); font-family:var(--font-mono); font-size:8px; font-weight:750; text-anchor:middle; dominant-baseline:central; }
.as-marker__badge--problem circle { fill:var(--warn-soft); stroke:var(--warn); }
.as-marker__badge--problem text { fill:var(--warn-text); }
.as-marker:focus-visible { outline:none; }
.as-marker:focus-visible .as-marker__ring { opacity:1; stroke-dasharray:3 2; }
.as-map-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 1rem; font-size:.69rem; color:var(--text-muted); margin:.2rem 0 0; }
.as-map-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.as-dot { width:8px; height:8px; border-radius:50%; background:var(--as-mid); }
.as-dot--tweeter { background:var(--as-tweet); }
.as-dot--sub { background:var(--as-sub); }
.as-dot--panel { background:var(--as-panel); }
.as-dot--exciter { background:var(--as-exciter); }
.as-dot--empty { border:1px solid var(--text-dim); background:transparent; }
.as-builder__footer { padding:1.1rem; border-top:1px solid var(--border); }
.as-builder__footer .label { display:block; margin-bottom:.4rem; }
.as-preset-line { display:flex; flex-wrap:wrap; gap:.5rem; }
.as-preset-line .select { flex:1 1 180px; }
.as-builder__footer .field-help { margin-top:.55rem; }
.as-editor { padding:1rem 1.1rem; min-height:170px; }
.as-placeholder { border:1px dashed var(--border-strong); border-radius:var(--radius-md); color:var(--text-dim); padding:2rem 1rem; text-align:center; font-size:var(--text-sm); }
.as-editor__title { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; align-items:center; font-size:var(--text-sm); font-weight:700; margin-bottom:.85rem; }
.as-editor__title small { font-size:var(--text-xs); color:var(--text-muted); font-weight:400; }
.as-formgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; padding:1rem 1.1rem; }
.as-editor .as-formgrid { padding:0; }
.as-field { display:block; min-width:0; }
.as-field--wide { grid-column:1/-1; }
.as-field .label { display:block; margin-bottom:.3rem; font-size:var(--text-xs); line-height:1.35; }
.as-field .input,.as-field .select { width:100%; }
.as-check { display:flex; gap:.5rem; align-items:center; font-size:var(--text-sm); }
.as-check input { accent-color:var(--accent); width:1rem; height:1rem; }
.as-editor__actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem; }
.as-list-head { border-top:1px solid var(--border); display:flex; justify-content:space-between; padding:.9rem 1.1rem; align-items:center; }
.as-list-head h3,.as-circuit-title { font-size:.82rem; font-weight:680; }
.as-list-head span { color:var(--text-dim); font-size:var(--text-xs); }
.as-speaker-list { max-height:330px; overflow-y:auto; padding:0 .65rem .65rem; }
.as-speaker-row { display:flex; align-items:center; gap:.55rem; padding:.55rem; border-radius:var(--radius-sm); border:1px solid transparent; margin-bottom:.25rem; }
.as-speaker-row:hover { background:var(--surface-hover); }
.as-speaker-row--active { background:var(--accent-soft); border-color:var(--accent-line); }
.as-speaker-row__open { flex:1; min-width:0; text-align:left; font-size:var(--text-xs); line-height:1.45; }
.as-speaker-row__open strong { font-size:var(--text-sm); font-weight:620; display:block; overflow-wrap:anywhere; }
.as-speaker-row__open span { display:block; color:var(--text-muted); }
.as-speaker-row__remove { color:var(--danger-text); font-size:.9rem; line-height:1; padding:.4rem .5rem; border-radius:var(--radius-sm); }
.as-speaker-row__remove:hover { background:var(--danger-soft); }
.as-speaker-list__empty { font-size:var(--text-xs); color:var(--text-dim); padding:1rem; }
.as-electronics__results { border-top:1px solid var(--border); margin:0 1.1rem; padding:.85rem 0; display:grid; gap:.7rem; }
.as-electronics__results div,.as-summary__row { display:flex; justify-content:space-between; gap:1rem; font-size:var(--text-sm); align-items:baseline; }
.as-electronics__results span,.as-summary__row span { color:var(--text-muted); }
.as-electronics__results strong,.as-summary__row strong { white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; font-size:.86rem; }
.as-electronics>.field-help { padding:0 1.1rem 1rem; margin:0; }
.as-warnings { padding:1rem 1.1rem 0; display:grid; gap:.45rem; }
.as-warning { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.65rem .8rem; font-size:var(--text-xs); line-height:1.55; }
.as-warning--ok { background:var(--ok-soft); border-color:transparent; color:var(--ok-text); }
.as-warning--warn { background:var(--warn-soft); border-color:transparent; color:var(--warn-text); }
.as-warning--info { background:var(--neutral-soft); border-color:transparent; color:var(--text-muted); }
.as-circuit-title { padding:.95rem 1.1rem .55rem; }
.as-circuits { display:grid; gap:.4rem; padding:0 1.1rem 1rem; max-height:270px; overflow:auto; }
.as-circuit { display:flex; gap:.65rem; align-items:start; font-size:var(--text-xs); justify-content:space-between; padding:.55rem .65rem; background:var(--surface-sunken); border-radius:var(--radius-sm); }
.as-circuit strong { font-weight:650; }
.as-circuit span { color:var(--text-muted); text-align:right; }
.as-circuit__power { display:block; margin-top:.15rem; font-size:.68rem; color:var(--text-dim); }
.as-circuit__power--warn { color:var(--warn-text); }
.as-circuit--warn { outline:1px solid var(--warn); }
.as-summary { padding:1rem 1.1rem; border-top:1px solid var(--border); display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem; }
.as-summary__row strong { white-space:normal; overflow-wrap:anywhere; }
.as-status { min-height:1.5rem; font-size:var(--text-sm); color:var(--accent-text); padding:.2rem .15rem; }
.as-topbar .as-status { flex:1 1 100%; border-top:1px solid var(--border); padding:.65rem 0 0; min-height:0; overflow-wrap:anywhere; }
.as-app [hidden] { display:none!important; }
@media (max-width:1100px) { .as-workspace { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"builder detail" "electronics analysis"; } }
@media (max-width:720px) { .as-workspace { grid-template-columns:minmax(0,1fr); grid-template-areas:"builder" "detail" "electronics" "analysis"; } .as-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .as-heading h1 { font-size:var(--text-2xl); } .as-plan-wrap { margin-inline:.6rem; padding:.9rem .3rem .75rem; } }
@media (max-width:400px) { .as-metrics { gap:.5rem; } .as-metric { padding:.8rem; } .as-topbar { padding:.85rem; } .as-formgrid { gap:.6rem; } .as-actions .btn { flex:1 1 auto; } }

/* The audio catalog and a package's page. */
.ac-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ac-filter { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: var(--text-sm); color: var(--text-muted); background: var(--surface); text-decoration: none; }
.ac-filter:hover { border-color: var(--accent-line); color: var(--text); }
.ac-filter.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.ac-filter__count { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: var(--text-xs); }
.ac-filter--toggle { margin-left: auto; }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); }
.ac-card .card__body { gap: var(--space-2); }
.ac-card__badge { margin-bottom: var(--space-1); }
.ac-card__title { font-size: var(--text-lg); line-height: 1.3; }
.ac-card__title a { color: inherit; text-decoration: none; }
.ac-card__title--badge { --ab-zoom: 1.2; }
.ac-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ac-card__meta, .ac-card__types { font-size: var(--text-sm); color: var(--text-muted); }
.ac-card__summary { font-size: var(--text-sm); color: var(--text-dim); }
.ac-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.ap-head__badge { margin-bottom: var(--space-3); }
.ap-head__badge { --ab-zoom: 1.3; }
.ap-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ap-actions .btn { max-width: 100%; white-space: normal; }
.ap-cars { margin: var(--space-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
@media (max-width: 720px) { .ac-filter--toggle { margin-left: 0; } }

/* The account panel: saving to an account, sharing, the badge, and the saved packages. */
.as-account__body { padding: 1rem 1.1rem 1.2rem; }
.as-account__intro { color: var(--text-muted); font-size: var(--text-sm); max-width: 70ch; }
.as-account__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; }
.as-account__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.as-account__form { display: grid; gap: .9rem; min-width: 0; }
.as-account__form fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .8rem .9rem 1rem; margin: 0; display: grid; gap: .7rem; min-width: 0; }
.as-account__form legend { padding: 0 .3rem; }
.as-segment { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.as-segment__option { position: relative; padding: .4rem .85rem; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 570; color: var(--text-muted); cursor: pointer; }
.as-segment__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.as-segment__option:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.as-segment__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.as-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .5rem; }
.as-badge-choice { position: relative; display: grid; gap: .45rem; padding: .7rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; min-width: 0; }
.as-badge-choice:hover { border-color: var(--accent-line); }
.as-badge-choice:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.as-badge-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.as-badge-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.as-badge-choice__preview { min-width: 0; overflow: hidden; padding: .1rem 0; }
.as-badge-choice__text { display: flex; flex-wrap: wrap; gap: .1rem .45rem; align-items: baseline; font-size: var(--text-sm); }
.as-badge-choice__text span { color: var(--text-dim); font-size: var(--text-xs); }
.as-badge-options { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; align-items: start; }
.as-badge-options > [hidden] { display: none; }
.as-colour { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.as-colour__picker { width: 2.4rem; height: 2.2rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.as-colour__text { width: 8rem !important; flex: none; font-family: var(--font-mono); }
.as-account__message { min-height: 1.4rem; font-size: var(--text-sm); }
.as-account__message--ok { color: var(--ok-text); }
.as-account__message--warn { color: var(--warn-text); }
.as-account__message--info { color: var(--text-muted); }
.as-account__library { min-width: 0; }
.as-account__library-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.as-account__library-head h3 { font-size: .9rem; }
.as-account__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.as-account__item { display: grid; gap: .3rem; padding: .7rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.as-account__item.is-current { border-color: var(--accent-line); background: var(--accent-soft); }
.as-account__item-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; min-width: 0; overflow: hidden; color: inherit; text-decoration: none; }
.as-account__item-top:hover strong { color: var(--accent-text); }
.as-account__item strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.as-account__meta { font-size: var(--text-xs); color: var(--text-muted); }
.as-account__item-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.as-account__delete { color: var(--danger-text); }
@media (max-width: 900px) { .as-account__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .as-badge-options { grid-template-columns: minmax(0, 1fr); } }

/* The listening room (audio-studio-listen.js): a transport, the whole cabin with every driver pulsing, and choices. */
.as-listen__body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: var(--space-4); }
.as-listen__transport { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.as-listen__track { flex: 1 1 12rem; min-width: 0; font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-listen__seek { flex: 2 1 14rem; min-width: 0; accent-color: var(--accent); }
.as-listen__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.as-listen__volume { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--text-sm); color: var(--text-muted); }
.as-listen__volume input { width: 7rem; accent-color: var(--accent); }
.as-listen__play { min-width: 5.5rem; }
.as-listen__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

/* The screen: the car, its legend or a driver's details, and the spectrum, on a dark display as a car's own sound
   page is shown, in the site's light mode too, with its own palette (the site's accent, lit for a dark screen),
   which the studio's map shares. */
.as-listen__stage, .as-plan-wrap {
    --screen-accent: hsl(var(--accent-h) var(--accent-s) 62%);
    --strain: hsl(38 92% 58%);
    --surface: hsl(224 24% 10%); --surface-hover: hsl(224 22% 14%); --surface-sunken: hsl(226 30% 6%);
    --text: hsl(210 25% 95%); --text-muted: hsl(214 15% 72%); --text-dim: hsl(216 12% 56%);
    --border: hsl(220 20% 17%); --accent: var(--screen-accent); --accent-soft: hsl(var(--accent-h) var(--accent-s) 62% / .16);
    --accent-text: var(--screen-accent); --danger-text: hsl(0 85% 72%); --shadow-sm: 0 1px 2px hsl(228 60% 2% / .6);
    --car-paint: hsl(218 12% 17%); --car-paint-edge: hsl(222 18% 7%); --car-shine: hsl(214 12% 29%); --car-crest: hsl(212 14% 40%);
    --car-rim: hsl(205 45% 82% / .55); --car-rim-soft: hsl(205 45% 82% / .1);
    --car-glass: hsl(214 45% 6% / .84); --car-glass-hi: hsl(200 50% 34% / .5);
    --car-floor: hsl(225 22% 5%); --car-trim: hsl(222 14% 11%); --car-trim-hi: hsl(220 10% 20%);
    --car-seat: hsl(25 6% 15%); --car-seat-hi: hsl(25 6% 24%); --car-seat-part: hsl(25 7% 20%);
    --car-metal: hsl(214 10% 58%); --car-metal-hi: hsl(210 20% 92%); --car-tyre: hsl(220 10% 3%);
    --car-head: hsl(195 100% 93%); --car-tail: hsl(356 92% 56%);
}
.as-listen__stage {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hud" "map" "side" "spectrum"; gap: .9rem 1.2rem;
    position: relative; padding: 1rem 1.05rem 1.1rem; border-radius: 22px; border: 1px solid hsl(220 20% 19%); color: var(--text); min-width: 0;
    background:
        radial-gradient(ellipse 55% 42% at 50% 46%, hsl(var(--accent-h) 70% 45% / .15), transparent 70%),
        radial-gradient(ellipse 120% 70% at 50% 125%, hsl(220 40% 15% / .9), transparent 60%),
        linear-gradient(180deg, hsl(225 30% 8%), hsl(228 34% 4%));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / .06), 0 22px 50px -24px hsl(225 60% 3% / .9);
}
/* Wide enough, the car stands on the left and its legend or a driver's details beside it, as on a car's screen. */
@media (min-width: 1100px), (min-width: 640px) and (max-width: 900px) {
    .as-listen__stage { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); grid-template-areas: "hud hud" "map side" "spectrum spectrum"; align-items: start; }
}
/* On a screen tall enough, it stays in view while the controls beside it are scrolled through. */
@media (min-width: 901px) and (min-height: 860px) { .as-listen__stage { position: sticky; top: calc(var(--header-height) + var(--space-4)); } }
/* The faint glare of a screen's glass. */
.as-listen__stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(128deg, hsl(0 0% 100% / .045), transparent 32%); }
.as-listen__hud { grid-area: hud; display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; padding: 0 .2rem .6rem; border-bottom: 1px solid var(--border); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
.as-listen__hud-system { color: var(--text); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-listen__hud-where { color: var(--text-dim); white-space: nowrap; }
.as-listen__map { grid-area: map; display: grid; width: min(100%, 300px); margin: 0 auto; }
/* The map's three layers, one over another (audio-studio-listen.js): each painted on its own, so the light that
   changes every frame never repaints the car under it, whose shadows and sheen are the costly part. */
.as-listen__layer { grid-area: 1 / 1; display: block; width: 100%; height: auto; overflow: visible; color: var(--text); will-change: transform; }
.as-listen__layer--light, .as-listen__layer--drivers { pointer-events: none; }
.as-listen__layer--light { will-change: opacity; opacity: .45; }
/* Each driver's light, and each line carrying its sound: small elements of their own, moved and faded by the
   compositor, so a frame of music repaints nothing. Placed in percent of the map (audio-studio-listen.js). */
.as-listen__lights { grid-area: 1 / 1; position: relative; pointer-events: none; }
.as-listen__lights > span { position: absolute; display: block; will-change: transform, opacity; }
.as-listen__side { grid-area: side; display: grid; gap: .8rem; align-content: start; min-width: 0; }

/* The car (audio-studio-listen-cabin.js): obsidian paint lit along its spine, tinted glass, a dark cabin. */
.as-car__stop-edge { stop-color: var(--car-paint-edge); }
.as-car__stop-paint { stop-color: var(--car-paint); }
.as-car__stop-shine { stop-color: var(--car-shine); }
.as-car__stop-crest { stop-color: var(--car-crest); }
.as-car__stop-rim { stop-color: var(--car-rim); }
.as-car__stop-rim-soft { stop-color: var(--car-rim-soft); }
.as-car__stop-glass { stop-color: var(--car-glass); }
.as-car__stop-glass-hi { stop-color: var(--car-glass-hi); }
.as-car__stop-screen { stop-color: hsl(var(--accent-h) 55% 30%); }
.as-car__stop-screen-edge { stop-color: hsl(var(--accent-h) 45% 13%); }
.as-car__stop-seat { stop-color: var(--car-seat); }
.as-car__stop-seat-hi { stop-color: var(--car-seat-hi); }
.as-car__stop-metal { stop-color: var(--car-metal); }
.as-car__stop-metal-hi { stop-color: var(--car-metal-hi); }
.as-car__stop-dome { stop-color: hsl(214 10% 40%); }
.as-car__stop-dome-hi { stop-color: hsl(0 0% 100%); }
.as-car__stop-hair { stop-color: hsl(25 12% 9%); }
.as-car__stop-hair-hi { stop-color: hsl(25 10% 30%); }
.as-car__stop-sweet { stop-color: var(--screen-accent); stop-opacity: .34; }
.as-car__stop-sweet-out { stop-color: var(--screen-accent); stop-opacity: 0; }
.as-car__shadow { fill: hsl(228 60% 2% / .95); }
.as-car__tyre { fill: var(--car-tyre); }
.as-car__tread { fill: hsl(220 8% 11%); }
.as-car__body { fill: url(#as-car-paint); }
.as-car__rim { fill: none; stroke: url(#as-car-rim); stroke-width: 1.1; }
.as-car__sheen { fill: hsl(0 0% 100% / .17); }
.as-car__sheen--soft { fill: hsl(0 0% 100% / .08); }
.as-car__shut { fill: none; stroke: hsl(225 35% 3% / .9); stroke-width: .9; }
.as-car__crease { fill: none; stroke: hsl(0 0% 100% / .1); stroke-width: 1.2; stroke-linecap: round; }
.as-car__lamp { fill: hsl(222 30% 6%); stroke: hsl(205 45% 82% / .3); stroke-width: .5; }
.as-car__drl { fill: none; stroke: var(--car-head); stroke-width: 1.1; stroke-linecap: round; }
.as-car__drl-glow { fill: none; stroke: var(--car-head); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.as-car__projector { fill: hsl(205 40% 75% / .55); stroke: hsl(0 0% 100% / .5); stroke-width: .3; }
.as-car__flare { fill: none; stroke: hsl(0 0% 100% / .14); stroke-width: 1.6; stroke-linecap: round; }
.as-car__taillamp { fill: none; stroke: var(--car-tail); stroke-width: 2.4; stroke-linecap: round; }
.as-car__tail-glow { fill: none; stroke: var(--car-tail); stroke-width: 6; stroke-linecap: round; opacity: .75; }
.as-car__handle { fill: hsl(210 15% 62% / .5); }
.as-car__rail { fill: none; stroke: var(--car-metal); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.as-car__side { stroke: hsl(205 45% 82% / .14); stroke-width: .5; }
.as-car__pillar { fill: var(--car-paint-edge); }
.as-car__floor { fill: var(--car-floor); }
.as-car__dash { fill: var(--car-trim); }
.as-car__dash-edge { fill: none; stroke: hsl(0 0% 100% / .08); stroke-width: 1; }
.as-car__vent { fill: hsl(225 25% 4%); stroke: hsl(0 0% 100% / .07); stroke-width: .4; }
.as-car__screen { stroke: hsl(0 0% 100% / .14); stroke-width: .5; }
.as-car__screen-gap { stroke: hsl(225 30% 4% / .9); stroke-width: .8; }
.as-car__dial { fill: none; stroke: var(--screen-accent); stroke-width: .8; opacity: .85; }
.as-car__ui { fill: hsl(0 0% 100% / .45); }
.as-car__ui-wave { fill: none; stroke: var(--screen-accent); stroke-width: .8; opacity: .8; }
.as-car__wheel { fill: none; stroke: hsl(25 6% 11%); stroke-width: 3.8; }
.as-car__wheel-shine { fill: none; stroke: hsl(0 0% 100% / .12); stroke-width: .7; }
.as-car__spokes { stroke: var(--car-trim-hi); stroke-width: 2.2; stroke-linecap: round; }
.as-car__hub { fill: var(--car-trim-hi); }
.as-car__hub-mark { fill: var(--car-metal); }
.as-car__console { fill: var(--car-trim); }
.as-car__gloss { fill: hsl(225 25% 5%); stroke: hsl(0 0% 100% / .08); stroke-width: .5; }
.as-car__pad { fill: hsl(225 18% 9%); stroke: hsl(0 0% 100% / .06); stroke-width: .4; }
.as-car__pad-light { fill: var(--screen-accent); }
.as-car__knob { fill: var(--car-trim-hi); stroke: url(#as-car-metal); stroke-width: .9; }
.as-car__knob-ring { fill: none; stroke: hsl(0 0% 100% / .15); stroke-width: .5; }
.as-car__armrest, .as-car__seat-shell { fill: var(--car-seat); }
.as-car__stitch { stroke: hsl(0 0% 100% / .14); stroke-width: .5; stroke-dasharray: 1 1; }
.as-car__cup { fill: hsl(225 25% 4%); }
.as-car__shelf { fill: var(--car-trim); }
.as-car__cargo { fill: hsl(222 14% 9%); }
.as-car__cargo-rail { stroke: var(--car-metal); stroke-width: 1.2; stroke-linecap: round; opacity: .35; }
.as-car__shelf-grille { opacity: .5; }
.as-car__hole { fill: hsl(0 0% 100% / .22); }

.as-car__ambient-line { fill: none; stroke: var(--screen-accent); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.as-car__ambient-glow { fill: none; stroke: var(--screen-accent); stroke-width: 3.6; stroke-linecap: round; opacity: .22; }
.as-car__defrost-lines { opacity: .55; }
.as-car__defrost { stroke: hsl(20 60% 62% / .28); stroke-width: .35; }
.as-car__reflection { fill: hsl(0 0% 100% / .07); }
.as-car__roof-frame { fill: none; stroke: var(--car-paint); stroke-width: 4; }
.as-car__glass-edge { fill: none; stroke: hsl(205 45% 82% / .22); stroke-width: .8; }
.as-car__mirror { fill: var(--car-paint); stroke: url(#as-car-rim); stroke-width: .7; }
.as-car__mirror-cap { fill: none; stroke: hsl(0 0% 100% / .16); stroke-width: .8; stroke-linecap: round; }
/* Seats: nappa, quilted between raised bolsters. */
.as-car__seat-shadow { fill: hsl(225 40% 2% / .75); }
.as-car__bolster, .as-car__seat-back, .as-car__headrest { fill: var(--car-seat-hi); }
.as-car__seat-part { fill: var(--car-seat-part); }
.as-car__quilt { fill: none; stroke: hsl(25 10% 6% / .6); stroke-width: .5; }
.as-car__seat-lip, .as-car__headrest-shine { fill: none; stroke: hsl(0 0% 100% / .13); stroke-width: .8; stroke-linecap: round; }
.as-car__seam { stroke: hsl(25 10% 5% / .75); stroke-width: .6; }

/* The seats: chosen by clicking, and outlined when chosen (accent) or focused (dashed). */
.as-listen__seat { cursor: pointer; }
.as-listen__seat-ring { fill: transparent; stroke: transparent; stroke-width: 1.4; transition: fill var(--fast) var(--ease), stroke var(--fast) var(--ease); }
.as-listen__seat:hover .as-listen__seat-ring { fill: hsl(var(--accent-h) var(--accent-s) 62% / .08); stroke: hsl(var(--accent-h) var(--accent-s) 62% / .35); }
.as-listen__seat.is-current .as-listen__seat-ring { fill: hsl(var(--accent-h) var(--accent-s) 62% / .1); stroke: var(--screen-accent); }
.as-listen__seat.is-focus .as-listen__seat-ring { stroke: var(--as-exciter); stroke-dasharray: 4 3; }
.as-listen__seat.is-current.is-focus .as-listen__seat-ring { stroke: var(--screen-accent); }
.as-listen__seat:focus-visible { outline: none; }
.as-listen__seat:focus-visible .as-listen__seat-ring { stroke: var(--screen-accent); stroke-width: 2.2; stroke-dasharray: 3 2; }
.as-listen__focus circle { fill: none; stroke: var(--as-exciter); stroke-width: 1.1; stroke-dasharray: 3 2.5; opacity: .9; }
.as-listen__focus .as-listen__focus-dot { fill: var(--as-exciter); stroke: none; }

/* The listener, from above, facing forward, in a soft light where the sound is heard. */
.as-listen__head-ring { fill: none; stroke: var(--screen-accent); stroke-width: 1; opacity: .85; }
.as-listen__shoulders { fill: hsl(220 10% 25%); stroke: hsl(0 0% 100% / .1); stroke-width: .5; }
.as-listen__ear { fill: hsl(25 16% 55%); }
.as-listen__face { stroke: hsl(0 0% 100% / .12); stroke-width: .5; }
.as-listen__nose { fill: none; stroke: var(--screen-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Drivers: a metal ring round a perforated grille, lit in their kind's colour; a soft glow behind for how hard each
   plays; the grille moving with the music; dashed in the headliner, red when out of power. Only a driver's hit area
   takes the pointer, so the seats beneath can still be clicked around it. */
.as-listen__map .as-ld { pointer-events: none; }
.as-ld, .as-ld-mini, .as-ld__glow { --ld: var(--as-mid); }
.as-ld--tweeter { --ld: var(--as-tweet); }
.as-ld--subwoofer { --ld: var(--as-sub); }
.as-ld--panel { --ld: var(--as-panel); }
.as-ld--exciter { --ld: var(--as-exciter); }
.as-ld__glow { aspect-ratio: 1; border-radius: 50%; opacity: .15; transform: translate(-50%, -50%) scale(.55); background: radial-gradient(closest-side, color-mix(in srgb, var(--ld) 90%, transparent), color-mix(in srgb, var(--ld) 30%, transparent) 45%, transparent 92%, color-mix(in srgb, var(--ld) 55%, transparent) 96%, transparent); }
.as-ld__glow.is-clipping { --ld: var(--danger, #ef4444); }
.as-ld__glow.is-quiet { background: radial-gradient(closest-side, color-mix(in srgb, var(--ld) 32%, transparent), transparent); }
.as-listen__beam { height: 1px; margin-top: -.5px; background: var(--screen-accent); opacity: 0; transform-origin: 0 50%; }
.as-ld__type { fill: none; stroke: var(--ld); stroke-width: .8; opacity: .75; }
.as-ld__frame { fill: hsl(225 25% 5%); stroke: url(#as-car-metal); stroke-width: 1.2; }
.as-ld__disc { fill: hsl(225 22% 7%); }
.as-ld__inner { fill: none; stroke: hsl(0 0% 100% / .16); stroke-width: .5; }
.as-ld__led { fill: var(--ld); }
.as-ld__led--dome { opacity: .55; }
.as-ld__plate { fill: hsl(225 18% 9%); stroke: var(--ld); stroke-width: .6; }
/* Asked for less motion: the glow still shows what each plays, without its ring. */
@media (prefers-reduced-motion: reduce) { .as-ld__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--ld) 90%, transparent), color-mix(in srgb, var(--ld) 30%, transparent) 45%, transparent); } }
.as-ld--roof .as-ld__type { stroke-dasharray: 2 1.6; opacity: 1; }
.as-ld.is-quiet { opacity: .4; }
.as-ld.is-unwired .as-ld__type { stroke: var(--text-dim); stroke-dasharray: 1.4 1.4; }
.as-ld__hit { fill: transparent; stroke: transparent; pointer-events: all; cursor: pointer; }
.as-ld.is-hot .as-ld__type, .as-ld.is-selected .as-ld__type { stroke: hsl(0 0% 100%); stroke-width: 1.2; opacity: 1; }
.as-ld.is-selected .as-ld__hit { stroke: var(--screen-accent); stroke-width: 1.1; stroke-dasharray: 2.4 1.8; }
.as-ld.is-clipping .as-ld__type { stroke: var(--danger, #ef4444); stroke-width: 1.6; opacity: 1; }
/* A cone at the limit of how far it can move: amber, as a limiter's light; running out of power (red) says more. */
.as-ld.is-straining:not(.is-clipping) .as-ld__type { stroke: var(--strain); stroke-width: 1.6; opacity: 1; }
.as-ld__glow.is-straining:not(.is-clipping) { --ld: var(--strain); }
/* The listener's head, to be turned by dragging. */
.as-listen__head-handle { fill: transparent; pointer-events: all; cursor: grab; touch-action: none; }
.as-listen__head-handle:active { cursor: grabbing; }

/* Beside or under the car: the legend, or the driver pointed at or chosen. Both take the same place, the one not
   shown kept invisible, so nothing jumps as one replaces the other. */
.as-listen__inspector { display: grid; align-items: start; }
.as-listen__inspector > * { grid-area: 1 / 1; }
.as-listen__legend { display: grid; gap: .6rem; align-content: start; }
.as-listen__legend.is-off, .as-listen__card.is-off { visibility: hidden; }
.as-listen__legend-types { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.as-listen__legend-types li { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem .22rem .35rem; border: 1px solid var(--border); border-radius: 999px; background: hsl(224 24% 10% / .7); font-size: var(--text-xs); color: var(--text-muted); }
.as-listen__legend-types svg, .as-listen__card-head svg, .as-listen__row svg { flex: none; overflow: visible; }
.as-listen__legend-marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .3rem .8rem; margin: 0; padding: 0 .2rem; list-style: none; font-size: var(--text-xs); color: var(--text-muted); }
.as-listen__legend-marks li { display: flex; align-items: center; gap: .45rem; }
.as-listen__legend-marks svg { flex: none; overflow: visible; }
.as-listen__mark-beam { stroke: var(--screen-accent); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.as-listen__mark-seat { fill: hsl(var(--accent-h) var(--accent-s) 62% / .14); stroke: var(--screen-accent); stroke-width: 1.3; }
.as-listen__mark-focus { fill: none; stroke: var(--as-exciter); stroke-width: 1.3; stroke-dasharray: 3 2; }
.as-listen__mark-clip { fill: var(--surface-sunken); stroke: var(--danger, #ef4444); stroke-width: 2; }
.as-listen__legend-hint { margin: 0; font-size: var(--text-xs); color: var(--text-dim); line-height: 1.55; }
.as-listen__card { display: grid; gap: .6rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, hsl(224 24% 12% / .9), hsl(224 26% 8% / .9)); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .05); min-width: 0; }
.as-listen__card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.as-listen__card-head svg { width: 24px; height: 24px; }
.as-listen__card-titles { display: grid; min-width: 0; }
.as-listen__card-titles strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.as-listen__card-titles span { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.as-listen__card-close { width: 1.8rem; height: 1.8rem; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-muted); font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.as-listen__card-close:hover { color: var(--text); background: var(--surface-hover); }
.as-listen__card-close:focus-visible { outline: 2px solid var(--screen-accent); outline-offset: 1px; }
.as-listen__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .8rem; margin: 0; font-size: var(--text-xs); }
.as-listen__facts dt { color: var(--text-dim); }
.as-listen__facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.as-listen__card-live { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: var(--text-xs); color: var(--text-muted); }
.as-listen__card-meter, .as-listen__row-meter { height: .38rem; border-radius: 999px; background: hsl(226 30% 4%); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .05); overflow: hidden; }
.as-listen__card-meter span, .as-listen__row-meter span { display: block; width: 100%; height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, hsl(var(--accent-h) var(--accent-s) 45%), var(--screen-accent)); }
.as-listen__card-clip { color: var(--danger-text); font-weight: 600; }
.as-listen__card-clip[hidden] { display: none; }
.as-listen__card-strain { color: var(--strain); font-weight: 600; }
.as-listen__card-strain[hidden] { display: none; }

/* Every driver, as a list. */
.as-listen__list summary { cursor: pointer; font-size: var(--text-sm); font-weight: 570; color: var(--text-muted); }
.as-listen__list summary:hover { color: var(--text); }
.as-listen__list summary:focus-visible { outline: 2px solid var(--screen-accent); outline-offset: 2px; border-radius: 4px; }
.as-listen__rows { display: grid; gap: .1rem; max-height: 20rem; overflow-y: auto; margin: .5rem 0 0; padding: 0; list-style: none; }
.as-listen__row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 3rem; align-items: center; gap: .55rem; width: 100%; padding: .32rem .45rem; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer; }
.as-listen__row:hover { background: var(--surface-hover); }
.as-listen__row[aria-pressed="true"] { background: var(--accent-soft); }
.as-listen__row:focus-visible { outline: 2px solid var(--screen-accent); outline-offset: -2px; }
.as-listen__row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-listen__row-type { color: var(--text-dim); white-space: nowrap; }
.as-listen__row.is-clipping .as-listen__row-meter span { background: var(--danger); }
.as-listen__row.is-straining:not(.is-clipping) .as-listen__row-meter span { background: var(--strain); }
@media (max-width: 480px) { .as-listen__row { grid-template-columns: 16px minmax(0, 1fr) 2.5rem; } .as-listen__row-type { display: none; } }
.as-listen__spectrum { grid-area: spectrum; display: block; width: 100%; height: 84px; color: var(--screen-accent); }
.as-listen__controls { display: grid; gap: .8rem; min-width: 0; }
.as-listen__set { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .7rem .85rem .85rem; margin: 0; display: grid; gap: .5rem; min-width: 0; }
.as-listen__set legend { padding: 0 .3rem; }
.as-listen__layer { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: .6rem; font-size: var(--text-sm); color: var(--text-muted); }
.as-listen__layer input { accent-color: var(--accent); }
.as-listen__ab button { position: relative; padding: .4rem .85rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 570; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-listen__ab button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.as-listen__ab button:disabled { cursor: default; opacity: .55; }
.as-listen__ab button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.as-listen__rumble { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .4rem .7rem; }
.as-listen__rumble[hidden] { display: none; }
.as-listen__rumble .as-check { grid-column: 1 / -1; }
.as-listen__meter { height: .55rem; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.as-listen__meter span { display: block; height: 100%; width: 100%; background: var(--as-exciter); transform: scaleX(0); transform-origin: left; }
.as-listen__rumble-text { font-size: var(--text-xs); color: var(--text-dim); }
.as-listen__empty { font-size: var(--text-sm); color: var(--warn-text); }
.as-listen__empty[hidden] { display: none; }
.as-listen__status { font-size: var(--text-sm); color: var(--accent-text); min-height: 1.4em; overflow-wrap: anywhere; }
.as-listen__load { font-size: var(--text-sm); color: var(--danger-text); min-height: 1.4em; margin-top: calc(var(--space-4) * -1); overflow-wrap: anywhere; }
@media (max-width: 900px) { .as-listen__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .as-listen__volume input { width: 5rem; } }

/* The equaliser: ten upright sliders, an octave apart. */
.as-eq__target { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.as-eq__bands { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .15rem; padding: .3rem 0; }
.as-eq__band { display: grid; justify-items: center; gap: .3rem; min-width: 0; }
.as-eq__band input { writing-mode: vertical-lr; direction: rtl; width: 1.4rem; height: 7.5rem; margin: 0; accent-color: var(--accent); }
.as-eq__value { font-family: var(--font-mono); font-size: .66rem; color: var(--text); font-variant-numeric: tabular-nums; }
.as-eq__hz { font-family: var(--font-mono); font-size: .62rem; color: var(--text-dim); }
.as-eq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.as-eq__actions .btn[hidden] { display: none; }

/* ============================================================================ The amplifier rack */
/* Each amplifier a unit: its head (letter, name, power, and a bar of how much of it its drivers can take) over a row of
   its channels, each showing the driver wired to it in that driver's colour. */
.as-rack { display:grid; gap:.6rem; padding:1rem 1.1rem 0; }
.as-amp { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-sunken); }
.as-amp--edited { border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line); }
.as-amp__head { all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"letter name" "meter meter"; gap:.45rem .6rem; align-items:center; padding:.6rem .65rem .5rem; border-radius:var(--radius-md) var(--radius-md) 0 0; cursor:pointer; }
.as-amp__head:hover { background:var(--surface-hover); }
.as-amp__head:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.as-amp__letter { grid-area:letter; width:1.65rem; height:1.65rem; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); font-family:var(--font-mono); font-size:.8rem; font-weight:750; }
.as-amp--edited .as-amp__letter { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.as-amp__name { grid-area:name; min-width:0; font-size:var(--text-sm); font-weight:640; line-height:1.3; overflow-wrap:anywhere; }
.as-amp__name small { display:block; margin-top:.1rem; color:var(--text-muted); font-size:var(--text-xs); font-weight:400; font-variant-numeric:tabular-nums; }
.as-amp__meter { grid-area:meter; height:4px; border-radius:999px; background:var(--border); overflow:hidden; }
.as-amp__meter i { display:block; height:100%; border-radius:inherit; background:var(--ok-text); }
.as-amp__meter--over i { background:var(--text-dim); }
.as-amp__meter--under i { background:var(--warn); }
.as-amp__channels { display:grid; grid-template-columns:repeat(auto-fill,minmax(2.15rem,1fr)); gap:.3rem; padding:.15rem .65rem .65rem; }
/* A channel: its number over the wired driver's letter, in the driver's colour; a dashed socket when free. */
.as-ch { --ch:var(--as-mid); position:relative; display:grid; justify-items:center; align-content:center; gap:.05rem; min-height:2.35rem; padding:.2rem 0; border:1px solid color-mix(in srgb,var(--ch) 55%,transparent); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--ch) 16%,var(--surface)); color:var(--text); font:inherit; cursor:pointer; }
.as-ch:hover { border-color:var(--ch); }
.as-ch:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.as-ch__n { font-family:var(--font-mono); font-size:.62rem; color:var(--text-muted); line-height:1; font-variant-numeric:tabular-nums; }
.as-ch__glyph { font-family:var(--font-mono); font-size:.74rem; font-weight:750; line-height:1.1; }
.as-ch__glyph:empty { display:none; }
.as-ch--tweeter { --ch:var(--as-tweet); }
.as-ch--subwoofer { --ch:var(--as-sub); }
.as-ch--panel { --ch:var(--as-panel); }
.as-ch--exciter { --ch:var(--as-exciter); }
.as-ch--free { border-style:dashed; border-color:var(--border-strong); background:transparent; }
.as-ch--free .as-ch__n { font-size:.7rem; }
.as-ch--free:hover { border-color:var(--accent); background:var(--accent-soft); }
.as-ch--shared::after { content:''; position:absolute; top:3px; right:3px; width:4px; height:4px; border-radius:50%; background:var(--ch); }
.as-ch--problem { border-color:var(--warn); background:var(--warn-soft); }
.as-ch--problem .as-ch__glyph { color:var(--warn-text); }
.as-ch--current { box-shadow:0 0 0 2px var(--accent); border-color:transparent; }
.as-amp-form__head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:1rem 1.1rem 0; }
.as-amp-form__head h3 { font-size:.82rem; font-weight:680; }
#as-remove-amp { color:var(--danger-text); }

/* ============================================================================ The frequency response chart */
/* audio-studio-listen-response.js. A is blue and B orange, the first two categorical colours, each stepped for its
   mode and checked for colour-blind separation and contrast against the surface; the target is a dashed reference.
   Axes recessive, lines 2px; the other system's line a step back. */
.as-resp { --resp-a:#3987e5; --resp-b:#d95926; display:grid; gap:.55rem; min-width:0; }
[data-theme="light"] .as-resp { --resp-a:#2a78d6; --resp-b:#eb6834; }
.as-resp__caption { margin:0; font-size:var(--text-xs); color:var(--text-muted); line-height:1.5; }
.as-resp__frame { position:relative; }
.as-resp__svg { display:block; width:100%; height:auto; overflow:visible; }
.as-resp__rule { stroke:var(--border); stroke-width:1; vector-effect:non-scaling-stroke; }
.as-resp__zero { stroke:var(--border-strong); stroke-width:1; vector-effect:non-scaling-stroke; }
.as-resp__tick, .as-resp__unit { fill:var(--text-dim); font-size:9px; font-variant-numeric:tabular-nums; }
.as-resp__target { fill:none; stroke:var(--text-muted); stroke-width:1.5; stroke-dasharray:4 3; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.75; }
.as-resp__line { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.65; transition:opacity var(--fast) var(--ease); }
.as-resp__line.is-active { opacity:1; }
.as-resp__line--a { stroke:var(--resp-a); }
.as-resp__line--b { stroke:var(--resp-b); }
.as-resp__end { fill:var(--text); font-size:10px; font-weight:700; }
.as-resp__waiting { fill:var(--text-dim); font-size:11px; }
.as-resp__cross { stroke:var(--text-dim); stroke-width:1; vector-effect:non-scaling-stroke; opacity:0; pointer-events:none; }
.as-resp__cross.is-on { opacity:.75; }
.as-resp__dot { opacity:0; stroke:var(--surface); stroke-width:2; pointer-events:none; }
.as-resp__dot.is-on { opacity:1; }
.as-resp__dot--a { fill:var(--resp-a); }
.as-resp__dot--b { fill:var(--resp-b); }
.as-resp__hit { fill:transparent; cursor:crosshair; }
.as-resp__tip { position:absolute; top:.2rem; z-index:2; display:grid; gap:.2rem; padding:.45rem .6rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-md); font-size:var(--text-xs); white-space:nowrap; pointer-events:none; }
.as-resp__tip strong { font-weight:650; }
.as-resp__tip-row { display:flex; align-items:center; gap:.4rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.as-resp__key { flex:none; width:14px; height:3px; border-radius:2px; background:var(--resp-a); }
.as-resp__key--b { background:var(--resp-b); }
.as-resp__key--target { height:0; border-radius:0; border-top:2px dashed var(--text-muted); background:none; }
.as-resp__legend { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:var(--text-xs); color:var(--text-muted); }
.as-resp__legend li { display:inline-flex; align-items:center; gap:.4rem; min-width:0; }
.as-resp__legend li.is-active { color:var(--text); }
.as-resp__legend span { overflow-wrap:anywhere; }
.as-resp__table summary { cursor:pointer; font-size:var(--text-xs); color:var(--accent-text); }
.as-resp__table summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.as-resp__table table { width:100%; margin-top:.5rem; table-layout:fixed; border-collapse:collapse; font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.as-resp__table th, .as-resp__table td { padding:.3rem .4rem; border-bottom:1px solid var(--border); text-align:right; overflow-wrap:anywhere; }
.as-resp__table th:first-child { text-align:left; }
.as-resp__table thead th { color:var(--text-muted); font-weight:600; }
@media (prefers-reduced-motion:reduce) { .as-resp__line { transition:none; } }

/* ============================================================================ Test tracks, driving, your head */
.as-listen__transport .as-listen__tests { flex: 0 1 13rem; min-width: 0; min-height: 0; height: auto; padding-block: .375rem; line-height: 1.2; font-size: var(--text-sm); border-radius: var(--radius-sm); }
/* Under the transport while a test track plays: what to listen for now. */
.as-listen__cue-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .55rem .8rem; border: 1px solid var(--accent-line); border-radius: var(--radius-md); background: var(--accent-soft); }
.as-listen__cue { margin: 0; min-width: 0; font-size: var(--text-sm); font-weight: 560; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.as-listen__say { flex: none; }
.as-listen__look { display: grid; gap: .3rem; margin-top: .25rem; }
.as-listen__look-top { display: flex; align-items: center; gap: .6rem; }
.as-listen__look-top .label { margin: 0; }
.as-listen__look-value { flex: 1; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.as-listen__look input[type="range"] { width: 100%; accent-color: var(--accent); }
.as-listen__cue-row[hidden], .as-listen .as-check[hidden] { display: none; }

/* ============================================================================ Active noise cancellation */
/* The studio map's ANC layer: a microphone above each seat, the road sensors at the wheels. */
#as-cabin[data-layer="anc"] [data-layer]:not([data-layer="anc"]) { display: none; }
#as-cabin[data-layer="anc"] #as-car { opacity: .7; }
.as-anc-mark { cursor: pointer; }
.as-anc-mark:focus { outline: none; }
.as-anc-mark__ring { fill: transparent; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.as-anc-mark:focus-visible .as-anc-mark__ring { opacity: 1; stroke-dasharray: 3 2; }
.as-anc-mark__core { fill: hsl(224 24% 10% / .85); stroke: hsl(210 25% 95% / .45); stroke-width: 1.3; stroke-dasharray: 2.5 2; }
.as-anc-mark.is-on .as-anc-mark__core { fill: color-mix(in srgb, var(--accent) 30%, hsl(224 24% 10%)); stroke: var(--accent); stroke-dasharray: none; stroke-width: 1.8; }
.as-anc-mark--sensor .as-anc-mark__core { rx: 2; }
.as-anc-mark__glyph { fill: var(--text-muted); font-family: var(--font-mono); font-size: 8px; font-weight: 750; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.as-anc-mark.is-on .as-anc-mark__glyph { fill: var(--text); }
.as-anc-mark:hover .as-anc-mark__core { stroke: var(--accent); }
/* Its settings, at the foot of Amplification & DSP. */
.as-anc { border-top: 1px solid var(--border); padding: 0 0 1rem; display: grid; gap: .55rem; }
.as-anc .as-amp-form__head { padding-bottom: 0; }
.as-anc > .field-help, .as-anc > .as-check, .as-anc__summary { margin: 0 1.1rem; }
.as-anc .as-check { align-items: flex-start; font-size: var(--text-sm); line-height: 1.4; }
.as-anc .as-check input { margin-top: .15rem; flex: none; }
.as-anc__summary { font-size: var(--text-xs); color: var(--text-muted); padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--surface-sunken); }
/* The legend says what the ANC layer's marks are, in place of the drivers'. */
.as-plan-wrap:not([data-layer="anc"]) .as-map-legend--anc, .as-plan-wrap[data-layer="anc"] .as-map-legend:not(.as-map-legend--anc) { display: none; }
.as-map-legend--anc i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--accent); font: 700 8px/1 var(--font-mono); font-style: normal; color: var(--text); }
/* The listening room's noise cancellation microphones, in the headliner above the seats: lit while cancelling. */
.as-listen__mic { fill: hsl(224 24% 10%); stroke: hsl(210 25% 95% / .55); stroke-width: 1.1; }
.as-listen__mic.is-on { fill: var(--screen-accent); stroke: hsl(0 0% 100% / .8); filter: drop-shadow(0 0 2.5px var(--screen-accent)); }
.as-listen__anc { margin-top: .35rem; font-weight: 560; }
.as-listen__anc input:disabled + span { color: var(--text-dim); }
.as-listen__look[hidden] { display: none; }
/* Two choices side by side in the Driving panel, the road's surface and the car's engine; one above the other
   where they would not fit. */
.as-listen__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem .6rem; margin-top: .35rem; }
.as-listen__pair .label { font-size: var(--text-sm); margin-bottom: .3rem; }
.as-listen__pair .select { width: 100%; }