:root {
  --wall: #eef1f4;
  --card: rgba(251, 252, 253, 0.84);
  --card-solid: #fbfcfd;
  --ink: #1e2833;
  --ink-soft: #5a6673;
  --ink-faint: #93a0ad;
  --line: #d7dde4;
  --line-soft: #e4e9ee;
  --cobalt: #2050d0;
  --cobalt-deep: #1a41ab;
  --cobalt-soft: rgba(32, 80, 208, 0.1);
  --hot: #c8312a;
  --cold: #2a4fc8;
  --gold: #c99a2e;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --easing: cubic-bezier(0.19, 1, 0.22, 1);
  --panel-w: 236px;
  --insp-w: 292px;
  --mast-h: 56px;
  --strip-h: 92px;
  --hint-h: 26px;
}
[data-backdrop='dark'] {
  --wall: #17172b;
  --card: rgba(24, 24, 44, 0.78);
  --card-solid: #1c1c33;
  --ink: #eef1f6;
  --ink-soft: #aab4c2;
  --ink-faint: #7a859a;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --cobalt: #7aa2ff;
  --cobalt-deep: #9dbaff;
  --cobalt-soft: rgba(122, 162, 255, 0.14);
  --gold: #e2b955;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
b { font-weight: 600; }

.app { position: fixed; inset: 0; overflow: hidden; color: var(--ink); }
.stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leaders .leader { fill: none; stroke: var(--ink-soft); stroke-width: 1; opacity: 0; }
.leaders .leader-dot { fill: var(--cobalt); stroke: var(--card-solid); stroke-width: 1.5; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.label {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 9px 4px 8px;
  color: var(--ink); white-space: nowrap; visibility: hidden; will-change: transform;
  transition: border-color 160ms var(--easing), box-shadow 160ms var(--easing);
}
.label:hover, .label.is-selected { border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--cobalt-soft); }
.label-index { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--cobalt); }
.label-text { font-weight: 600; font-size: 12.5px; }
.label-part .label-text { font-weight: 500; font-size: 12px; }
.label-part .label-index { color: var(--ink-faint); }

.eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.eyebrow.faint { color: var(--ink-faint); }

