/* The editor: the site's dot-grid paper around two of its black slabs, the script and the output, filling the window. */
@import './skin.css';

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: radial-gradient(circle, var(--color-grid) 1px, var(--color-transparent) 1px) 50% calc(var(--dot) / -2) / var(--dot) var(--dot), var(--color-paper); color: var(--color-ink); font: 400 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
:focus { outline: none; }
/* Scrollbars: a quiet thumb on a clear track */
* { scrollbar-width: thin; scrollbar-color: var(--color-screen-rule) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 4px; background: var(--color-screen-rule) padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--color-screen-muted) padding-box; }
[hidden] { display: none !important; }
/* Until the script takes the page over, its conditional and repeated parts stay out of sight and the rest takes no
   clicks, never shown dead. Sprae drops each directive attribute as it takes that element, so any version of the
   script that runs wakes the page; none depends on a line of it. */
[\:if], [\:each], [\:hidden] { display: none !important; }
.app[\:class] { pointer-events: none; }
/* The page comes up once, whole. The paper and the slabs are there in the first paint, and what fills them — the menus,
   the tabs, the script, the picture where the sound was left — waits out of sight until all of it is ready, then comes
   up together, inside the frame it already has: nothing is laid out twice, so nothing jumps (editor.js drops data-boot
   after the first frame). */
.app[data-boot] > .bar > .menubar, .app[data-boot] > .panes > * { opacity: 0; }
.app > .bar > .menubar, .app > .panes > * { transition: opacity var(--dur-short) var(--ease-out); }
svg { flex: none; }

.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bar) minmax(0, 1fr); height: 100dvh; }

