/*
 * OAR Convert, dressed in the register's own materials.
 *
 * tokens.css and base.css are the system; this file only adds what a
 * converter needs that a marketing page did not. Nothing here invents a
 * colour, a radius or a typeface -- the register is measurement
 * equipment, and a tool that reads its numbers should look like one.
 *
 * Two accents, meeting at hard edges as the system requires: cyan owns
 * everything that INSPECTS (what the file is, what came out), amber
 * owns the one control that DOES something. A reader can find the verb.
 *
 * The alpha triplets below are space-separated on purpose. The system's
 * `--cyan-rgb: 77, 216, 230` is the comma form, and `rgb(var(--x) / a)`
 * is not valid CSS with commas -- it parses to nothing and the rule is
 * dropped in silence. Same colours, stated so they can carry alpha.
 */
:root{
  --cyan-a: 77 216 230;
  --amber-a: 255 158 61;
  --red-a: 232 90 90;
}

body{ padding:0; }
.wrap{ max-width:940px; margin:0 auto; padding:var(--s5) var(--s3) var(--s7); }

header{ margin-bottom:var(--s4); }
h1{
  font-family:var(--display); font-size:var(--t-display-3);
  font-weight:500; letter-spacing:-0.01em; margin:0 0 var(--s1);
}
h1 .mark{ color:var(--cyan); }
.lede{ color:var(--text-dim); font-size:var(--t-small); max-width:var(--measure); }
/* The spec strip: `.chip` from the control surface, in a row.

   Capability stated as a back panel states it -- short, upper case,
   boxed -- rather than as prose a reader has to get through. The lead
   chip is lit, because what the tool renders WITH is the one item on
   the strip that is not obvious from using it. */
.spec{
  display:flex; flex-wrap:wrap; gap:5px; margin:var(--s2) 0 0; padding:0;
  list-style:none;
}
.spec li{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-dim);
  padding:4px 8px; border:1px solid var(--hairline); border-radius:2px;
}
.spec li b{ font-weight:500; color:var(--text); }
.spec-lead{
  color:rgb(var(--cyan-rgb)) !important;
  border-color:rgb(var(--cyan-a) / 45%) !important;
  box-shadow:inset 0 0 10px rgb(var(--cyan-a) / 14%);
}
.spec-lead b{ color:rgb(var(--cyan-rgb)) !important; text-shadow:0 0 8px rgb(var(--cyan-a) / 60%); }
.claim{
  margin:var(--s2) 0 0; max-width:var(--measure);
  font-size:var(--t-small); color:var(--text-dim);
}
.claim b{ color:var(--text); font-weight:500; }

.privacy{
  display:inline-flex; align-items:center; gap:var(--s1);
  margin-top:var(--s2); padding:6px 12px;
  border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--panel);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 6%), 0 1px 0 var(--below);
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:0.06em;
  color:var(--text-dim);
}
.privacy b{ color:var(--cyan); font-weight:500; }
/* A real indicator, not a bullet: it states that the claim is live. */
/* An emitter, driven by the system's own layer rather than a hand-rolled
   shadow: `.lit` makes the surface emissive, `.glow` throws the halo. */
.led{
  width:7px; height:7px; border-radius:50%;
  --glow:var(--cyan-rgb); --lvl:0.85; --bloom:0.5;
}

/* Steps are genuinely sequential -- a target cannot be chosen before the
   input is known -- so numbering them states something true. */