/* masthead */
.masthead {
  position: absolute; left: 0; right: 0; top: 0; height: var(--mast-h); padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.masthead > * { pointer-events: auto; }
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.wordmark span { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.wordmark small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.masthead-right { display: flex; align-items: center; gap: 18px; }
.icon-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
  font-family: var(--serif); font-style: italic; font-size: 14px; cursor: pointer; display: grid; place-items: center;
}
.icon-btn:hover { border-color: var(--ink-soft); }

/* intro block */
.intro { position: absolute; left: 28px; top: 82px; width: 320px; pointer-events: none; }
.intro .eyebrow { white-space: nowrap; }
.intro > * { pointer-events: auto; }
.intro h1 {
  font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.02; letter-spacing: -0.015em;
  margin: 10px 0 12px; color: var(--ink); font-optical-sizing: auto;
}
.intro h1 .stop { color: var(--cobalt); }
.lede { margin: 0; max-width: 270px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }

/* perspective control */
.perspective { position: absolute; right: 28px; top: 82px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pick-row { display: flex; align-items: center; gap: 10px; }
.pick-row[hidden] { display: none; }
.pick-row .eyebrow { white-space: nowrap; }
[data-machine] .pickselect .segment button[aria-selected='true'] { background: var(--cobalt); color: #fff; }
.pickselect .segment button:disabled { opacity: 0.4; cursor: default; }
.segment { display: inline-flex; background: var(--card); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.segment button { border: 0; background: transparent; border-radius: 6px; padding: 6px 13px; font-weight: 600; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; transition: background 200ms var(--easing), color 200ms var(--easing); }
.segment button[aria-selected='true'] { background: var(--ink); color: var(--card-solid); }
[data-backdrop='dark'] .segment button[aria-selected='true'] { background: var(--cobalt); color: #0e1020; }
.segment button:hover:not([aria-selected='true']) { color: var(--ink); }

/* panels */
.panel {
  position: absolute; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; min-height: 0;
  transition: opacity 240ms var(--easing), transform 240ms var(--easing);
}
[data-panels='hidden'] .panel, [data-panels='hidden'] .intro { opacity: 0; pointer-events: none; transform: translateY(6px); }
.tree { left: 28px; top: 232px; bottom: calc(var(--strip-h) + var(--hint-h) + 18px); width: var(--panel-w); }
.inspector { right: 28px; top: 140px; bottom: calc(var(--strip-h) + var(--hint-h) + 18px); width: var(--insp-w); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.panel-head .faint { font-size: 9.5px; letter-spacing: 0.08em; }
.tree-list { list-style: none; margin: 0; padding: 6px 6px 26px; overflow-y: auto; min-height: 0; flex: 1; }
.tree-list.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.tree-list::-webkit-scrollbar, .inspector-body::-webkit-scrollbar, .controls::-webkit-scrollbar { width: 6px; }
.tree-list::-webkit-scrollbar-thumb, .inspector-body::-webkit-scrollbar-thumb, .controls::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tree-module { margin: 0; }
.tree-row {
  width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--ink);
}
.tree-row:hover { background: var(--cobalt-soft); }
.tree-row.is-selected { background: var(--cobalt-soft); color: var(--cobalt-deep); }
.tree-row .chev { width: 10px; font-size: 9px; color: var(--ink-faint); transition: transform 200ms var(--easing); }
.tree-module.is-open .tree-row .chev { transform: rotate(90deg); }
.tree-row .idx { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); width: 16px; }
.tree-row .name { font-weight: 600; font-size: 12.5px; flex: 1; }
.tree-row .cnt { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.tree-parts { list-style: none; margin: 0; padding: 0 0 4px 22px; display: none; }
.tree-module.is-open .tree-parts { display: block; }
.tree-part { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; text-align: left; padding: 4px 8px; border-radius: 5px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.tree-part::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.tree-part:hover { background: var(--cobalt-soft); color: var(--ink); }
.tree-part.is-selected { color: var(--cobalt-deep); background: var(--cobalt-soft); }
.tree-part.is-selected::before { background: var(--cobalt); }

.inspector-body { padding: 14px 16px 26px; overflow-y: auto; min-height: 120px; flex: 1 1 auto; border-bottom: 1px solid var(--line-soft); scrollbar-gutter: stable; }
.inspector-body::-webkit-scrollbar-thumb { background: var(--ink-faint); }
/* the pill never covers a live line: it rides a strip pinned to the foot of the
   scrollport, solid under the pill and fading to nothing above it */
.body-wrap { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* The inspector's own wrapper takes the room the controls leave, not the room its text
   wants: with `flex-basis: auto` its base was the whole overview, so it won every shrink
   and squeezed the control groups into a scroll. A floor of its own keeps the eyebrow, the
   title, the first lines and the More below pill on screen whatever the controls need. */
#inspector .body-wrap { flex: 1 1 0; min-height: 140px; }
.more-fade { position: absolute; left: 0; right: 0; bottom: 1px; z-index: 2; padding: 40px 0 9px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--card-solid) 62%); border-radius: 0 0 9px 9px; }
.more-fade[hidden] { display: none; }
.more-hint { pointer-events: auto; display: block; margin: 0 auto; border: 1px solid var(--line); background: var(--card-solid); border-radius: 999px; padding: 2px 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt); cursor: pointer; }
.more-hint[hidden] { display: none; }
.crumbs { margin-bottom: 6px; }
.crumbs button { font: inherit; color: var(--cobalt); background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.crumbs button:hover { text-decoration: underline; }
.insp-title { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.01em; }
.insp-text { margin: 0 0 10px; color: var(--ink-soft); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-soft); background: transparent; }
.chip.hot { border-color: var(--cobalt); color: var(--cobalt); }
.insp-more details { border-top: 1px solid var(--line-soft); }
.insp-more summary { cursor: pointer; padding: 8px 0; font-weight: 600; font-size: 12px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.insp-more summary::-webkit-details-marker { display: none; }
.insp-more summary::after { content: '+'; color: var(--ink-faint); font-family: var(--mono); }
.insp-more details[open] summary::after { content: '−'; }
/* a short window (a class laptop at 1280 x 700) leaves the card about 190 px: the top
   matter gives up its spare room so the first note's heading is on screen without a scroll */
[data-short='1'] .insp-title { font-size: 18px; margin: 0 0 5px; }
[data-short='1'] .insp-text { margin: 0 0 6px; }
[data-short='1'] .chips { margin-bottom: 6px; }
[data-short='1'] .crumbs { margin-bottom: 4px; }
[data-short='1'] .insp-more summary { padding: 6px 0; }
.insp-more p { margin: 0 0 8px; color: var(--ink-soft); font-size: 12px; }
.insp-more .src { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-bottom: 8px; word-break: break-word; }
.actions { display: flex; gap: 6px; margin-top: 8px; }
.actions[hidden] { display: none; }
.btn { border: 1px solid var(--line); background: var(--card-solid); border-radius: 6px; padding: 6px 10px; font-weight: 600; font-size: 12px; cursor: pointer; }
.btn:hover { border-color: var(--ink-soft); }
.btn.ghost { background: transparent; }
.btn.is-on { border-color: var(--cobalt); color: var(--cobalt); }

/* This page opens as many as six control groups at once (Assembly, Cutaway, Format,
   Transport, Chain, Display), two more than the monitor, and the card must still open on
   its eyebrow, its title and the first lines of its text. So the body holds a floor of its
   own and the controls give way: the rows below are tight enough that six groups fit
   inside that floor at 1280 by 700 without scrolling, and `.body-wrap` clips, which it was
   missing before: without it the card's text painted straight over the control rows. */
.controls { padding: 6px 16px 8px; flex: 0 1 auto; overflow-y: auto; }
/* Six groups can be open at once here where the monitor opened four, so the rows are
   tighter at every width, not only on a short window. */
.ctl-group { padding: 4px 0 3px; border-bottom: 1px solid var(--line-soft); }
.ctl-group:last-child { border-bottom: 0; }
.ctl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
kbd { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; }
.ctl-row { display: flex; align-items: center; gap: 10px; min-height: 23px; font-size: 12px; color: var(--ink); }
.ctl-row[hidden] { display: none; } /* a flex row of its own would defeat the attribute: a row a picture does not own is hidden */
.ctl-row > span:first-child { flex: 0 0 76px; color: var(--ink-soft); }
.ctl-row input[type='range'] { flex: 1; min-width: 0; } /* a flex item's automatic minimum held the slider at its intrinsic 129 px and pushed the readout past the panel edge */
.ctl-row output { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); width: 42px; text-align: right; white-space: nowrap; }
#bounces-out { flex: 0 0 auto; width: auto; min-width: 42px; } /* "the original" at nought bounces is a word, not a number: the fixed width clipped it at the inspector edge */
input[type='range'] { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; margin: 0; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 1px; }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cobalt); margin-top: -5px; border: 2px solid var(--card-solid); box-shadow: 0 0 0 1px var(--cobalt); }
.toggle { position: relative; width: 32px; height: 18px; border-radius: 9px; border: 1px solid var(--line); background: var(--line-soft); cursor: pointer; padding: 0; margin-left: auto; transition: background 200ms var(--easing); }
.toggle i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--card-solid); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 200ms var(--easing); }
.toggle.on { background: var(--cobalt); border-color: var(--cobalt); }
.toggle.on i { transform: translateX(14px); }
#power-label { flex: 0 0 auto; white-space: nowrap; }
#solo-row { flex-wrap: wrap; row-gap: 6px; }
#solo-row > span:first-child { flex: 0 0 auto; }
#solo button { padding: 3px 6px; }
.mini-seg { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 6px; padding: 2px; gap: 2px; }
.mini-seg button { border: 0; background: transparent; border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.mini-seg button.on { background: var(--ink); color: var(--card-solid); }
.ctl-row.is-off { opacity: 0.45; }
.ctl-row.is-off .mini-seg button { cursor: not-allowed; }
[data-backdrop='dark'] .mini-seg button.on { background: var(--cobalt); color: #0e1020; }

/* right rail of small actions */
.rail { position: absolute; right: calc(28px + var(--insp-w) + 12px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rail-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(8px); border-radius: 6px; padding: 7px 9px; cursor: pointer; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.rail-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.rail-btn.primary { color: var(--cobalt); border-color: var(--cobalt); }

/* caption */
.caption-row {
  position: absolute; left: 50%; bottom: calc(var(--strip-h) + var(--hint-h) + 22px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; pointer-events: none; max-width: 760px; width: max-content;
}
.caption { margin: 0; max-width: 520px; text-align: center; color: var(--ink-soft); font-size: 13px; transition: opacity 300ms var(--easing); }
.next { pointer-events: auto; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(8px); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--cobalt); cursor: pointer; white-space: nowrap; }
.next:hover { border-color: var(--cobalt); }
.caption b { color: var(--ink); }

/* instrument strip */
.strip {
  position: absolute; left: 28px; right: 28px; bottom: var(--hint-h); height: var(--strip-h);
  display: grid; grid-template-columns: 205px 150px 214px 1fr 290px 150px; align-items: center;
  background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 18px;
}
/* the workshops host's member return rail sits in the bottom-left corner (a tucked
   tab about 60 px wide): when it is on the page the strip starts to its right and
   the readouts column gives up the room */
.app[data-rail="1"] .strip { left: 96px; }
.strip-cell { display: flex; align-items: center; gap: 12px; min-width: 0; height: 60px; padding-right: 16px; border-right: 1px solid var(--line-soft); }
.strip-cell + .strip-cell { padding-left: 16px; }
.strip-cell:last-child { border-right: 0; padding-right: 0; }
.strip-cell > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.strip-cell b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-cell small { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.04em; }
.fire-cell b { white-space: normal; overflow: visible; line-height: 1.2; }
.fire { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); color: var(--card-solid); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform 120ms var(--easing), background 200ms; }
.fire:hover { transform: scale(1.06); }
.fire.is-playing { background: var(--cobalt); border-color: var(--cobalt); }
.fire .ico-stop { display: none; }
.fire.is-playing .ico-play { display: none; }
.fire.is-playing .ico-stop { display: block; }
[data-backdrop='dark'] .fire { background: var(--cobalt); border-color: var(--cobalt); color: #0e1020; }
.param-cell { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
/* The Tape speed cell is three tight rows inside the strip's own height: the eyebrow, the
   machine's speeds in ONE horizontal row however many it has, and the vari-speed trim under
   them. `.strip-cell > div` makes every div child a column, which stood the speed pills on
   end and pushed the eyebrow above the strip's top border, so the segment says `row` here. */
.speed-cell { height: auto; align-self: center; gap: 3px; }
.speed-cell > .eyebrow { line-height: 1; }
.speed-cell .mini-seg { margin-left: 0; flex-direction: row; flex-wrap: nowrap; padding: 1px; gap: 1px; border-radius: 5px; }
.speed-cell .mini-seg button { padding: 1px 6px; font-size: 10.5px; line-height: 1.55; font-family: var(--mono); }
.speed-cell .mini-seg button:disabled { cursor: default; opacity: 0.75; }
.speed-cell .param.trim { flex-direction: row; width: 100%; gap: 6px; }
.speed-cell .param.trim input { flex: 1; min-width: 54px; }
.param.trim { gap: 6px; }
.param.trim output { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); white-space: nowrap; letter-spacing: 0.02em; }
.param { display: flex; align-items: center; gap: 8px; width: 100%; }
.param input { flex: 1; }
.param b { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.readouts { justify-content: space-around; gap: 18px; }
.readouts > div { align-items: flex-start; }
.readouts b { font-family: var(--mono); font-weight: 500; font-size: 17px; }
.scope-cell { position: relative; }
#scope { width: 260px; height: 56px; display: block; border-radius: 4px; background: var(--line-soft); }
.scope-key { position: absolute; right: 22px; top: 4px; font-size: 9px; }
.scale-cell { color: var(--ink-soft); gap: 8px; }
.scale-cell small { white-space: nowrap; line-height: 1.25; }
#scale-text i { display: block; font-style: normal; opacity: 0.72; letter-spacing: 0.1em; }
.hints { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hint-h); margin: 0; display: flex; justify-content: center; align-items: center; gap: 22px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); pointer-events: none; }

/* about card */
.about { position: absolute; right: 28px; top: 62px; width: 320px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(20, 30, 50, 0.12); z-index: 5; }
.about { max-height: calc(100vh - 120px); overflow-y: auto; }
.about p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-soft); }
.about .flags { margin: 0 0 10px; padding-left: 18px; font-size: 11.5px; color: var(--ink-soft); }
.about .flags li { margin-bottom: 5px; line-height: 1.45; }
.about .close { position: absolute; right: 10px; top: 10px; font-style: normal; font-family: var(--sans); }

/* short windows: pull the composition in */
@media (max-height: 780px) {
  :root { --strip-h: 82px; --hint-h: 22px; }
  .intro { top: 68px; width: 260px; }
  .intro h1 { font-size: 36px; margin: 6px 0 8px; }
  .lede { font-size: 12px; }
  .tree { top: 196px; }
  .inspector { top: 128px; }
  .perspective { top: 68px; gap: 4px; }
  .segment button { padding: 5px 12px; }
  .caption { font-size: 12px; }
  /* the floor holds the eyebrow, the title, a line of the overview and the More below pill,
     and no more: the control groups take the rest, and every one of them is on screen */
  #inspector .body-wrap { min-height: 98px; }
  .inspector-body { min-height: 0; padding: 10px 16px 22px; }
  .controls { padding: 4px 16px 8px; }
  .ctl-group { padding: 5px 0 3px; }
  .ctl-head { margin-bottom: 2px; }
  /* Six control groups can be open at once on this page, two more than the monitor, so the
     rows give up their slack and the whole set still fits the card without scrolling. */
  .ctl-group { padding: 2px 0 1px; }
  .ctl-head { margin-bottom: 1px; }
  .ctl-row { min-height: 21px; }
  .ctl-row > span:first-child { flex: 0 0 84px; font-size: 11.5px; }
  .mini-seg button { padding: 1px 6px; font-size: 10.5px; }
  /* the Format row carries the machine's own words, and a machine with long ones ("Stereo,
     half track") would otherwise wrap the segment onto a second line and push a control
     group below the fold */
  #format button { padding: 1px 3px; font-size: 9.5px; letter-spacing: -0.02em; }
}
@media (max-width: 1330px) {
  /* the inspector takes fourteen pixels more than the monitor's: this page's control rows
     carry longer names ("Noise reduction", "Tape and tracks") and a wrapped label costs a
     whole row of height, which is worth more than fourteen pixels of stage */
  :root { --panel-w: 210px; --insp-w: 282px; }
  /* the scope column holds its 200 px canvas and both paddings; the badge column holds
     a three-number size at its widest ("196 x 309 x 291 mm") with room to spare, and
     takes that room from the level slider, which has it going spare */
  /* every column sized to what its cell actually needs with the host's return rail in
     place, which takes 68 px off the strip's left: measured, not guessed. */
  .strip { grid-template-columns: 170px 132px 194px 1fr 224px 142px; }
  /* the strip's own eyebrows give up their letter-spacing before a cell overflows */
  .strip-cell .eyebrow { letter-spacing: 0.05em; }
  .speed-cell .param.trim output { font-size: 9px; letter-spacing: 0; }
  #scope { width: 200px; }
  .scale-cell small { letter-spacing: 0.02em; }
  .readouts { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

[data-notransition] * { transition: none !important; }

.label-scope { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px 7px; cursor: default; }
/* 120: narrow enough that the chip clears the subject in either gutter, at 1280 as well */
.label-scope canvas { width: 100px; height: 40px; display: block; border-radius: 3px; background: var(--line-soft); }
.label-scope .label-text { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.label-scope .label-value { font-family: var(--mono); font-size: 12px; color: var(--cobalt); }
.label-scope .label-value.idle { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
.label-source { border-color: var(--cobalt); pointer-events: none; }
.label-source .label-text { font-weight: 500; font-size: 12px; }
.chip-generations canvas { width: 276px; height: 138px; }
.chip-chain canvas { width: 400px; height: 130px; }
.chip-graph .label-value { white-space: normal; line-height: 1.3; }
.chip-generations .label-value { max-width: 276px; }
.chip-chain .label-value { max-width: 400px; }
/* The Signal picture's graph is the one that shares its stage with eleven labels, so it is the
   one that gives room on a narrow window. Its backing store halves with it in `sizeChainCanvas`,
   so the type it draws lands at the size the Generations graph's does. This block sits after the
   rules it narrows: the media block higher up runs before them and would lose. */
@media (max-width: 1330px) {
  .chip-chain canvas { width: 320px; height: 104px; }
  .chip-chain .label-value { max-width: 320px; }
}

:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.nogl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 40px; color: var(--ink-soft); font-size: 14px; }