/* Bar: the mark, where to start, and the page's actions */
.bar { display: flex; align-items: center; gap: 20px; padding-inline: calc(var(--gutter) + 6px); min-width: 0; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink); text-decoration: none; font-size: 21px; font-weight: 650; letter-spacing: -.05em; touch-action: pan-y; user-select: none; }
.wordmark .logo { position: relative; width: 19px; aspect-ratio: 96 / 101; flex-shrink: 0; }
.wordmark .logo svg { display: block; width: 100%; height: 100%; }
/* The live mark, taller than its box: the wave swells past it */
.wordmark .logo canvas { position: absolute; top: 50%; left: 0; width: 100%; height: 32px; translate: 0 -50%; pointer-events: none; }
/* From page to page the wordmark carries on (logo/motion.js): the mark and the name glide to their place on the next
   page, the mark turning, as the page fades across. They only move: the old one's picture goes, the new one stands whole,
   so neither fades nor blends. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.bar .wordmark .logo { view-transition-name: mark; }
.bar .wordmark .name { view-transition-name: name; }
::view-transition-group(mark), ::view-transition-group(name) { animation-duration: .4s; animation-timing-function: var(--ease-out); }
::view-transition-old(mark), ::view-transition-old(name) { display: none; }
::view-transition-new(mark), ::view-transition-new(name) { animation: none; }
.bar-end { display: flex; align-items: center; gap: 4px; }
/* The app menu: the page's acts, grouped as desktop apps group them */
.menubar { display: flex; align-items: center; gap: 0; min-width: 0; overflow: hidden; }
.menubar-item { min-height: 30px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--color-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.menubar-item:hover, .menubar-item[aria-expanded="true"] { background: var(--color-hover); }
.menubar-item:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }
/* its menus float free, placed by menu.js; a row: a check, the words, the keys */
.menu.menubar-list { position: fixed; inset: auto; width: max-content; min-width: 220px; max-width: min(440px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); margin: 0; position-area: none; position-try-fallbacks: none; }
.menubar-list:focus { outline: none; }
.menubar-list hr { margin: 5px 8px; border: 0; border-top: 1px solid var(--color-screen-rule); }
.menubar-list .menu-group:first-child { margin-top: 4px; }
.menu-row { display: grid; grid-template-columns: 16px max-content minmax(0, 1fr); align-items: center; gap: 6px; width: 100%; min-height: 28px; padding: 0 10px 0 6px; border: 0; border-radius: 6px; background: none; color: var(--color-screen-ink); text-align: left; font-size: 12.5px; }
.menu-row:hover, .menu-row:focus { outline: none; background: var(--color-screen-pill-active); color: var(--color-screen-bright); }
.menu-row[aria-disabled="true"] { color: var(--color-screen-dim); }
.menu-row[aria-disabled="true"]:hover, .menu-row[aria-disabled="true"]:focus { background: var(--color-screen-hover); color: var(--color-screen-dim); }
.menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-keys { overflow: hidden; margin-left: 12px; color: var(--color-screen-muted); font: 11px var(--font-mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.menu-keys.menu-hint { font: 11.5px var(--font-body); }
.menu-row:is([aria-checked="true"], [aria-pressed="true"]) .menu-check::before { content: '✓'; display: block; text-align: center; font-size: 12px; color: var(--color-screen-bright); }
.menu-check svg { display: block; width: 15px; height: 15px; color: var(--color-screen-muted); }
.menu-row:is(:hover, :focus) .menu-check svg { color: var(--color-screen-bright); }
.menu-row.has-sub .menu-keys::after { content: '›'; font: 14px var(--font-body); }
.menu-row.has-sub[aria-expanded="true"] { background: var(--color-screen-pill-active); }
/* a narrow window's submenus open in place, under their row */
.menu.menubar-list.inline { position: static; width: auto; min-width: 0; max-width: none; max-height: none; margin: 2px 0 6px 14px; padding: 0 0 0 4px; overflow: visible; border-left: 1px solid var(--color-screen-rule); border-radius: 0; background: none; box-shadow: none; }
.menu-row.has-sub:has(+ .inline) .menu-keys::after { content: '▾'; font-size: 13px; }
.bar-end { margin-left: auto; }
.bar-button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--color-transparent); color: var(--color-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.bar-button:hover:not(:disabled) { background: var(--color-hover); }
.bar-button.primary { background: var(--color-ink); color: var(--color-paper); }
.bar-button.primary:hover:not(:disabled) { background: var(--color-soft-ink); }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: var(--color-transparent); color: inherit; }
.icon-button svg { width: 18px; height: 18px; }
.bar .icon-button:hover:not(:disabled) { background: var(--color-hover); }

/* Panes: a head over the picture (the open sounds; how it shows, ending where its pictures end; undo and redo over its
   meters and labels) and over the panel (the panels' buttons, at the slab's right, as an editor's activity bar), the
   picture, the panel docked beside it when one is open (the recipes, the agent, the edits, the code, the export), part of the
   slab, no line between, all one width so nothing moves as it turns from one to another, and the bar along the foot of
   both. The panel's left edge drags its width (--panel, kept); the button that opened it, again, closes it. Opening it,
   the picture keeps where it starts and its scale (view.js): it shows less of the sound, never squeezed. */
.panes { --panel: clamp(320px, 30vw, 440px); position: relative; display: grid; min-height: 0; margin: 0 var(--gutter) var(--gutter); border-radius: var(--radius-slab); background: repeating-linear-gradient(var(--color-scanline) 0 1px, var(--color-transparent) 1px 3px), linear-gradient(var(--color-screen), var(--color-screen-low)); color: var(--color-screen-soft); box-shadow: var(--shadow-panes); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; }
.panes > .view-head { grid-area: 1 / 1; }
.panes > .side-head { grid-area: 1 / 2; }
.view-slab { grid-area: 2 / 1; }
.panes[data-side="none"] > .view-slab { grid-column: 1 / -1; }
.panes > .side-slab { grid-area: 2 / 2; width: var(--panel); max-width: 60vw; }
.panes[data-side="none"] > .side-slab { display: none; }
.panes > .status { grid-area: 3 / 1 / 4 / -1; }
/* the panels' buttons over the panel */
.side-head { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 38px; padding: 4px 8px 0 6px; }
/* undo and redo, then how the picture shows, a pair as they are, then its settings at the head of its axis: the glyph
   (its ink 16 of its 24 units, 17 px in a 28 px button) over the axis's ticks, which run 12 px from a pixel inside the
   labels' 40 px (view.js GUTTER, TICK), so the button ends 19 px before the picture does. Each where it is whatever
   shows, nothing moving as the picture turns */
.view-head .history, .view-head .tabs.display { display: flex; flex: none; gap: 1px; }
.view-head .tabs.display[inert] { visibility: hidden; }
.view-head :is(.history .icon-button, .display button, .view-settings button) { width: 28px; height: 28px; min-height: 28px; border-radius: 6px; }
.view-head .history .icon-button { color: var(--color-screen-soft); }
.view-head :is(.history .icon-button, .display button, .view-settings button) svg { width: 17px; height: 17px; }
.view-head .history .icon-button:hover:not([aria-disabled="true"]):not(:disabled) { background: var(--color-screen-hover); color: var(--color-screen-bright); }
.view-head .history .icon-button:is([aria-disabled="true"], :disabled) { opacity: .35; }
.panes[data-side="open"] .view-head { padding-right: 19px; }
/* the bar under both: what the output holds (its note, key, levels) ends where the picture ends, what the sound is (its
   rate, channels, depth) at the bar's end, under the panel; the panel's width less the bar's end, the 14 px before the
   facts and the 6 px gap keeping the picture's end's 20 */
.panes[data-side="open"] .facts { width: calc(min(var(--panel), 60vw) - 20px); justify-content: flex-end; }
/* its left edge: a rule in the slab's own rule colour, as the home page's slab rules off its parts, as far from the
   panel's content as that is from the slab's edge (a panel's sides inset alike); a strip 7 px wide to drag for its width,
   the rule brighter where pointed at */
.panel-edge { position: absolute; z-index: 1; top: 0; bottom: 0; left: -4px; width: 7px; cursor: ew-resize; touch-action: none; }
.panel-edge::before { content: ''; position: absolute; inset: 0 3px; background: var(--color-screen-rule); transition: background var(--dur-micro) var(--ease-out); }
.panel-edge:is(:hover, :active)::before { background: var(--color-screen-muted); }

.slab { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* The bar along the foot of the output and the panel, one with them, a status bar as an editor's: play and the time,
   then what is happening; at its right what the output is */
.status { --time-size: 40px; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 60px; padding: 0 20px 0 12px; container-type: inline-size; }
/* the picture's side of it: with the panel open, the facts under the panel, a container of its own, so the queries below
   that hide what it shows measure the room beside the panel; closed, the bar's, the facts in it */
.status-main { display: flex; flex: 1 1 0; align-items: center; gap: 6px; min-width: 0; }
.panes[data-side="open"] .status-main { container-type: inline-size; }
:is(.slab, .status) .icon-button { color: var(--color-screen-muted); }
:is(.slab, .status) .icon-button:hover:not(:disabled), :is(.slab, .status) .icon-button[aria-pressed="true"] { color: var(--color-screen-bright); background: var(--color-screen-hover); }
.text-button { min-height: 28px; padding: 0 10px; border: 1px solid var(--color-screen-rule); border-radius: 6px; background: var(--color-transparent); color: var(--color-screen-soft); font-size: 12px; }
.text-button:hover { color: var(--color-screen-bright); border-color: var(--color-screen-muted); }

/* The panel: its recipes, its agent, its edits, its code or its export, a tab each in the bar */
.stack, .script { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.script-editor { flex: 1; min-height: 0; }
.console { max-height: 32%; overflow: auto; padding: 10px 20px 12px; border-top: 1px solid var(--color-screen-rule); font: 12px/1.6 var(--font-mono); }
.console .line { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-screen-soft); }
.console .line.value { color: var(--color-screen-bright); }
.console .line.value::before { content: '→ '; color: var(--color-screen-dim); }
.console .line.warn { color: var(--color-screen-accent); }
.console .line.error { color: var(--color-screen-error); }
/* Tabs: two or three views of one thing, one shown, as words: the one shown bright, the others dim (Luminar's Tools and
   Edits); the panel's larger */
.tabs { display: flex; flex: none; gap: 14px; }
.tabs button { position: relative; min-height: 28px; padding: 0; border: 0; background: none; color: var(--color-screen-dim); font: 500 12px var(--font-body); }
.tabs button:hover { color: var(--color-screen-soft); }
.tabs button:is([aria-selected="true"], [aria-expanded="true"]) { color: var(--color-screen-bright); }
/* an icon each: the panels' at the head's right (the code's brackets, the export's arrow down), the settings' sliders,
   the picture's in the bar before its levels (the waveform's bars, the spectrogram's partials) */
.tabs.icons { gap: 4px; }
.tabs.icons button { display: grid; place-items: center; width: 34px; min-height: 30px; border-radius: 7px; }
.tabs.icons button:hover { background: var(--color-screen-hover); }
.tabs.icons svg { width: 19px; height: 19px; }

/* The palette, a notch over the picture, as an editor's: the words, what they act on, then the edits for what is
   selected and every method by kind, its kind's icon beside it, the arrows' choice lit */
.palette { position: fixed; inset: auto; translate: -50% 0; flex-direction: column; width: min(480px, calc(100vw - 32px)); max-height: min(520px, 70vh); margin: 0; padding: 6px; border: 0; border-radius: 12px; background: var(--color-screen-raised); color: var(--color-screen-soft); box-shadow: var(--shadow-menu); }
.palette:popover-open { display: flex; }
.palette-search { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--color-screen-fill); color: var(--color-screen-ink); font-size: 14px; }
.palette-search::placeholder { color: var(--color-screen-placeholder); }
.palette-search:focus-visible { outline: none; }
.tool-target { flex: none; margin: 8px 10px 2px; overflow: hidden; color: var(--color-screen-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.palette-list { flex: 1; min-height: 0; overflow: hidden auto; }
.palette-group { margin: 12px 10px 4px; color: var(--color-screen-dim); font-size: 12px; font-weight: 600; }
.tool { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; text-align: left; }
.tool[aria-selected="true"] { background: var(--color-screen-fill-soft); }
.tool svg { flex: none; width: 18px; height: 18px; color: var(--color-screen-muted); }
.tool[aria-selected="true"] svg { color: var(--color-screen-accent); }
.tool strong { flex: none; color: var(--color-screen-ink); font-size: 13.5px; font-weight: 500; }
.tool[aria-selected="true"] strong { color: var(--color-screen-bright); }
.tool span { flex: 1; min-width: 0; overflow: hidden; color: var(--color-screen-dim); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.tool kbd, .add-step kbd { flex: none; color: var(--color-screen-dim); font: 11px var(--font-mono); }
.tool-none { margin: 16px 10px; color: var(--color-screen-muted); font-size: 12px; }

/* The edits: a rack of cards, one per step of the chain, in order (as mel's modules): a fold, the step's name and, folded,
   what it is set to. The one chosen unfolds to its settings, the output shown up to it, and the steps after it dim; so
   does a step turned off. The one heard for what it takes out is ringed. */
.steps { flex: 1; min-height: 0; overflow: hidden auto; padding: 4px 10px 8px; }
/* rows as a layers panel's, close together, as wide as the panel: what they say is cut short, never widening them; a
   row's own ground only where it is pointed at, chosen or open */
.steps-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; min-width: 0; border-radius: 6px; background: none; transition: background var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
/* dragged along the others, held under the pointer over them */
.step.dragging { z-index: 1; transition: none; background: var(--color-screen-raised); box-shadow: var(--shadow-lifted); }
.step:hover { background: var(--color-screen-fill-hover); }
/* a group's steps, unfolded under its card, set in as an outline sets them */
.step.grouped { margin-left: 16px; }
/* picked with Shift, to be made a group (Mod-G) */
.step.picked { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-screen-accent) 55%, transparent); }
.step.open { background: var(--color-screen-fill); }
.step-group .step-toggle[aria-expanded="true"] .step-icon { color: var(--color-screen-accent); }
.step.chosen { background: var(--color-screen-fill-chosen); }
.step.delta { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-screen-accent) 70%, transparent); }
.step.off .step-toggle, .step.off .params, .step.rolled { opacity: .42; }
.step-head { position: relative; display: flex; align-items: center; min-height: 28px; }
.step-toggle { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 28px; padding: 0 8px; border: 0; background: none; text-align: left; }
/* its chevron, small, before its icon: turned down while it is open (a step's settings shown, a group unfolded); the
   sound the chain starts from opens to nothing, its place kept */