.step{
  --accent:var(--cyan); --accent-a:var(--cyan-a);
  background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--radius); margin-top:var(--s2); overflow:hidden;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 6%), 0 1px 0 var(--below);
}
#step3{ --accent:var(--amber); --accent-a:var(--amber-a); }
.step[aria-disabled="true"]{ opacity:0.38; }
.step-head{
  display:flex; align-items:center; gap:var(--s2);
  padding:10px var(--s2); border-bottom:1px solid var(--hairline);
  background:var(--raised);
}
.step-num{
  font-family:var(--mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:0.14em; color:var(--accent);
}
.step-title{
  font-family:var(--mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text);
}
.step-note{
  margin-left:auto; font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:0.06em; color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.step-body{ padding:var(--s2); }

#drop{
  border:1px dashed var(--hairline); border-radius:var(--radius);
  background:var(--below); padding:var(--s4) var(--s2); text-align:center;
  cursor:pointer; transition:border-color var(--attack), background var(--attack);
}
#drop:hover, #drop.over{ border-color:var(--cyan); background:rgb(var(--cyan-a) / 0.05); }
#drop strong{ display:block; font-family:var(--display); font-weight:500; margin-bottom:4px; }
#drop span{ font-family:var(--mono); font-size:var(--t-label); color:var(--text-dim);
            letter-spacing:0.04em; }
#file{ display:none; }

/* Numerals are instrument readout: mono, tabular, never proportional. */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px; background:var(--hairline); border:1px solid var(--hairline);
  border-radius:var(--radius); overflow:hidden; margin:0;
}
.fact{ background:var(--below); padding:9px 11px; }
.fact dt{
  font-family:var(--mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 2px;
}
.fact dd{
  margin:0; font-family:var(--mono); font-size:var(--t-small);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1,'zero' 1;
  color:var(--text);
}

/* Silkscreen, as printed on a panel: small, wide-tracked, upper case.
   The surface's own `.legend`, which is also what the monitor already
   uses -- so labels above a chooser and labels above the transport are
   finally the same label. */
.field{
  display:block; font-family:var(--mono); font-size:var(--t-label);
  font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 6px;
}

/* --- the chooser: `.browser` / `.lcd` / `.stepper` -------------------

   From demos/control-surface/src/fx-panels/head.html:159, whose comment
   states the position plainly: the patch browser reads like a hardware
   display, not a <select>. An inset LCD carries the current value, lit
   in cyan, with chevron steppers either side.

   The real <select> is still here and still the control: it lies
   transparent across the face, so pressing the LCD opens the platform's
   own list, the keyboard works, and a screen reader is handed a select
   rather than a pile of divs pretending to be one. The hardware is the
   presentation; the semantics underneath are unchanged. */
.browser{ display:flex; align-items:stretch; gap:6px; min-width:0; }
.lcd{
  position:relative; flex:1; min-width:0;
  background:#070b0e; border:1px solid #0c1116; border-radius:3px;
  padding:7px 11px; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
  box-shadow:inset 0 2px 7px #000;
  /* Tighter and deeper than the page default. These are the surface's
     own values: a small lit display sits close to the eye, so its raster
     should be visible as a raster -- the 3px/0.22 the wider page uses
     disappears at this size and the face just looks flat. */
  --scan-pitch:2px; --scan-depth:0.5;
}
.lcd-name{
  font-family:var(--mono); font-size:13px; letter-spacing:0.06em;
  color:rgb(var(--cyan-rgb)); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; text-shadow:0 0 11px rgb(var(--cyan-rgb) / 0.55);
}
.lcd-meta{
  font-family:var(--mono); font-size:9px; letter-spacing:0.15em;
  text-transform:uppercase; color:#4e5b68; white-space:nowrap; flex:none;
}
/* The control itself, invisible over its own display. */
.lcd select{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; font-size:16px;
}
.browser:focus-within .lcd{ border-color:rgb(var(--cyan-rgb) / 45%); }
.lcd:hover{ border-color:rgb(var(--cyan-rgb) / 0.3); }
.stepper{
  font-family:var(--mono); font-size:13px; color:#6d707a;
  background:#0f141a; border:1px solid #1e262f; border-radius:3px;
  width:30px; flex:none; cursor:pointer; display:grid; place-items:center;
}
.stepper:hover:not(:disabled){ color:rgb(var(--cyan-rgb)); border-color:rgb(var(--cyan-rgb) / 0.4); }
.stepper:disabled{ opacity:0.3; cursor:default; }
.browser[data-disabled='true']{ opacity:0.45; pointer-events:none; }

button:focus-visible, #drop:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* --- options are keys, not a list ----------------------------------

   Anything with few enough choices to show them all gets one key per
   choice, because a key states what the alternatives ARE. A dropdown
   hides them behind the one already picked, which on a control surface
   is the wrong way round: the panel should read as the instrument's
   capabilities, not as its current setting. */
.opts{ display:flex; gap:4px; flex-wrap:wrap; }
.opts .tgl{ flex:1 1 auto; }
.tgl{
  position:relative;
  font-family:var(--mono); font-size:9px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-dim);
  background:var(--raised); border:1px solid var(--hairline);
  border-radius:2px; padding:6px 9px; cursor:pointer; line-height:1;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 5%);
  transition:color var(--attack), border-color var(--attack), box-shadow var(--attack);
}
.tgl:hover{ color:var(--text); }
.tgl:focus-visible{ outline:2px solid rgb(var(--tok)); outline-offset:2px; }
.tgl[aria-pressed='true'], .tgl[aria-selected='true'], .tgl[aria-checked='true']{
  color:rgb(var(--tok));
  border-color:rgb(var(--tok) / 45%);
  box-shadow:inset 0 0 10px rgb(var(--tok) / 18%);
  text-shadow:0 0 8px rgb(var(--tok) / 70%);
}
/* A chosen key may carry a second line saying what it means. It is the
   key's, so it lights with it rather than staying grey beside it. */