.step-chevron { flex: none; width: 10px; height: 10px; margin-right: -4px; color: var(--color-screen-dim); transition: rotate var(--dur-micro) var(--ease-out); }
.step.open .step-chevron, .step-group .step-toggle[aria-expanded="true"] .step-chevron { rotate: 90deg; }
.step-toggle:hover .step-chevron { color: var(--color-screen-soft); }
.step.sound .step-chevron { visibility: hidden; }
/* its icon, its kind's (ops.js), as the palette shows it */
.step-icon { flex: none; width: 14px; height: 14px; color: var(--color-screen-muted); }
.step.chosen .step-icon, .step-toggle:hover .step-icon { color: var(--color-screen-accent); }
.step-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-screen-ink); font: 500 12.5px var(--font-body); letter-spacing: -.005em; }
.step.chosen .step-name, .step-toggle:hover .step-name { color: var(--color-screen-bright); }
/* what it is set to, as far as the card's edge */
.step-args { flex: 1; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; color: var(--color-screen-muted); font: 10.5px var(--font-mono); font-variant-numeric: tabular-nums; }
/* open, its settings say what it is set to */
.step.open .step-args { visibility: hidden; }
/* its two acts, its switch and ×, over the card's right end where the pointer is (and while it is off, to turn it on),
   what it is set to fading out under them */
.step-acts { position: absolute; top: 50%; right: 6px; display: flex; gap: 2px; translate: 0 -50%; opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); }
.step-head:hover .step-acts, .step-acts:focus-within, .step.off .step-acts { opacity: 1; }
.step-head:hover .step-args, .step.off .step-args { mask-image: linear-gradient(to left, transparent 58px, #000 86px); }
.step-acts .icon-button { width: 22px; height: 22px; border-radius: 5px; }
/* a group named anew, where its name was */
.step-rename { flex: 1; min-width: 0; height: 20px; margin: 0; padding: 0 4px; border: 1px solid var(--color-screen-muted); border-radius: 4px; background: var(--color-screen); color: var(--color-screen-bright); font: 500 12.5px var(--font-body); }
.step-acts .icon-button svg { width: 13px; height: 13px; }
/* open, what it takes out: heard and drawn */
.params .step-delta { justify-self: start; min-height: 24px; padding: 0 9px; border: 1px solid var(--color-screen-rule); border-radius: 6px; background: none; color: var(--color-screen-muted); font: 11.5px var(--font-body); }
.params .step-delta:hover { color: var(--color-screen-bright); border-color: var(--color-screen-muted); }
.params .step-delta[aria-pressed="true"] { border-color: color-mix(in oklch, var(--color-screen-accent) 70%, transparent); color: var(--color-screen-accent); }
/* the settings few touch, folded after those that matter under a button of their own: how many, and open or not */
.params .step-more { display: flex; align-items: center; justify-self: start; gap: 4px; min-height: 22px; margin-left: -3px; padding: 0; border: 0; background: none; color: var(--color-screen-muted); font: 11.5px var(--font-body); }
.params .step-more:hover { color: var(--color-screen-bright); }
.params .step-more:focus-visible { outline: 1px solid var(--color-screen-muted); outline-offset: 2px; border-radius: 4px; }
.params .step-more svg { width: 13px; height: 13px; transition: rotate var(--dur-micro) var(--ease-out); }
.params .step-more[aria-expanded="true"] svg { rotate: 90deg; }
.params .step-more span { color: var(--color-screen-dim); font: 10.5px var(--font-mono); }
.step-toggle:focus-visible { outline: 1px solid var(--color-screen-muted); outline-offset: -1px; border-radius: 8px; }
/* none yet; and the button that takes them all away, at the foot */
/* at the edits' foot, the palette: another step */
.add-step { display: flex; flex: none; align-items: center; gap: 8px; width: 100%; min-height: 28px; margin: 4px 0 0; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--color-screen-muted); font-size: 12.5px; }
.add-step:hover { background: var(--color-screen-fill); color: var(--color-screen-bright); }
.add-step svg { width: 14px; height: 14px; }
.add-step > span { flex: 1; text-align: left; }
.panel-button { flex: none; min-height: 36px; margin: 4px 10px 12px; border: 0; border-radius: 10px; background: var(--color-screen-fill); color: var(--color-screen-muted); font-size: 13px; }
.panel-button:hover:not(:disabled) { background: var(--color-screen-fill-chosen); color: var(--color-screen-bright); }
/* its settings: a name and a value, the slider across under them */
.params { display: grid; gap: 6px; padding: 2px 10px 10px 30px; color: var(--color-screen-soft); }
.params.none { color: var(--color-screen-dim); font-size: 11px; }
.param { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
.param label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-screen-muted); font: 11px var(--font-mono); }
.param output { text-align: right; color: var(--color-screen-ink); font: 11px var(--font-mono); font-variant-numeric: tabular-nums; }
.param output.unset { color: var(--color-screen-dim); }
.param input, .param .choices { grid-column: 1 / -1; }
.param.choice .choices { padding-block: 2px; }
.param input[type="range"] { width: 100%; height: 18px; margin: 0; background: none; -webkit-appearance: none; appearance: none; }
.param input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: var(--color-screen-track); }
.param input[type="range"]::-moz-range-track { height: 2px; border-radius: 1px; background: var(--color-screen-track); }
.param input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--color-screen-bright); -webkit-appearance: none; }
.param input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--color-screen-bright); }
/* A switch: its choices as raised keys joined in one bezel, the one on pressed in */
.choices { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 1px; border-radius: 7px; background: var(--key-bezel); box-shadow: 0 1px 0 var(--key-bezel-light); }
.choices button { min-height: 22px; padding: 0 7px; border: 0; border-radius: 0; background: var(--key-face); box-shadow: inset 0 1px 0 var(--key-light), inset -1px 0 var(--key-seam); color: var(--color-screen-soft); font: 11px var(--font-mono); }
.choices button:first-child { border-radius: 6px 0 0 6px; }
.choices button:last-child { border-radius: 0 6px 6px 0; box-shadow: inset 0 1px 0 var(--key-light); }
.choices button:only-child { border-radius: 6px; }
.choices button:hover { color: var(--color-screen-bright); }
.choices button[aria-pressed="true"] { background: var(--key-pressed); box-shadow: inset 0 1px 3px var(--key-pressed-shadow); color: var(--color-screen-bright); }

/* Output */
/* Above the picture: the open sounds on the left, a tab each, the one shown raised; how it shows on the right */
.view-head { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 0 0 8px; }
.files { display: flex; flex: 1; align-items: center; gap: 2px; min-width: 0; }
.files-list { display: flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; overflow: auto hidden; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.files-list:hover { scrollbar-color: var(--color-screen-rule) transparent; }
.file { display: flex; flex: none; align-items: center; max-width: 220px; height: 28px; padding: 0 3px 0 10px; border-radius: 7px; color: var(--color-screen-dim); }
.file:hover { background: var(--color-screen-hover); color: var(--color-screen-soft); }
/* dragged along, held under the pointer, the others stepping aside */
/* a neighbour giving way to a tab dragged slides aside at once, as quickly as a finger moves */
.file { position: relative; transition: transform var(--dur-micro) var(--ease-out); }
.file.dragging { z-index: 1; transition: none; background: var(--color-screen-raised); box-shadow: var(--shadow-lifted); }
.file.current { background: var(--color-screen-raised); color: var(--color-screen-bright); }
.file [role="tab"] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: 12px var(--font-mono); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-close { display: grid; flex: none; place-items: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--color-screen-muted); opacity: 0; }
.file:hover .file-close, .file.current .file-close, .file-close:focus-visible { opacity: 1; }
.file-close:hover { background: var(--color-screen-hover); color: var(--color-screen-bright); }
.file-close svg { width: 12px; height: 12px; }
.slab .file-new { width: 26px; height: 26px; }
.file-new svg { width: 15px; height: 15px; }
/* what the picture shows when it is not the output: what a step takes out, or the chain up to a step; a press on it
   shows the whole chain again */
.viewing { position: absolute; top: 6px; left: 6px; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 12px); margin: 0; padding: 3px 3px 3px 9px; border-radius: 6px; background: color-mix(in oklch, var(--color-screen) 88%, transparent); box-shadow: inset 0 0 0 1px var(--color-screen-rule); color: var(--color-screen-soft); font-size: 11.5px; white-space: nowrap; pointer-events: none; }
.viewing span { overflow: hidden; text-overflow: ellipsis; }
.viewing button { flex: none; min-height: 20px; padding: 0 8px; border: 0; border-radius: 4px; background: color-mix(in oklch, var(--color-screen-accent) 18%, transparent); color: var(--color-screen-accent); font: inherit; pointer-events: auto; }
.viewing button:hover { background: color-mix(in oklch, var(--color-screen-accent) 30%, transparent); }
.view { position: relative; flex: 1; min-height: 0; margin: 0 0 0 8px; }
.plot { position: absolute; inset: 0; touch-action: none; cursor: text; }
.plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the pictures end --end px from the right (view.js sets it: before the labels, or before the meters, nothing behind
   them), square above the time row; where the sound runs on past the view they may fade out on the way, by an
   exponential, a straight line in decibels, so it reads as even (e^-2u, over --fade px, none by default) */
.plot { --fade: 0px; --end: 52px; }
.plot canvas.waveform, .plot canvas.spectrum, .plot canvas.grid { mask-image: linear-gradient(to right, #000 calc(100% - var(--end) - var(--fade)), rgb(0 0 0 / .55) calc(100% - var(--end) - var(--fade) * .75), rgb(0 0 0 / .27) calc(100% - var(--end) - var(--fade) * .5), rgb(0 0 0 / .10) calc(100% - var(--end) - var(--fade) * .25), rgb(0 0 0 / .04) calc(100% - var(--end) - var(--fade) * .125), transparent calc(100% - var(--end))); }
/* How brightly the sound is drawn is the layer's own (view.js, light): none before any of it is here, dim while it is
   the file arriving, full once it is the output; what is drawn over it comes with it. It only ever fades between them,
   so a sound never blinks, and empty lanes never wait for one. */
.plot canvas { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.dropping .view::after { content: ''; position: absolute; inset: -4px 8px 0 -4px; border: 1px dashed var(--color-screen-muted); border-radius: 10px; pointer-events: none; }
/* a file held over the tabs: it opens in a tab of its own, where the new tab's button is */
.dropping-tab .files { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--color-screen-muted); }
.dropping-tab .file-new { background: var(--color-screen-fill-hover); color: var(--color-screen-accent); }

.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; }
.empty-title { margin: 0; color: var(--color-screen-ink); font-size: 20px; font-weight: 450; letter-spacing: -.02em; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--color-screen-rule); border-radius: 999px; background: var(--color-screen); color: var(--color-screen-soft); font-size: 13px; }
.empty-button svg { width: 16px; height: 16px; color: var(--color-screen-muted); }
.empty-button:hover { color: var(--color-screen-bright); border-color: var(--color-screen-muted); }