.tgl small{
  display:block; margin-top:3px; font-size:8.5px; letter-spacing:0.06em;
  color:var(--text-faint, #6d707a); text-transform:none; text-shadow:none;
}
.tgl[aria-selected='true'] small, .tgl[aria-checked='true'] small{
  color:rgb(var(--tok) / 0.75);
}

.tabs{ display:flex; gap:4px; margin-bottom:var(--s2); }
.tabs .tgl{ flex:1; padding:9px 10px; }

.cols{ display:grid; grid-template-columns:1fr 340px; gap:var(--s2); align-items:start; }
@media (max-width:700px){ .cols{ grid-template-columns:1fr; } }
/* The plot is an LED panel, so it is built like one: the bloom filter
   lands on the canvas, and the scanline grid rides ABOVE it on the
   wrapper -- putting the grid inside the glow would blur the one detail
   that reads as "panel" rather than "neon". */
.plot-stack{
  position:relative; border:1px solid var(--hairline);
  border-radius:var(--radius); background:var(--below);
  overflow:hidden; line-height:0; aspect-ratio:1;
}
.plot-stack canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* Only this layer emits. The grid above it stays metal. */
#plotLeds{ --bloom:0.5; }
.plot-note{
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:0.08em;
  color:var(--text-dim); text-align:center; margin-top:6px;
  font-variant-numeric:tabular-nums;
}

/* The one key that commits. Same lamp law as the transport -- matte
   until it is doing something, then lit from under the face -- just
   larger, because it is the action the whole panel leads to. It was a
   permanently filled amber box, which is the same mistake the transport
   carried: a control that is always on cannot report that it is on, and
   here it also drowned out every chooser above it. */
button.go{
  width:100%; margin-top:var(--s2); padding:13px;
  border:1px solid var(--hairline); border-radius:2px;
  background:var(--raised); color:var(--text);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 5%);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; cursor:pointer;
  transition:color var(--attack), border-color var(--attack), box-shadow var(--attack);
}
button.go:hover:not(:disabled){
  color:rgb(var(--amber-rgb)); border-color:rgb(var(--amber-rgb) / 45%);
}
button.go:active:not(:disabled), button.go[data-busy]{
  color:rgb(var(--amber-rgb));
  border-color:rgb(var(--amber-rgb) / 45%);
  box-shadow:inset 0 0 14px rgb(var(--amber-rgb) / 20%);
  text-shadow:0 0 8px rgb(var(--amber-rgb) / 70%);
}
button.go:disabled{ opacity:0.35; cursor:not-allowed; }
a.dl{
  display:inline-block; padding:10px 18px; text-decoration:none;
  border:1px solid var(--cyan); border-radius:var(--radius);
  background:rgb(var(--cyan-a) / 0.1); color:var(--cyan);
  font-family:var(--display); font-size:var(--t-small); font-weight:500;
}
a.dl:hover{ background:rgb(var(--cyan-a) / 0.2); }
/* A streamed render is already on disk. Saying so beats offering a
   second copy of a file the reader has. */