/* The bar's parts */
/* Play, record and loop, side by side as on a deck, one round button each */
.record, .play, .busy, .loop { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--color-screen-bright); }
.record, .busy, .loop { width: 36px; height: 36px; }
.record:hover, .loop:hover:not(:disabled) { background: var(--color-screen-hover); }
.loop { margin-right: 4px; color: var(--color-screen-muted); }
.loop svg { width: 17px; height: 17px; }
.loop[aria-pressed="true"] { color: var(--color-screen-accent); }
.record-icon { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--color-screen-record); opacity: .8; }
.record:hover .record-icon { opacity: 1; }
/* Recording, a square to stop it, steady; armed, the microphone still opening, it blinks, as a deck's record key does */
.record.on .record-icon { border-radius: 2px; opacity: 1; }
.record.armed .record-icon { animation: armed .5s steps(1) infinite; }
@keyframes armed { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .record.armed .record-icon { animation: none; opacity: .5; } }
.play:hover:not(:disabled), .busy:hover { background: var(--color-screen-hover); }
/* How far through the sound it plays: a ring round Play, its share of the whole from the top, clockwise, there while it
   plays */
.play, .busy { position: relative; }
.play::before, .busy::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(var(--color-screen-accent) calc(var(--played) * 360deg), var(--color-screen-rule) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); pointer-events: none; }
.play.rolling::before { opacity: 1; }
/* In its place while the engine works: the same ring, how far what is on its way has come, or a quarter of it turning
   where nothing says; a square in it, to stop */
.busy::before { --played: var(--arrived); opacity: 1; }
.busy.turning::before { --played: .25; animation: turning 1s linear infinite; }
@keyframes turning { to { rotate: 1turn; } }
.stop-icon { display: block; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
/* Record, and while it plays the speed in its place: one slot, as wide as the widest speed (0.13×), the one there
   fading in for the other, so nothing beside it moves */
.deck-slot { display: grid; place-items: center; }
.deck-slot > * { grid-area: 1 / 1; transition: opacity var(--dur-micro) var(--ease-out); }
.deck-slot > [inert] { opacity: 0; }
.speed-pill { min-width: calc(5ch + 14px); min-height: 22px; padding: 0 7px; border: 0; border-radius: 11px; background: var(--color-screen-fill); color: var(--color-screen-ink); font: 11px var(--font-mono); font-variant-numeric: tabular-nums; }
.speed-pill:hover { background: var(--color-screen-fill-hover); }
/* Play dragged: the speeds' scale over it, 0.1× to 10×, a doubling each 32 px (213 px), the speed marked; the pointer
   hidden */
.speed-axis { position: fixed; z-index: 20; width: calc(213px + 28px); height: 34px; translate: 0 calc(-100% - 10px); border-radius: 8px; background: var(--color-screen-raised); box-shadow: var(--shadow-menu); pointer-events: none; }
.speed-tick { position: absolute; bottom: 6px; left: calc(14px + var(--at) * 213px); translate: -50% 0; color: var(--color-screen-dim); font: 10px var(--font-mono); }
.speed-tick::before { content: ''; position: absolute; top: -8px; left: 50%; width: 1px; height: 5px; background: var(--color-screen-rule); }
.speed-mark { position: absolute; top: 4px; left: calc(14px + var(--at) * 213px); translate: -50% 0; padding: 0 4px; border-radius: 4px; background: var(--color-screen-accent); color: var(--color-screen); font: 10px var(--font-mono); }
.shuttling, .shuttling * { cursor: none !important; }
.play-icon { display: block; width: 0; height: 0; margin-left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; }
.play-icon.paused { width: 11px; height: 14px; margin-left: 0; border: 0; border-inline: 3px solid currentColor; }
/* The time as on the home page, large light digits, one time always, the caret's or the playhead's; after it, how long
   all that is selected is, white between dim bars, as a length is marked, on its baseline. It keeps its width, the
   length's room kept while there is none, as the levels' at the right: nothing moves as a selection is made, dragged,
   played or heard, the message between them the one that gives way */
.status-main > *, .facts { flex: none; }
.clock { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 0 6px; }
.time { color: var(--color-screen-ink); font: 300 var(--time-size)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.length { min-width: 4.6em; color: var(--color-screen-bright); font: 300 calc(var(--time-size) * .5)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.length:empty { display: none; }
.length.whole { color: var(--color-screen-soft); }
.length::before, .length::after { content: '|'; color: var(--color-screen-dim); }
.message, .facts, .readout, .heard { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; white-space: nowrap; font: 11px/16px var(--font-mono); font-variant-numeric: tabular-nums; }
.message, .heard { overflow: hidden; text-overflow: ellipsis; }
/* what is happening, one line after the time: a note, a problem in red, the engine's work; the room that is left, whole
   or none: what the sound is is never cut short, it goes whole as the bar narrows (below) */
.message { display: block; flex: 1 1 0; margin-left: 6px; color: var(--color-screen-soft); }
.message.problem { color: var(--color-screen-error); }
/* what the sound is, each a button: its rate resamples it, its channels mix it */
.fact { flex: none; margin: 0 -3px; padding: 0 3px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; }
.fact:hover, .fact:focus-visible { background: var(--color-screen-hover); color: var(--color-screen-bright); }
.facts { margin-left: 14px; color: var(--color-screen-soft); }
/* the levels as digits turn: room for the longest (peak −10.0dB RMS −21.0dB), at the right */
.readout { display: block; min-width: 25ch; margin-left: 6px; color: var(--color-screen-muted); text-align: right; }
.heard { display: block; flex: 0 1 auto; margin-left: 6px; color: var(--color-screen-dim); }
/* Scenarios: a goal's whole chain each, found by their words, a card each: its name, what it does, the spec it delivers */
.scenarios, .chat { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.scenarios { gap: 4px; overflow: auto; padding: 4px 14px 14px; }
.scenario-search, .chat-form textarea { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--color-screen-rule); border-radius: 8px; background: var(--color-screen-well); color: var(--color-screen-ink); font: 13px var(--font-body); }
.scenario-search:focus, .chat-form textarea:focus { border-color: var(--color-screen-muted); outline: none; }
.scenario-search::placeholder, .chat-form textarea::placeholder { color: var(--color-screen-placeholder); }
/* a group each, folded till opened or searched */
.recipe-group > summary { display: flex; align-items: baseline; gap: 8px; padding: 8px 2px; color: var(--color-screen-ink); font-size: 12px; font-weight: 500; list-style: none; cursor: pointer; }
.recipe-group > summary::-webkit-details-marker { display: none; }
.recipe-group > summary::before { content: '›'; width: 8px; color: var(--color-screen-dim); transition: rotate var(--dur-micro) var(--ease-out); }
.recipe-group[open] > summary::before { rotate: 90deg; }
.recipe-group > summary em { color: var(--color-screen-dim); font: normal 11px var(--font-mono); }
.recipe-group > summary:hover { color: var(--color-screen-bright); }
.scenario { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; }
.scenario:hover { background: var(--color-screen-fill); }
.scenario strong { color: var(--color-screen-ink); font-size: 13px; font-weight: 500; }
.scenario:hover strong { color: var(--color-screen-bright); }
.scenario span { grid-column: 1; overflow: hidden; color: var(--color-screen-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.scenario em { grid-area: 1 / 2 / 3; align-self: center; color: var(--color-screen-dim); font: normal 11px var(--font-mono); }
/* The agent: the conversation, newest at the foot, what to say under it */
.chat-log { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px; }
.chat-empty { color: var(--color-screen-muted); font-size: 12.5px; }
.chat-empty p { margin: 0 0 10px; }
.chat-empty code { padding: 2px 6px; border-radius: 5px; background: var(--color-screen-fill-soft); color: var(--color-screen-bright); font: 12px var(--font-mono); }
.link { padding: 0; border: 0; background: none; color: var(--color-screen-bright); text-decoration: underline; text-underline-offset: 3px; }
.chat-message { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.chat-message.user p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.user { width: fit-content; max-width: 85%; margin-left: auto; padding: 6px 10px; border-radius: 10px; background: var(--color-screen-fill-quiet); color: var(--color-screen-bright); }
.chat-message.agent { color: var(--color-screen-ink); }
/* a call the agent made, where it made it: done, a tick; refused, a cross */
.chat-step { display: flex; gap: 7px; margin: 3px 0; color: var(--color-screen-muted); font: 11.5px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.chat-step::before { content: '✓'; flex: none; width: 10px; color: var(--color-screen-dim); }
.chat-step.failed::before { content: '✗'; color: var(--color-screen-error); }
.chat-step > span { min-width: 0; }
/* a place on the sound, a click away: the step's words underlined as a link's, dotted */
.chat-step button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted var(--color-screen-dim); text-underline-offset: 3px; }
.chat-step button:hover, .chat-step button:focus-visible { color: var(--color-screen-bright); text-decoration-color: currentColor; }
/* what it came to */
.chat-note { color: var(--color-screen-soft); }
.chat-step.failed .chat-note { color: var(--color-screen-error); }
.md + .chat-step { margin-top: 8px; }
.chat-step + .md, .chat-table + .md { margin-top: 8px; }
/* its values, under it, indented past the tick: the check table's rows */
.chat-message .chat-table { width: calc(100% - 17px); margin: 2px 0 6px 17px; }
.chat-message .chat-table th[scope="row"] { white-space: normal; }
/* a value takes half the row at most, wrapping at its spaces past that: the name keeps the rest */
.chat-message.agent { container-type: inline-size; }
.chat-message .chat-table td { white-space: normal; }
.chat-message .chat-table td > span:last-child { display: inline-block; max-width: 50cqi; }
/* the agent's words, Markdown (markdown.js), set as the panel's own text: code in its wells, tables ruled, links underlined */
.md { overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md :is(p, ul, ol, pre, blockquote, .md-table) { margin: 0 0 8px; }
.md :is(h1, h2, h3, h4, h5, h6) { margin: 14px 0 6px; color: var(--color-screen-bright); font-size: 13px; font-weight: 600; line-height: 1.35; }
.md h1 { font-size: 15px; }
.md h2 { font-size: 14px; }
.md :is(ul, ol) { padding-left: 20px; }
.md li { margin: 2px 0; }
.md li > :is(ul, ol, p) { margin: 2px 0 0; }
.md li::marker { color: var(--color-screen-dim); }
.md strong { color: var(--color-screen-bright); font-weight: 600; }
.md del { color: var(--color-screen-muted); }
.md a { color: var(--color-screen-bright); text-decoration: underline var(--color-screen-dim); text-underline-offset: 2px; }
.md a:hover { text-decoration-color: currentColor; }
.md code { padding: 1px 5px; border-radius: 4px; background: var(--color-screen-fill-soft); color: var(--color-screen-bright); font: 12px var(--font-mono); }
.md pre { padding: 8px 10px; overflow-x: auto; border-radius: 8px; background: var(--color-screen-well); }
.md pre code { padding: 0; background: none; color: var(--color-screen-ink); white-space: pre; }
.md blockquote { padding-left: 10px; border-left: 2px solid var(--color-screen-rule); color: var(--color-screen-soft); }
.md hr { margin: 12px 0; border: 0; border-top: 1px solid var(--color-screen-rule); }
.md-table { overflow-x: auto; }
.md table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.4; }
.md :is(th, td) { padding: 5px 10px 5px 0; border-top: 1px solid var(--color-screen-rule); text-align: left; vertical-align: top; }
.md :is(th, td):last-child { padding-right: 0; }
.md thead th { border-top: 0; color: var(--color-screen-muted); font-weight: 500; }
.md :is(th, td).right { text-align: right; }
.md :is(th, td).center { text-align: center; }
/* while it answers: three dots in turn, what it does now, one line, and how long it has taken */
.chat-busy { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 4px 0 0; color: var(--color-screen-muted); font: 11px var(--font-mono); }
.chat-doing { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-elapsed { flex: none; margin-left: auto; color: var(--color-screen-dim); font-variant-numeric: tabular-nums; }
.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: chat-dot 1.2s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: .15s; }
.chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-dots i { animation: none; opacity: .6; } }
/* its conversations: the open one's name, a click listing the tab's others; a new one */
.chat-head { display: flex; flex: none; align-items: center; gap: 4px; padding: 4px 8px 0 8px; }
.chat-title { display: flex; flex: 1; align-items: center; gap: 4px; min-width: 0; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--color-screen-soft); font-size: 12px; font-weight: 500; }
.chat-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title svg { width: 14px; height: 14px; color: var(--color-screen-dim); }
.chat-title:hover, .chat-title:focus-visible { background: var(--color-screen-hover); color: var(--color-screen-bright); }
.chat-head .icon-button { width: 28px; height: 28px; }
.chat-head .icon-button svg { width: 16px; height: 16px; }
.chat-item { display: flex; align-items: center; gap: 2px; }
.chat-item .menu-item { flex: 1; min-width: 0; }
.chat-item .menu-item strong { flex: 1; min-width: 0; overflow: hidden; font: 12px var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.chat-item .menu-item span { flex: none; font-size: 11px; }
/* its delete, where the pointer is (always, where there is none) */
.chat-drop { flex: none; width: 28px; height: 28px; opacity: 0; }
.chat-drop svg { width: 14px; height: 14px; }
.chat-item:is(:hover, :focus-within) .chat-drop { opacity: 1; }
@media (hover: none) { .chat-drop { opacity: 1; } }
.chat-error { display: block; margin-top: 4px; color: var(--color-screen-error); font-size: 12px; }
.chat-form { display: flex; flex: none; align-items: flex-end; gap: 8px; padding: 8px 14px 0; }
.chat-form textarea { flex: 1; min-height: 40px; max-height: 40vh; padding: 9px 12px; resize: none; line-height: 1.4; field-sizing: content; }
.chat-send { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: var(--color-screen-bright); color: var(--color-screen); }
.chat-send:disabled { background: var(--color-screen-fill-off); color: var(--color-screen-dim); }
.chat-send svg { width: 17px; height: 17px; }
/* the agent asked, under the message: a click lists the others the bridge found */
.chat-agent { display: flex; align-self: flex-start; align-items: center; gap: 2px; max-width: calc(100% - 20px); height: 24px; margin: 4px 0 0 10px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--color-screen-muted); font-size: 11.5px; }
.chat-agent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-agent svg { flex: none; width: 13px; height: 13px; color: var(--color-screen-dim); }
.chat-agent:hover, .chat-agent:focus-visible { background: var(--color-screen-hover); color: var(--color-screen-bright); }
#agents-menu { position-area: top span-right; }
/* the bridge, over the message: its address and key until it connects, then the agent on it */
.chat-connect { flex: none; padding: 8px 14px 0; }
.chat-connect .field { margin-bottom: 6px; }
.chat-connect .field-note { margin: 2px 0 4px; }

/* a marker's name, written over its flag */
.marker-name { position: absolute; z-index: 2; width: 140px; height: 18px; padding: 0 5px; border: 1px solid var(--color-screen-muted); border-radius: 4px; background: var(--color-screen); color: var(--color-screen-bright); font: 11px var(--font-mono); outline: none; }

/* The page's hints (hint.js): a few words by what they are about, over everything; a theme's to restyle */
.hint { position: fixed; z-index: 20; top: 0; left: 0; max-width: min(380px, calc(100vw - 8px)); padding: 1px 6px; overflow: hidden; border-radius: 4px; background: var(--hint-bg); color: var(--hint-ink); box-shadow: 0 0 0 1px var(--color-screen-rule); font: 11px/16px var(--font-mono); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Menus and the search */
.menu { width: 300px; max-height: min(560px, calc(100dvh - var(--bar) - 24px)); margin: 0; padding: 6px; overflow: auto; border: 0; border-radius: 10px; background: var(--color-screen-raised); color: var(--color-screen-soft); box-shadow: var(--shadow-menu); position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; margin-block: 6px; }
.menu.wide { width: 380px; }
.menu.narrow { width: 230px; }
#rate-menu, #channels-menu { position-area: top span-right; }
/* A dropdown: a picture's options or the settings, every group in sight, its choices as keys, what the chosen one does
   said under them */
.dropdown { position: fixed; inset: auto; width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); margin: 0; padding: 4px 14px 12px; overflow: auto; border: 0; border-radius: 12px; background: var(--color-screen-raised); color: var(--color-screen-soft); box-shadow: var(--shadow-menu); }
.dropdown-group { padding-top: 10px; }
.dropdown-label { margin: 0 0 6px; color: var(--color-screen-ink); font: 500 12px var(--font-body); }
.dropdown .choices button { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
.dropdown-note { min-height: 15px; margin: 5px 0 0; color: var(--color-screen-dim); font: 11.5px/15px var(--font-body); }
/* The export: the checks, rule by rule, and the file */
.export { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto; padding: 0 14px 14px; }
.export > .panel-group:first-child, .export > .form:first-child > .panel-group:first-child { margin-top: 4px; }
.panel-group { display: flex; flex: none; align-items: baseline; gap: 8px; margin: 16px 0 8px; overflow: hidden; color: var(--color-screen-ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
/* what it is for, in a few words after it */
.panel-group span { min-width: 0; overflow: hidden; color: var(--color-screen-dim); font-weight: 400; text-overflow: ellipsis; }
.export .choices button { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
.export .check-table { margin-top: 12px; }
/* a long limit wraps in a narrow panel */
.export .check-table .limit { white-space: normal; }
.export .check-note { margin: 10px 2px 0; }
/* The export's forms, one after another, a rule between, each folded or open: the file (open), the edit list, the
   check (open while a spec is chosen). A field each: its name in a column of its own, its control, what it means */
.export .form { padding-bottom: 6px; }
.export .form + .form { border-top: 1px solid var(--color-screen-rule); }
.export .form[open] { display: grid; gap: 10px; padding-bottom: 18px; }
.export .form > summary { margin: 12px 0 6px; list-style: none; cursor: pointer; }
.export .form > summary::-webkit-details-marker { display: none; }
.export .form > summary::before { content: '›'; width: 8px; color: var(--color-screen-dim); transition: rotate var(--dur-micro) var(--ease-out); }
.export .form[open] > summary::before { rotate: 90deg; }
.export .form > summary:hover { color: var(--color-screen-bright); }
.export .choices.wide { width: 100%; }
.export .choices.wide button { flex: 1; }
.form-note { margin: -4px 0 0; color: var(--color-screen-dim); font-size: 11.5px; }
.field { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 28px; }
.field-label { color: var(--color-screen-muted); font-size: 12px; }
.field-note { overflow: hidden; color: var(--color-screen-dim); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.field > .choices, .field > .name-input { grid-column: 2 / -1; }
/* a name and its extension, one field */
.name-input { display: flex; align-items: center; min-width: 0; height: 28px; padding: 0 9px; border: 1px solid var(--color-screen-rule); border-radius: 6px; background: var(--color-screen-well); font: 12px var(--font-mono); }
.name-input:focus-within { border-color: var(--color-screen-muted); }
.name-input input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--color-screen-bright); font: inherit; outline: none; }
.name-input input::placeholder { color: var(--color-screen-placeholder); }
.name-input span { color: var(--color-screen-dim); }
/* on or off, as a switch: its knob slides over */
.switch { position: relative; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px; background: var(--color-screen-switch); transition: background var(--dur-micro) var(--ease-out); }
.switch span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-screen-soft); transition: translate var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--color-screen-bright); }
.switch[aria-checked="true"] span { translate: 12px 0; background: var(--color-screen); }
/* the act: what it makes, and how large */
.export .export-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: 4px 0 0; padding: 0 14px; border: 0; border-radius: 9px; background: var(--color-screen-fill-quiet); color: var(--color-screen-bright); font-size: 13px; font-weight: 500; }
.export .export-button:hover:not(:disabled) { background: var(--color-screen-fill-quiet-hover); }
/* a lesser act: the edit list, connecting the agent */
.quiet-button { display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 4px 0 0; border: 0; border-radius: 9px; background: var(--color-screen-fill-quiet); color: var(--color-screen-bright); font-size: 12.5px; font-weight: 500; }
.quiet-button:hover:not(:disabled) { background: var(--color-screen-fill-quiet-hover); }
.export-size { font: 12px var(--font-mono); opacity: .6; }
.check-table { width: 100%; border-collapse: collapse; font: 11px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; transition: opacity var(--dur-short) var(--ease-out); }
.check-table.stale { opacity: .45; }
.check-table th, .check-table td { padding: 5px 6px; border-top: 1px solid var(--color-screen-rule); text-align: right; white-space: nowrap; }
.check-table thead th { border-top: 0; color: var(--color-screen-dim); font: 11px var(--font-body); }
.check-table th[scope="row"], .check-table thead th:first-child { text-align: left; color: var(--color-screen-ink); font-weight: 400; }
.check-table td { color: var(--color-screen-soft); }
.check-table .fail { color: var(--color-screen-error); }
.check-table .pass .mark { color: var(--color-screen-bright); }
.check-table .info, .check-table .limit { color: var(--color-screen-muted); }
.check-table tr[title]:not([title=""]) th[scope="row"] { text-decoration: underline dotted var(--color-screen-dim); text-underline-offset: 3px; }
.check-note { margin: 10px 6px 0; color: var(--color-screen-muted); font-size: 11px; }
.check-note a { color: var(--color-screen-soft); }
.check-note a:hover { color: var(--color-screen-bright); }
.menu-item { display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 12px; }
.menu-item strong { flex: none; color: var(--color-screen-ink); font: 500 12px var(--font-mono); }
/* an agent's model, under the agent it runs */
.menu-item.agent-model { min-height: 28px; padding-left: 22px; color: var(--color-screen-soft); }
.menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-screen-muted); }
.menu-item:hover, .menu-item[aria-current="true"] { background: var(--color-screen-pill-active); }
.menu-item:hover strong { color: var(--color-screen-bright); }
.menu-group { margin: 10px 10px 4px; color: var(--color-screen-dim); font-size: 11px; font-weight: 500; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.search { width: min(620px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 48px)); padding: 0; border: 0; border-radius: var(--radius-slab); background: var(--color-screen); color: var(--color-screen-soft); box-shadow: var(--shadow-menu); }
.search::backdrop { background: var(--color-backdrop); }
.elsewhere { padding: 20px; border: 0; border-radius: var(--radius-slab); background: var(--color-screen); color: var(--color-screen-ink); box-shadow: var(--shadow-menu); text-align: center; }
.elsewhere::backdrop { background: var(--color-backdrop); }
.elsewhere p { margin: 0 0 14px; }
.elsewhere .bar-button { color: var(--color-screen-ink); border: 1px solid var(--color-screen-rule); }
.elsewhere .bar-button:hover { background: var(--color-screen-hover); color: var(--color-screen-bright); }
.search-form { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--color-screen-rule); }
.search-form input { flex: 1; min-width: 0; min-height: 36px; padding: 0 12px; border: 1px solid var(--color-screen-rule); border-radius: 8px; background: var(--color-screen-low); color: var(--color-screen-ink); }
.search .bar-button.primary { background: var(--color-screen-bright); color: var(--color-screen); }
.search .bar-button:not(.primary) { color: var(--color-screen-ink); border: 1px solid var(--color-screen-rule); }
.search .bar-button:hover:not(:disabled) { background: var(--color-screen-hover); color: var(--color-screen-bright); }
.search .icon-button { color: var(--color-screen-muted); }
.search-state { margin: 10px 18px 0; color: var(--color-screen-muted); font-size: 12px; min-height: 18px; }
.results { margin: 0; padding: 6px 8px 10px; list-style: none; overflow: auto; max-height: 480px; }
.results li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; }
.results li:hover { background: var(--color-screen-raised); }
.results .icon-button { color: var(--color-screen-bright); }
.result-text { display: grid; flex: 1; min-width: 0; }
.result-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-screen-ink); font-weight: 500; font-size: 13px; }
.result-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-screen-muted); font-size: 11px; }
.file-input { display: none; }
/* What the mouse and keys do */
.help { width: min(560px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 48px)); padding: 0 0 12px; border: 0; border-radius: var(--radius-slab); background: var(--color-screen); color: var(--color-screen-soft); box-shadow: var(--shadow-menu); }
.help::backdrop { background: var(--color-backdrop); }
.help-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0 8px; }
.help .icon-button { color: var(--color-screen-muted); }
.help-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; padding: 4px 18px 8px; font-size: 12.5px; }
.help-list dt { color: var(--color-screen-ink); font: 12px var(--font-mono); }
.help-list dd { margin: 0; color: var(--color-screen-muted); }