.saved{
  margin:0; font-family:var(--mono); font-size:var(--t-small);
  color:var(--cyan); letter-spacing:0.03em;
}

.msg{
  margin-top:var(--s2); padding:10px 12px; border-radius:var(--radius);
  border:1px solid var(--hairline); background:var(--below);
  font-family:var(--mono); font-size:var(--t-label); line-height:1.7;
  letter-spacing:0.03em; color:var(--text-dim);
}
.msg.bad{ border-color:rgb(var(--red-a) / 0.6); color:#e85a5a; }
.msg.good{ border-color:rgb(var(--cyan-a) / 0.45); color:var(--cyan); }

footer{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--hairline);
  font-family:var(--mono); font-size:var(--t-label); line-height:1.9;
  letter-spacing:0.03em; color:var(--text-dim);
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ------------------------------------------------------------------
   The reference below the tool.

   This is the half of the page a search engine reads, and the half a
   reader lands on when they searched for "7.1.4 to binaural" rather
   than for this page. It is set as documentation, not as marketing:
   measure held near 62ch, tables that scroll inside themselves rather
   than pushing the page sideways.
------------------------------------------------------------------ */
.eyebrow{
  font-family:var(--mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim);
  margin:0 0 var(--s1);
}
.eyebrow .mark{ color:var(--cyan); }
.nowrap{ white-space:nowrap; }

.prose{ margin-top:var(--s6); max-width:var(--measure); }
.prose h2{
  font-family:var(--display); font-size:var(--t-display-3); font-weight:500;
  letter-spacing:-0.01em; margin:var(--s5) 0 var(--s2);
  padding-top:var(--s3); border-top:1px solid var(--hairline);
  scroll-margin-top:var(--s3);
}
.prose p{ color:var(--text-dim); margin:0 0 var(--s2); }
.prose b{ color:var(--text); font-weight:500; }

.faq{ margin:0; }
.faq dt{
  font-family:var(--display); font-weight:500; color:var(--text);
  margin-top:var(--s3);
}
.faq dd{ margin:var(--s1) 0 0; color:var(--text-dim); }

/* Wide content scrolls inside its own container; the page body never
   scrolls sideways. */
.table-scroll{
  overflow-x:auto; border:1px solid var(--hairline);
  border-radius:var(--radius); background:var(--below);
  /* The table is wider than the measure, so it is allowed to be. */
  max-width:none; width:min(100%, 940px);
}
.layouts{
  border-collapse:collapse; width:100%; font-size:var(--t-small);
}
.layouts caption{
  text-align:left; padding:10px 12px;
  font-family:var(--mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan);
  border-bottom:1px solid var(--hairline);
}
.layouts th, .layouts td{
  padding:7px 12px; text-align:left; border-bottom:1px solid var(--hairline-soft);
  font-family:var(--mono); white-space:nowrap; color:var(--text-dim);
}
.layouts thead th{
  font-size:var(--t-label); font-weight:500; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-dim);
  border-bottom:1px solid var(--hairline);
}
.layouts tbody th{ color:var(--text); font-weight:500; }
.layouts .num{ text-align:right; font-variant-numeric:tabular-nums; }
.layouts .labels{ white-space:normal; font-size:var(--t-label); color:var(--text-dim); }
.layouts tbody tr:target th{ color:var(--cyan); }


/* ------------------------------------------------------------------
   The monitor.

   Ported from the register's own controls rather than invented: the
   seven-segment face is `Timecode`, the segment ladder is
   `SpectralBalance`. Both are LED material, so both get `.glow` on the
   container and `.scan` over the panel -- the grid stays sharp and only
   the emitters bloom, which is the difference between a panel and a
   neon sign.

   The ladder is driven by an AnalyserNode on the actual playback, so it
   is a measurement rather than an animation of one.
------------------------------------------------------------------ */
.player{
  margin:var(--s2) 0 0; padding:var(--s2);
  background:linear-gradient(180deg, var(--panel), #101216);
  border:1px solid var(--hairline); border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 6%), 0 1px 0 var(--below);
}
.player-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--hairline-soft);
}
.player-head .legend{ color:var(--amber); margin:0; }
.control-hint{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
               color:#6d707a; margin:0; }
/* Top-aligned, not centred. The transport keys are taller than they
   look because each carries a caption under it, so centring hung the
   timecode and the meters off the middle of button-plus-caption and
   nothing on the row lined up with anything. Aligning to the top puts
   every face's top edge on the same line as the keys' -- which is how
   they sit on a real panel, screwed to a common rail. */
.player-row{ display:flex; align-items:flex-start; gap:var(--s2); }
.player-note{ margin:12px 0 0; font-family:var(--mono); font-size:10.5px;
              line-height:1.5; color:var(--text-dim); }

/* --- transport: `.tp` / `.tp-btn` / `.tp-icon` / `.tp-lamp` ---------

   The register has a transport component and this is it, ported whole
   from demos/control-surface/src/led-controls/prelude.html:606. Three
   things about it that a generic key does not have, and that I had been
   approximating badly:

   The icon is a SHAPE, not a character. A 14px block clipped to a
   triangle or a square, so it is the same weight and the same optical
   size whichever key it is on -- where ▶ and ■ come from different
   parts of a font and never match.

   The state is on the LAMP, a 16x2 strip above the icon, not on the
   button. So the icon never has to change to report anything: PLAY
   stays a triangle whether it is playing or not, and it is the lamp
   that tells you. Swapping a glyph to a pause bar was me putting the
   state where this component does not keep it.

   And STOP is LATCHED, not momentary -- lit for as long as the
   transport is stopped, because being stopped is a state a panel should
   report, not an event that flashes past.

   Pressing is a physical event: the face takes an inset shadow, as
   though it moved. */
.tp{ display:flex; gap:var(--s2); align-items:flex-start; }
.tp-slot{ display:flex; flex-direction:column; align-items:center; flex:none; }
.tp-btn{
  position:relative; width:58px; height:46px; padding:0; cursor:pointer;
  background:var(--raised); border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 6%), 0 1px 0 var(--below);
  display:grid; place-items:center; transition:background var(--release);
}
.tp-btn:hover{ background:#23262d; }
.tp-btn:active{ box-shadow:inset 0 2px 4px rgb(0 0 0 / 50%); }
.tp-btn:focus-visible{ outline:2px solid rgb(var(--cyan-rgb)); outline-offset:2px; }
.tp-icon{ width:14px; height:14px; background:var(--text-dim); }
.i-play{ clip-path:polygon(0 0, 100% 50%, 0 100%); }
.i-stop{ clip-path:inset(0); }
.tp-lamp{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:16px; height:2px; border-radius:1px; background:#16191e;
}
.tp-cap{
  font-family:var(--mono); font-size:9px; color:var(--text-dim);
  letter-spacing:0.1em; text-align:center; margin-top:5px;
}

/* --- the face, verbatim from Timecode --- */
.tc-face{
  padding:10px 12px; background:var(--below);
  border:1px solid var(--hairline-soft); border-radius:3px;
  color:var(--amber);
  /* A screen inside a panel, and the panel is rastered too. At the same
     pitch the two would beat against each other; at the display's own
     tighter pitch they read as what they are -- a lit face set into a
     surface. Same values as the LCDs, because it is the same kind of
     thing. */
  --scan-pitch:2px; --scan-depth:0.5;
}

/* --- the positioner: FixtureGrid's track, filled with the ladder's LEDs ---

   The register has both halves of this already and neither on its own:
   `dx-track` is horizontal and draggable but takes a continuous fill,
   and `sb-leds` is segmented but runs vertically. So the frame, the
   cursor and the focus ring are the grand master's, and what sits
   inside is the ladder's segment vocabulary turned row-wise -- no
   bevel, no border, radius never above 2px. The two then read as parts
   from one rack rather than as two designers' work.

   The bar is absolute, following `slider()`: a segment's position IS
   its position in the file, which is what makes it aimable. */
.pos{
  margin-top:12px; padding:5px 6px; background:var(--below);
  border:1px solid var(--hairline-soft); border-radius:2px;
  cursor:ew-resize; touch-action:none;
}
.pos:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
/* 3px, where the ladder uses 1. The ladder's rungs are 3px tall and sit
   in a 52px column, so a 1px gap is a third of a rung; these are 10px
   wide, and the same 1px would be a tenth -- proportionally invisible
   once anything blooms across it. The gap has to scale with the lamp,
   not be inherited as a number. */
.pos-leds{ display:flex; flex-direction:row; align-items:stretch; gap:3px; height:20px; }
.pos-seg{ display:block; flex:1 1 0; min-width:0; border-radius:1px; }
/* Scoped to the OFF state for the same reason the ladder is: `.lit` and
   `.pos-seg` carry equal specificity, so a blanket background here would
   win on source order and grey out every lit segment. Brighter than the
   ladder's 0.2 because an unlit stretch here still has to read as the
   rest of the file waiting, rather than as empty panel. */
.pos-seg[data-on='false']{ background:var(--hairline); opacity:0.3; }
.pos-seg[data-on='true']{ opacity:1; }
/* The playhead. Elapsed is amber and the head is cyan, which is the
   pairing the rest of the register uses for body against detail -- and
   it means the exact frame you are on is findable at a glance on a bar
   that is otherwise one colour. */
.pos-seg[data-head='true']{ opacity:1; }
.pos:hover .pos-seg[data-on='false']{ opacity:0.26; }

@media (prefers-reduced-motion: no-preference){
  .pos-seg{ transition:opacity 90ms linear; }
}
.tc-glow{ display:flex; align-items:center; gap:7px; }
.digit{ position:relative; width:18px; height:32px; }
.digit i{
  position:absolute; background:currentColor; border-radius:1px;
  /* The ghost of an unlit segment. This is the detail that reads as a
     real display rather than as text in a mono font. */
  opacity:0.055;
}
.digit i.on{ opacity:1; }
.digit i.a{ left:4px; right:4px; top:0; height:3px; }
.digit i.g{ left:4px; right:4px; top:14.5px; height:3px; }
.digit i.d{ left:4px; right:4px; bottom:0; height:3px; }
.digit i.f{ left:0; top:3px; width:3px; height:12px; }
.digit i.b{ right:0; top:3px; width:3px; height:12px; }
.digit i.e{ left:0; bottom:3px; width:3px; height:12px; }
.digit i.c{ right:0; bottom:3px; width:3px; height:12px; }
.colon{ display:flex; flex-direction:column; gap:9px; padding:0 1px; }
.colon i{ width:3px; height:3px; border-radius:1px; background:currentColor; opacity:0.85; }
.tc-field{ display:flex; gap:2px; }

/* --- the ladder, from SpectralBalance --- */
.meter{ display:flex; gap:6px; margin-left:auto; }
.meter-col{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.meter-track{
  width:16px; height:52px; padding:2px; border-radius:2px;
  background:var(--below); border:1px solid var(--hairline-soft);
}
.sb-leds{ display:flex; flex-direction:column; justify-content:space-between;
          height:100%; gap:1px; }
/* LEDs: no bevel, no border, radius never above 2px. */
.sb-seg{ display:block; flex:1; border-radius:1px; }
/* Scoped to the OFF state deliberately: `.lit` and `.sb-seg` have equal
   specificity, so a blanket background here would win source order and
   silently grey out every lit segment. */
.sb-seg[data-on='false']{ background:var(--hairline); opacity:0.2; }
.sb-seg[data-on='true']{ opacity:1; }
.meter-name{ font-family:var(--mono); font-size:9px; letter-spacing:0.04em; color:#6d707a; }

@media (max-width:560px){
  .digit{ width:14px; height:25px; }
  .digit i.g{ top:11px; }
  .digit i.f,.digit i.b,.digit i.e,.digit i.c{ height:9px; }
  .tc-glow{ gap:5px; }
}