@media (max-width: 720px) {
  :root { --gutter: 8px; --bar: 52px; }
  .bar { gap: 4px; padding-inline: 12px 8px; }
  .wordmark { font-size: 18px; margin-right: 4px; }
  .wordmark .logo { width: 16px; }
  .wordmark .logo canvas { height: 27px; }
  .bar-button { padding: 0 8px; }
  .bar-end > .bar-button:not(.primary) { display: none; }
}
/* A narrow or short window: the panel a sheet over the lower part of the output, the whole width, as tall as it can be
   and keep a strip of the picture over it */
@media (max-width: 760px), (max-height: 520px) {
  .app .panes > .side-slab { position: absolute; z-index: 3; grid-area: 2 / 1 / 3 / -1; inset: auto 6px 6px; width: auto; max-width: none; height: max(min(260px, calc(100% - 12px)), calc(100% - 80px)); border-radius: 10px; background: var(--color-screen-raised); box-shadow: var(--shadow-menu); }
  .app .panes[data-side="none"] > .view-slab, .app .panes > .view-slab { grid-column: 1 / -1; }
  .app .panel-edge { display: none; }
  .app .panes[data-side="open"] .facts { width: auto; }
}
/* A narrow bar: what the sound holds goes, then the digits are smaller, then the levels, the rate and the length, each
   whole where the bar has the room for it and the message a hundred pixels or so */
@container (max-width: 970px) { .heard { display: none; } }
@container (max-width: 790px) { .clock { --time-size: 28px; } }
@container (max-width: 715px) { .readout { display: none; } }
@container (max-width: 540px) { .facts { display: none; } }
@container (max-width: 430px) { .length { display: none; } }
/* narrow windows: the menu's names go small before anything else */
@media (max-width: 900px) { .menubar-item { padding: 0 6px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }