/* app.css: every screen of Instant ACX Ready v3 -- the welcome screen, the recording room, the
   editing room, and the sheets (room test, manuscript, save as, export, the cat).

   The look is the owner's Blue Hour (the Compositor design in Prototype, 9 November 2026),
   brought here on 12 November: the hour after sunset, when the sky is one deep blue gradient
   and the lamps come on. The page IS that sky. What acts, and the line being read, is lamplight:
   gold on blue. Titles are a cream old-style serif. Sound is drawn as a skyline on the horizon,
   with its reflection in the water under it.

   It keeps every rule of the suite's Light Table (Launch Command/suite-rules.md). Two rooms from
   one set of tokens -- Studio, the blue hour itself, and Daylight, the same sky by day (pale blue
   paper, navy ink) -- written once with light-dark() and chosen by color-scheme, so the lamp
   moves every colour at once. Separation is a change of surface and a low shadow, never a hard
   line. Beside the blue and the gold the colours are a mixed set, never a rainbow. Nothing fades
   in or out: a thing that appears is there at once. Motion is for things that move: the sound and
   the stars on the welcome screen, the words on the teleprompter, the voice along the foot of
   the stage, the playhead.

   EVERY colour is a token on :root. Nothing below it states one (a see-through tint of a colour
   is a token of its own), and the canvases (hero.mjs, ribbon.mjs, edit.mjs,
   welcome.mjs) read these same tokens, so both rooms are right everywhere. tests/test_look.py
   reads the tokens and fails if a pair the eye reads is under 4.5:1 in either room. */

:root {
  /* Daylight is the first value of every pair; Studio (the blue hour) the second. */

  /* The sky, top to foot: the one gradient every room lies under. */
  --sky-1: light-dark(#f2f6fc, #0f1829);
  --sky-2: light-dark(#e7edf8, #0a101c);
  --sky-3: light-dark(#dae3f2, #06090f);
  --hatch: light-dark(rgba(60, 90, 150, 0.035), rgba(190, 215, 255, 0.016));

  --stage: light-dark(#e3eaf5, #070b13);
  --bg: light-dark(#e9eef7, #080c15);
  --surface: light-dark(#f6f8fd, #0d1422);
  --surface-hi: light-dark(#fbfcfe, #121b2c);
  --surface-2: light-dark(#eaeff8, #141c2b);
  --surface-3: light-dark(#dce4f1, #1c2538);
  --float: light-dark(#fafbfe, #111a2a);
  --float-lo: light-dark(#f1f5fb, #0b111d);
  --bar-1: light-dark(#f8fafd, #0d1522);
  --bar-2: light-dark(#eef2f9, #090e18);
  --well: light-dark(#edf1f8, #0a0f19);
  --seg-1: light-dark(#fdfeff, #27324a);
  --seg-2: light-dark(#f2f5fb, #1b2438);
  /* glass: a card over the sky, with the sky showing through it */
  --glass-1: light-dark(rgba(252, 253, 255, 0.84), rgba(19, 28, 46, 0.8));
  --glass-2: light-dark(rgba(245, 248, 253, 0.9), rgba(11, 17, 29, 0.86));
  --line: light-dark(rgba(60, 90, 150, 0.17), rgba(170, 200, 255, 0.09));
  --line-strong: light-dark(rgba(60, 90, 150, 0.32), rgba(170, 200, 255, 0.18));
  --hilite: light-dark(rgba(255, 255, 255, 0.85), rgba(170, 200, 255, 0.09));
  --hilite-2: light-dark(rgba(255, 255, 255, 0.9), rgba(170, 200, 255, 0.14));

  --text: light-dark(#1d2841, #dde2ec);
  --text-2: light-dark(#37435f, #c5cddc);
  --muted: light-dark(#55607b, #9ba5b9);
  --faint: light-dark(#5b6681, #8f99ae);
  --title: light-dark(#152039, #f0e6d2);                /* the cream of a title */

  /* Lamplight. --accent is the gold as WORDS and LINES; the gold a button is made of is --gold-*. */
  --accent: light-dark(#7c5810, #e3be82);
  --accent-2: light-dark(#634509, #f2d7a4);
  --accent-ink: light-dark(#fdfbf5, #2c1f0a);
  --accent-soft: light-dark(rgba(124, 88, 16, 0.09), rgba(227, 190, 130, 0.1));
  --accent-wash: light-dark(rgba(124, 88, 16, 0.18), rgba(227, 190, 130, 0.22));
  --accent-line: light-dark(rgba(124, 88, 16, 0.4), rgba(227, 190, 130, 0.38));
  --gold-1: light-dark(#f1ca8c, #efc78c);
  --gold-2: light-dark(#dcab5f, #d7a861);
  --gold-ink: #2c1f0a;
  --gold-hilite: light-dark(rgba(255, 250, 235, 0.6), rgba(255, 248, 230, 0.42));
  --gold-glow: light-dark(rgba(200, 150, 60, 0.3), rgba(215, 168, 97, 0.24));
  --gold-hi: light-dark(#80590d, #f6dba6);              /* the headline's second line, top and foot */
  --gold-lo: light-dark(#684809, #d9ac64);
  /* The blue of the hour: the sound when it is clean, a selection, a glow. */
  --blue: light-dark(#2f5db2, #86a9ea);
  --blue-2: light-dark(#244b96, #b3caf6);
  --blue-deep: light-dark(#5d86d6, #3f66b6);
  --blue-soft: light-dark(rgba(47, 93, 178, 0.1), rgba(134, 169, 234, 0.12));
  --blue-line: light-dark(rgba(47, 93, 178, 0.36), rgba(134, 169, 234, 0.34));
  --glow-blue: light-dark(rgba(72, 116, 206, 0.16), rgba(80, 122, 200, 0.2));
  --glow-blue-2: light-dark(rgba(72, 116, 206, 0.09), rgba(54, 84, 150, 0.14));
  --glow-gold: light-dark(rgba(226, 170, 80, 0.16), rgba(236, 206, 152, 0.1));

  --ok: light-dark(#2f7a63, #6fae99);
  --ok-text: light-dark(#235e4c, #a2d2c2);
  --ok-soft: light-dark(rgba(47, 122, 99, 0.11), rgba(111, 174, 153, 0.14));
  --ok-line: light-dark(rgba(47, 122, 99, 0.38), rgba(111, 174, 153, 0.36));
  --warn: light-dark(#93581a, #e0a36c);
  --warn-text: light-dark(#75440f, #f1cba6);
  --warn-soft: light-dark(rgba(147, 88, 26, 0.11), rgba(224, 163, 108, 0.13));
  --warn-line: light-dark(rgba(147, 88, 26, 0.4), rgba(224, 163, 108, 0.4));
  --stop: light-dark(#ad473a, #dd8c7e);
  --stop-text: light-dark(#8e362b, #f2b7ac);
  --stop-soft: light-dark(rgba(173, 71, 58, 0.1), rgba(221, 140, 126, 0.13));
  --stop-line: light-dark(rgba(173, 71, 58, 0.42), rgba(221, 140, 126, 0.42));
  --info: light-dark(#345f9e, #8fb4e0);
  --info-soft: light-dark(rgba(52, 95, 158, 0.11), rgba(143, 180, 224, 0.13));
  --info-line: light-dark(rgba(52, 95, 158, 0.38), rgba(143, 180, 224, 0.36));
  --violet: light-dark(#6a559c, #b3a0d8);
  --violet-soft: light-dark(rgba(106, 85, 156, 0.12), rgba(179, 160, 216, 0.14));
  --teal: light-dark(#2c7873, #7fc0b6);
  --teal-soft: light-dark(rgba(44, 120, 115, 0.11), rgba(127, 192, 182, 0.13));
  --select: light-dark(#3862be, #7da2ea);
  --select-soft: light-dark(rgba(56, 98, 190, 0.2), rgba(125, 162, 234, 0.26));
  --thumb: light-dark(#c3cddf, #242e44);
  --thumb-hover: light-dark(#aebbd2, #33405c);
  --scrim: light-dark(rgba(40, 56, 92, 0.4), rgba(2, 4, 8, 0.68));
  /* light-dark() holds a COLOUR, never a shadow: the room moves the shadow's ink, the geometry
     stays outside (the suite learnt this the hard way; tests/test_look.py checks it). */
  --shadow-ink: light-dark(rgba(36, 56, 100, 0.22), rgba(0, 0, 0, 0.62));
  --lift-ink: light-dark(rgba(36, 56, 100, 0.13), rgba(0, 0, 0, 0.4));
  --shadow: 0 28px 80px var(--shadow-ink);
  --lift: 0 10px 28px var(--lift-ink);

  /* The recording light is the one loud thing on the page, on purpose. */
  --rec: light-dark(#cc382b, #ff6b5c);
  --rec-hi: light-dark(#e0655a, #ffa093);
  --rec-ink: light-dark(#fdf6f3, #2a0b07);
  --rec-halo: light-dark(rgba(204, 56, 43, 0.28), rgba(255, 107, 92, 0.36));
  --rec-soft: light-dark(rgba(204, 56, 43, 0.1), rgba(255, 107, 92, 0.14));
  /* The underline says what will happen to a finding. */
  --v-delete: light-dark(#b93a2e, #f08a7b);
  --v-review: light-dark(#96600a, #f2b05a);
  --v-keep: light-dark(#2a7a5e, #7fc7ac);
  /* The fill says what kind of finding it is: mixed colours, out of spectrum order. */
  --k-retake: light-dark(#9c3d58, #e9a3b6);
  --k-retake-soft: light-dark(rgba(156, 61, 88, 0.13), rgba(233, 163, 182, 0.17));
  --k-nonsense: light-dark(#6f559b, #b9a3da);
  --k-nonsense-soft: light-dark(rgba(111, 85, 155, 0.14), rgba(185, 163, 218, 0.18));
  --k-misread: light-dark(#8a5f0e, #e6c170);
  --k-misread-soft: light-dark(rgba(138, 95, 14, 0.14), rgba(230, 193, 112, 0.17));
  --k-missing: light-dark(#5d6b2a, #c0cb86);
  --k-missing-soft: light-dark(rgba(93, 107, 42, 0.15), rgba(192, 203, 134, 0.17));
  --k-silence: light-dark(#3a6b96, #93b7dc);
  --k-silence-soft: light-dark(rgba(58, 107, 150, 0.14), rgba(147, 183, 220, 0.17));
  --k-noise: light-dark(#a35a24, #e3a172);
  --k-noise-soft: light-dark(rgba(163, 90, 36, 0.14), rgba(227, 161, 114, 0.18));
  --k-roomtone: light-dark(#2f7a72, #86c2b8);
  --k-roomtone-soft: light-dark(rgba(47, 122, 114, 0.14), rgba(134, 194, 184, 0.17));
  /* The yellow highlighter that follows the voice in the editing room. */
  --hl: light-dark(rgba(245, 205, 60, 0.6), rgba(245, 212, 90, 0.34));
  --hl-edge: light-dark(rgba(180, 140, 10, 0.55), rgba(245, 212, 90, 0.6));

  /* The teleprompter is the Spotlight: a pool of lamplight on a dark stage, and only the line
     being read is fully lit. Every other line can still be read (4.5:1 or more). */
  --pool-gold: light-dark(rgba(255, 253, 244, 0.8), rgba(236, 206, 152, 0.095));
  --pool-blue: light-dark(rgba(250, 252, 255, 0.5), rgba(74, 110, 180, 0.11));
  --vignette: light-dark(rgba(150, 170, 205, 0.13), rgba(0, 1, 4, 0.6));
  --spot: light-dark(rgba(255, 255, 255, 0.78), rgba(126, 164, 236, 0.1));
  --spot-halo: light-dark(rgba(255, 255, 255, 0.7), rgba(96, 136, 214, 0.13));
  --read-glow: light-dark(rgba(255, 255, 255, 0), rgba(246, 226, 186, 0.26));
  --accent-read: light-dark(#73510d, #e3be82);          /* the gold as WORDS on the stage */
  --read-now: light-dark(#131b2f, #f7efde);
  --read-next: light-dark(#434f6a, #969eb0);
  --read-past: light-dark(#556079, #7e889e);

  /* Sound: raw is dusk-red and ragged, clean is the blue of the hour. */
  --wave-raw: light-dark(#b0563f, #cf8274);
  --wave-raw-2: light-dark(#9c3d58, #e9a3b6);
  --wave-clean: light-dark(#2f5db2, #9fbcf2);
  --wave-clean-2: light-dark(#5a80cc, #5f87d8);
  --wave-dust: light-dark(rgba(90, 104, 130, 0.45), rgba(190, 204, 230, 0.34));
  --horizon: light-dark(rgba(72, 116, 206, 0.2), rgba(80, 122, 200, 0.3));
  --afterglow: light-dark(rgba(226, 170, 80, 0.2), rgba(236, 196, 130, 0.17));
  --beam: light-dark(rgba(214, 160, 60, 0.13), rgba(236, 206, 152, 0.075));
  --star: light-dark(rgba(60, 90, 150, 0.36), rgba(214, 226, 250, 0.72));
  --star-2: light-dark(rgba(124, 88, 16, 0.34), rgba(240, 222, 180, 0.8));
  /* the glowing button's turning light: lamplight and sky, never a rainbow */
  --radiant-1: light-dark(#e9b458, #ffe0a2);
  --radiant-2: light-dark(#d39a3c, #e3be82);
  --radiant-3: light-dark(#7fa2e6, #a9c4f6);
  --radiant-4: light-dark(#4f7ad2, #5f87d8);
  /* Paper is paper: a manuscript page and the cat's card are the same cream in both rooms. */
  --paper: #f4eee0;
  --paper-2: #e9e1cf;
  --paper-ink: #2b251d;
  --paper-accent: #74500c;
  --paper-line: #cfc3a8;
  --cat-fur: #f3d9b1;
  --cat-fur-2: #e6bf8a;
  --cat-ear: #f0a6a0;
  --cat-ink: #5a4634;
  --cat-cheek: #f6b9ae;
  --cat-eye: #3b2e23;
  --cat-shine: #fffaf0;
  --cat-card: #f6f0e2;
  --cat-card-ink: #33291f;
  --cat-card-muted: #655646;

  --radius: 14px;
  --r-sm: 9px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --display: "Hoefler Text", "Iowan Old Style", "Baskerville", Georgia, serif;
  --read: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --top-h: 58px;
  color-scheme: light dark;
}

/* The lamp in the top bar. Setting color-scheme is the whole theme change. */
:root[data-room="daylight"] { color-scheme: light; }
:root[data-room="studio"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden;
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 9px),
    radial-gradient(80% 56% at 50% 0%, var(--glow-blue-2) 0%, transparent 72%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 100%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--select-soft); }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--muted); }
.spacer { flex: 1 1 auto; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }
kbd {
  display: inline-block; min-width: 22px; padding: 1px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 6px; font: 600 12px/18px var(--font); color: var(--text-2); text-align: center; background: var(--surface-2);
}
/* a thin rule with a small diamond on it: the Blue Hour's ornament */
.orn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 9px; }
.orn::before, .orn::after { content: ""; height: 1px; width: min(180px, 22vw); }
.orn::before { background: linear-gradient(90deg, transparent, var(--accent-line)); }
.orn::after { background: linear-gradient(90deg, var(--accent-line), transparent); }
.orn i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--accent); flex: none; }

/* ------------------------------------------------------------ buttons and small parts */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  font-weight: 600; font-size: 14.5px; white-space: nowrap; box-shadow: inset 0 1px 0 var(--hilite);
}
.btn:hover:not(:disabled) { border-color: var(--accent-line); color: var(--title); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { color: var(--muted); background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.btn.primary {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--gold-hilite), 0 2px 16px var(--gold-glow);
}
.btn.primary:hover:not(:disabled) { color: var(--gold-ink); border-color: transparent; filter: brightness(1.06); }
.btn.primary:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line); box-shadow: none; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line); }
.btn.small { min-height: 31px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn.big { min-height: 50px; padding: 0 24px; font-size: 16px; border-radius: 11px; }
.btn svg { width: 17px; height: 17px; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
}
.chip.ok { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); }
.chip.bad { background: var(--stop-soft); color: var(--stop-text); border-color: var(--stop-line); }
.chip.warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); }
.inp, select.inp {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--well); color: var(--text); font-size: 15px;
}
.inp::placeholder { color: var(--muted); }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field { display: grid; gap: 7px; }
/* a label is a small gold line of capitals, as on the Blue Hour's sheets */
.field > span { font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14.5px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i {
  width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-strong);
  position: relative; flex: none;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .16s var(--ease);
}
.switch input:checked + i { background: var(--accent-wash); border-color: var(--accent-line); }
.switch input:checked + i::after { transform: translateX(18px); background: var(--accent); box-shadow: 0 0 10px var(--gold-glow); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + i { opacity: 1; background: var(--surface-2); }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); gap: 2px; }
.seg button {
  border: 0; background: transparent; padding: 7px 18px; border-radius: 7px; font-weight: 500; font-size: 13.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.seg button:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--text); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--seg-1), var(--seg-2)); color: var(--title); font-weight: 600;
  box-shadow: inset 0 1px 0 var(--hilite-2), 0 2px 8px var(--lift-ink);
}
.seg button:disabled { color: var(--faint); }

/* ------------------------------------------------------------ the top bar */
.top {
  min-height: var(--top-h); min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: linear-gradient(180deg, var(--bar-1), var(--bar-2)); border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--hilite); position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 11px; border: 0; background: none; padding: 4px 9px 4px 4px; border-radius: 9px; color: var(--title); }
.brand:hover { background: var(--surface-2); }
.brand img { width: 30px; height: 30px; display: block; }
.brand span { font: 400 22px/1 var(--display); letter-spacing: .1px; padding-top: 2px; }
.brand small { font: 600 12px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); padding-top: 4px; }
.file { display: flex; align-items: baseline; gap: 12px; min-width: 0; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; padding: 5px 11px; border-radius: 9px; cursor: pointer; }
.file:hover { background: var(--surface-2); border-color: var(--line); }
/* the name may be long: it gives way (with …) and the rest of the bar keeps its shape */
.file { flex: 0 1 auto; }
.top .brand, .top .seg, .top .reclamp, .top .lamp, .top #exportBtn { flex: none; }
.top .brand span, .top .seg button, .top .reclamp { white-space: nowrap; }
.file i { align-self: center; display: inline-flex; color: var(--muted); }
.file i svg { width: 14px; height: 14px; }
.file.saved span { color: var(--ok-text); }
.file.changed span { color: var(--warn-text); }
#msFolder { margin: -2px 0 2px; }
#saveSheet .field { margin-top: 14px; }
#saveSheet .ms-path { margin-top: 14px; }
.file b { font: 400 20px/1.25 var(--display); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; flex: none; }
.file span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.lamp {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); box-shadow: inset 0 1px 0 var(--hilite);
}
.lamp:hover { color: var(--accent); border-color: var(--accent-line); }
.lamp svg { width: 18px; height: 18px; }
#exportBtn { min-height: 36px; padding: 0 24px; }
.reclamp {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 11px; border-radius: 999px; font-weight: 600; font-size: 12.5px;
  letter-spacing: .14em; color: var(--muted); background: var(--well); border: 1px solid var(--line);
}
.reclamp i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); flex: none; position: relative; }
.reclamp.on { color: var(--rec); background: var(--rec-soft); border-color: var(--rec-halo); }
.reclamp.on i { background: var(--rec); box-shadow: 0 0 0 4px var(--rec-halo), 0 0 18px 4px var(--rec); }
.reclamp.on i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rec);
  animation: ring 1.4s ease-out infinite;
}
@keyframes ring { from { transform: scale(.7); } to { transform: scale(2.3); border-color: transparent; } }
.reclamp.paused { color: var(--warn-text); background: var(--warn-soft); border-color: var(--warn-line); }
.reclamp.paused i { background: var(--warn); }

/* ------------------------------------------------------------ rooms */
#app { height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.room { min-height: 0; position: relative; }

/* ------------------------------------------------------------ welcome */
#welcome { overflow: auto; }
.hero { position: relative; min-height: calc(100vh - var(--top-h)); display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
/* The picture lies under the words: the canvas is the hero's first layer and everything else is
   lifted above it. (A negative z-index would put it under the room's own background.) */
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero > :not(canvas) { position: relative; z-index: 1; }
/* sized by the window's height as well as its width: on a short screen the glowing button must still be in sight */
.hero-copy { text-align: center; padding: clamp(16px, 3.4vh, 34px) 24px 0; max-width: 1180px; margin: 0 auto; }
.hero-copy .eyebrow { display: inline-flex; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-read); }
.hero-copy .eyebrow svg { width: 18px; height: 18px; flex: none; }
.hero-copy h1 { font: 400 clamp(34px, min(4.9vw, 8.4vh), 76px)/1.04 var(--display); letter-spacing: -.012em; margin-top: 14px; color: var(--title); }
/* the second line is lit from above: gold that deepens towards its foot */
.hero-copy h1 em {
  font-style: italic; padding: 0 .1em; color: var(--accent-read);
  background: linear-gradient(180deg, var(--gold-hi) 18%, var(--gold-lo) 88%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy .orn { margin: clamp(8px, 1.7vh, 16px) auto 0; }
.hero-copy p.sub { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-2); max-width: 700px; margin: clamp(8px, 1.5vh, 14px) auto 0; }
.hero-wave { position: relative; min-height: clamp(176px, 26vh, 250px); pointer-events: none; }
.readout { position: absolute; top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 46%; font-size: 13px; font-weight: 600; pointer-events: none; }
.readout.raw { left: 3%; }
.readout.clean { right: 3%; justify-content: flex-end; }
.readout .tag { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.readout .chip {
  background-image: linear-gradient(180deg, var(--glass-1), var(--glass-2)); box-shadow: inset 0 1px 0 var(--hilite), var(--lift); font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1200px; margin: 0 auto; padding: 6px 24px 22px; width: 100%; }
/* A step is a pane of glass over the sky. Its number is a lamp, unlit until the step is done,
   and one thread runs through the three lamps and turns gold behind the ones that are lit. */
.step {
  position: relative; border-radius: 16px; padding: 20px 20px 18px; display: grid; gap: 10px; align-content: start; min-height: 196px;
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2)); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--hilite), var(--lift);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
}
.step .n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--font); position: relative; z-index: 1;
  background: var(--well); color: var(--accent); border: 1px solid var(--accent-line);
}
.step.done .n {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); border-color: transparent;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 20px var(--gold-glow);
}
.step:not(:last-child)::after { content: ""; position: absolute; top: 35px; left: 58px; right: -19px; height: 1px; background: var(--line-strong); pointer-events: none; }
.step + .step::before { content: ""; position: absolute; top: 35px; left: -1px; width: 13px; height: 1px; background: var(--line-strong); pointer-events: none; }
.step.done:not(:last-child)::after, .step.done + .step::before { background: var(--accent); box-shadow: 0 0 10px var(--gold-glow); }
.step h3 { font: 400 24px/1.15 var(--display); color: var(--title); margin-top: 2px; }
/* One solid gold thing on the page at a time. A step's own button, and a project card's, is glass
   with a gold edge; only the manuscript's is solid, and only until the glowing button is lit
   (.path.ready). */
.step .btn.primary, .path.ready .step .btn.primary, .proj .btn.primary {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); color: var(--title); border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 var(--hilite), 0 0 18px var(--accent-soft); filter: none;
}
.step .btn.primary svg { color: var(--accent); }
.step .btn.primary:hover:not(:disabled), .proj .btn.primary:hover:not(:disabled) { border-color: var(--accent); color: var(--title); filter: none; }
.path:not(.ready) #stepMs .btn.primary {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--gold-hilite), 0 2px 16px var(--gold-glow);
}
.path:not(.ready) #stepMs .btn.primary svg { color: var(--gold-ink); }
.path:not(.ready) #stepMs .btn.primary:hover:not(:disabled) { color: var(--gold-ink); filter: brightness(1.06); }
.step p { font-size: 14.5px; color: var(--text-2); }
.step .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.step .result { font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.step.go { overflow: hidden; }
.radiant {
  position: relative; border: 0; padding: 0; background: none; border-radius: 15px; min-height: 64px; width: 100%; isolation: isolate;
  font: 700 20px/1 var(--font); letter-spacing: .2px; color: var(--muted);
}
.radiant > span {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; border-radius: 13px;
  background: var(--well); border: 1px solid var(--line-strong);
}
.radiant svg { width: 25px; height: 25px; flex: none; }
.radiant:disabled > span { color: var(--muted); }
.radiant.ready { color: var(--gold-ink); }
.radiant.ready > span { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); border-color: transparent; box-shadow: inset 0 1px 0 var(--gold-hilite); }
.radiant.ready::before, .radiant.ready::after {
  content: ""; position: absolute; inset: -3px; border-radius: 17px; z-index: 0;
  background: conic-gradient(from var(--turn, 0deg), var(--radiant-1), var(--radiant-3), var(--radiant-2), var(--radiant-4), var(--radiant-1));
  animation: turn 5s linear infinite;
}
.radiant.ready::after { inset: -10px; filter: blur(18px); z-index: -1; animation: turn 5s linear infinite, breathe 2.6s ease-in-out infinite alternate; }
.radiant.ready:hover > span { transform: translateY(-1px); }
.radiant.ready:active > span { transform: translateY(1px); }
@property --turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes turn { to { --turn: 360deg; } }
@keyframes breathe { from { transform: scale(.96); } to { transform: scale(1.05); } }
.projects { max-width: 1200px; margin: 0 auto; padding: 8px 24px 44px; width: 100%; }
.projects h2 { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-read); font-weight: 600; margin: 6px 0 12px; }
.projects h2::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--accent-line), transparent); }
.proj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.proj {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 14px; position: relative;
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hilite), var(--lift);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.proj:hover { border-color: var(--accent-line); }
/* the book that was open last: a gold spine down its left edge, as on the Blue Hour's shelf */
.proj.latest { padding-left: 21px; }
.proj.latest::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); box-shadow: 0 0 12px var(--gold-glow); }
.proj .kick { display: block; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.proj .ring { width: 46px; height: 46px; }
.proj b { display: block; font: 400 19px/1.25 var(--display); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj span { display: block; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj span.exp { font-size: 13px; color: var(--text-2); }
.proj .acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.note-bar { max-width: 1180px; margin: 12px auto 0; padding: 10px 14px; border-radius: 11px; background: var(--warn-soft); color: var(--warn-text); border: 1px solid var(--warn-line); font-size: 14.5px; }

/* ------------------------------------------------------------ sheets (dialogs) */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: grid; place-items: center; padding: 20px; overflow: auto; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.sheet {
  width: min(960px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--float), var(--float-lo));
  border-radius: 18px; box-shadow: var(--shadow), inset 0 1px 0 var(--hilite); padding: 26px 28px 22px; position: relative;
}
.sheet.narrow { width: min(620px, 100%); }
.sheet h2 { font: 400 31px/1.15 var(--display); color: var(--title); padding-right: 34px; }
.sheet .lede { color: var(--text-2); margin-top: 6px; font-size: 15.5px; }
.sheet .x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.sheet .x:hover { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.sheet-foot { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }

/* the room test */
.rt { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 18px; align-items: start; }
.rt-dial { position: relative; width: 300px; height: 300px; }
.rt-dial::before { content: ""; position: absolute; inset: 44px; border-radius: 50%; background: radial-gradient(circle, var(--glow-blue) 0%, transparent 70%); }
.rt-dial canvas { width: 300px; height: 300px; display: block; position: relative; }
.rt-dial .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rt-dial .mid b { font: 400 56px/1 var(--display); color: var(--title); font-variant-numeric: tabular-nums lining-nums; }
.rt-dial .mid span { font-size: 13px; line-height: 1.3; color: var(--muted); margin: 8px auto 0; letter-spacing: .04em; max-width: 124px; }
.rt-side { display: grid; gap: 14px; }
.rt-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 11px; background: var(--well); border: 1px solid var(--line); }
.rt-row.main { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.rt-row b { font-size: 15.5px; }
.rt-row small { display: block; font-size: 13.5px; color: var(--muted); }
.rt-row .num { font: 600 22px/1 var(--font); font-variant-numeric: tabular-nums; display: flex; gap: 8px; align-items: center; }
.rt-say { padding: 14px 16px; border-radius: 11px; background: var(--well); border: 1px solid var(--line); font: 400 20px/1.5 var(--read); color: var(--title); }
/* under the microphone list: which one it is, and a word when it looks like the wrong one */
.micnote { font-size: 13.5px; color: var(--muted); margin-top: -6px; display: grid; gap: 6px; justify-items: start; }
.micnote b { color: var(--text-2); font-weight: 600; }
.micnote.warn { margin-top: -4px; padding: 10px 12px; border-radius: 11px; background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-text); }
.micnote.warn b { color: inherit; }
.tip { font-size: 14px; color: var(--text-2); }
.tip li { margin: 3px 0; }

/* the manuscript sheet */
.drop {
  margin-top: 18px; border: 1.5px dashed var(--line-strong); border-radius: 16px; padding: 32px 20px; text-align: center; background: var(--well);
  display: grid; gap: 10px; justify-items: center;
}
.drop > b { font: 400 24px/1.2 var(--display); color: var(--title); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .pages { position: relative; width: 120px; height: 86px; }
.drop .pages i {
  position: absolute; left: 32px; top: 6px; width: 56px; height: 72px; border-radius: 3px; background: linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: var(--lift); transform-origin: 50% 100%;
}
.drop .pages i:nth-child(1) { transform: rotate(-11deg) translateX(-14px); animation: fan1 3.4s var(--ease) infinite alternate; }
.drop .pages i:nth-child(2) { transform: rotate(0deg); animation: fan2 3.4s var(--ease) infinite alternate; }
.drop .pages i:nth-child(3) { transform: rotate(11deg) translateX(14px); animation: fan3 3.4s var(--ease) infinite alternate; }
.drop .pages i::before { content: ""; position: absolute; left: 9px; right: 9px; top: 12px; height: 34px; background: repeating-linear-gradient(var(--paper-line) 0 2px, transparent 2px 8px); border-radius: 2px; }
@keyframes fan1 { to { transform: rotate(-17deg) translateX(-22px) translateY(-3px); } }
@keyframes fan2 { to { transform: translateY(-7px); } }
@keyframes fan3 { to { transform: rotate(17deg) translateX(22px) translateY(-3px); } }
.drop.busy .pages i { animation-duration: .5s; }
.paste { margin-top: 10px; }
.paste textarea { width: 100%; min-height: 150px; resize: vertical; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--well); padding: 12px; font: 16px/1.5 var(--read); color: var(--text); }
.paste textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ms-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; }
/* the manuscript is a page of paper, cream in both rooms, lying on the sheet */
.ms-page {
  background: linear-gradient(180deg, var(--paper), var(--paper-2)); border-radius: 4px; padding: 22px 26px; max-height: 330px; overflow: hidden; position: relative;
  font: 16px/1.6 var(--read); color: var(--paper-ink); box-shadow: var(--lift);
}
.ms-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, var(--paper-2)); }
.ms-page p { margin: 0 0 9px; }
.ms-page p.h { font: 400 20px/1.3 var(--display); letter-spacing: .02em; color: var(--paper-accent); margin-top: 4px; }
/* the words arrive one after another, and all of them inside a second however long the page is */
.ms-page p .wd { display: inline-block; transform: translateY(8px); animation: rise .5s var(--ease) forwards; animation-delay: min(calc(var(--i) * 14ms), 900ms); visibility: hidden; }
@keyframes rise { from { transform: translateY(8px); visibility: visible; } to { transform: none; visibility: visible; } }
.ms-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-facts .chip b { font-variant-numeric: tabular-nums; color: var(--title); }
.ms-side { display: grid; gap: 14px; align-content: start; }
.sec-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 96px; overflow: auto; }
.sec-list .chip { font-weight: 600; }
.ms-path { padding: 12px 14px; border-radius: 11px; background: var(--well); border: 1px solid var(--line); font-size: 14.5px; color: var(--text-2); overflow-wrap: anywhere; }
.ms-path b { color: var(--title); }
.ms-path .v2 { display: block; margin-top: 5px; color: var(--warn-text); font-weight: 600; }

/* ------------------------------------------------------------ the Microphone Debugger */
/* Six stops on a cable, as in the suite's Sound Debugger: a lamp for each, lit by what was found. */
.sheet.dbg { width: min(1080px, 100%); }
.dbg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; margin-top: 18px; align-items: start; }
.dbg-left { display: grid; gap: 14px; }
.dbg-right { display: grid; gap: 12px; align-content: start; }
.dbg-verdict { padding: 12px 15px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--well); display: grid; gap: 3px; }
.dbg-verdict b { font: 400 24px/1.2 var(--display); color: var(--title); }
.dbg-verdict span { font-size: 13.5px; color: var(--text-2); }
.dbg-verdict.ok { background: var(--ok-soft); border-color: var(--ok-line); }
.dbg-verdict.ok b { color: var(--ok-text); }
.dbg-verdict.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.dbg-verdict.warn b { color: var(--warn-text); }
.dbg-verdict.bad { background: var(--stop-soft); border-color: var(--stop-line); }
.dbg-verdict.bad b { color: var(--stop-text); }
.stops { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.stops::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; background: var(--line-strong); }
.stop { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 13px; padding: 7px 0; align-items: start; }
.stop .lamp {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font); font-style: normal;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--line-strong); position: relative; z-index: 1;
}
.stop b { display: block; font-size: 14.5px; color: var(--title); }
.stop .found { display: block; font-size: 13.5px; color: var(--text-2); }
.stop .todo { display: block; font-size: 13.5px; margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--warn-line); color: var(--warn-text); }
.stop.ok .lamp { background: var(--ok); color: var(--surface); border-color: transparent; box-shadow: 0 0 14px var(--ok-line); }
.stop.warn .lamp { background: var(--warn); color: var(--surface); border-color: transparent; box-shadow: 0 0 14px var(--warn-line); }
.stop.bad .lamp { background: var(--stop); color: var(--surface); border-color: transparent; box-shadow: 0 0 14px var(--stop-line); }
.stop.bad .todo { border-left-color: var(--stop-line); color: var(--stop-text); }
/* being checked: a ring turns round the lamp */
.stop.busy .lamp { border-color: var(--accent-line); color: var(--accent); }
.stop.busy .lamp::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent-line); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dbg-say { min-height: 46px; font-size: 15px; color: var(--text-2); display: flex; align-items: center; gap: 12px; }
.dbg-say b {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 400 24px/1 var(--display); color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line); font-variant-numeric: tabular-nums lining-nums;
}
.dbg-meter { height: 10px; border-radius: 6px; background: var(--well); border: 1px solid var(--line); overflow: hidden; position: relative; }
.dbg-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--blue-deep), var(--wave-clean)); }
.dbg-meter i.hot { background: var(--stop); }
.dbg-screen { border-radius: 12px; background: var(--well); border: 1px solid var(--line); padding: 8px 10px 4px; }
.dbg-spec { display: block; width: 100%; height: 176px; }
.dbg-cap { font-size: 13.5px; color: var(--muted); min-height: 20px; }
/* what was measured, as four small dials' worth of numbers */
.dbg-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dbg-nums div { padding: 9px 10px 8px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); min-width: 0; }
.dbg-nums span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-nums b { display: block; margin-top: 4px; font: 600 19px/1.1 var(--font); font-variant-numeric: tabular-nums; color: var(--title); white-space: nowrap; }
.dbg-nums b small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dbg-nums .warn b { color: var(--warn-text); }
.dbg-nums .bad b { color: var(--stop-text); }
/* the buttons stay in sight however long the list of stops grows */
.sheet.dbg .sheet-foot { position: sticky; bottom: -22px; margin: 18px -28px -22px; padding: 12px 28px 16px; background: var(--float-lo); border-top: 1px solid var(--line); z-index: 2; }

/* ------------------------------------------------------------ the recording room */
#studio { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--stage); }
/* The Spotlight: a pool of lamplight where the line being read lies, the room falling away
   towards its edges. The page glides under the light; the light does not move. */
.prompter {
  position: relative; overflow: hidden;
  background:
    radial-gradient(56% 46% at 50% 43%, var(--pool-gold) 0%, var(--pool-blue) 40%, transparent 76%),
    radial-gradient(125% 100% at 50% 46%, transparent 44%, var(--vignette) 100%);
}
.prompter::before, .prompter::after { content: ""; position: absolute; left: 0; right: 0; height: 100px; z-index: 2; pointer-events: none; }
.prompter::before { top: 0; background: linear-gradient(var(--stage), transparent); }
.prompter::after { bottom: 0; background: linear-gradient(transparent, var(--stage)); }
.scroll { position: absolute; left: 0; right: 0; top: 0; will-change: transform; transition: transform .55s var(--ease); padding: 0 max(24px, calc(50% - 520px)); }
.scroll.snap { transition: none; }
.para { margin: 0 0 .95em; font-family: var(--read); font-size: var(--read-px, 34px); line-height: 1.58; color: var(--read-next); }
.para.h { font: italic 400 calc(var(--read-px, 34px) * .96)/1.3 var(--display); letter-spacing: .01em; color: var(--accent-read); margin-top: 1.3em; }
.sent { border-radius: 11px; padding: .08em .24em; margin: 0 -.24em; box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: pointer; }
.sent.past { color: var(--read-past); }
/* the line being read is lit, not boxed: a band of light with nothing drawn round it */
.sent.now { color: var(--read-now); background: var(--spot); box-shadow: 0 0 46px 8px var(--spot-halo); text-shadow: 0 0 26px var(--read-glow); }
.sent.start::before { content: "▶"; color: var(--accent-read); font-size: .58em; margin-right: .4em; vertical-align: .18em; display: inline-block; animation: nudge 1.1s var(--ease) infinite alternate; text-shadow: none; font-style: normal; }
@keyframes nudge { to { transform: translateX(5px); } }
.tok.read { color: var(--read-past); }
.sent.now .tok.read { color: var(--muted); text-shadow: none; }
.sent.now .tok.cur { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 7px; }
/* how far through the book: a thread down the right edge, lit as far as has been read */
.rail { position: absolute; right: 12px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--line-strong); z-index: 3; cursor: pointer; }
.rail::after { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; }
.rail i { position: absolute; left: 0; right: 0; top: 0; border-radius: 3px; background: linear-gradient(180deg, var(--accent-line), var(--accent)); box-shadow: 0 0 12px var(--gold-glow); }
.rail u { position: absolute; left: -3px; right: -3px; height: 2px; background: var(--line-strong); }
/* the voice, drawn along the foot of the stage while it is being recorded (ribbon.mjs) */
#voice { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 76px; z-index: 3; pointer-events: none; display: block; }
.preroll {
  position: absolute; left: 50%; top: 20px; transform: translateX(-50%); z-index: 4; display: flex; gap: 14px; align-items: center;
  padding: 12px 22px 12px 14px; border-radius: 16px; border: 1px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px 0 var(--hilite);
  background: linear-gradient(180deg, var(--float), var(--float-lo));
}
.preroll b { font: 400 30px/1 var(--display); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-variant-numeric: tabular-nums lining-nums; }
.preroll span { font-size: 16px; font-weight: 600; color: var(--title); }
.preroll small { display: block; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.banner {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; display: flex; gap: 12px; align-items: center; max-width: min(760px, 92%);
  padding: 10px 18px 10px 10px; border-radius: 16px; background: var(--cat-card); color: var(--cat-card-ink); border: 1px solid var(--paper-line); box-shadow: var(--shadow);
}
.banner .cat { width: 62px; height: 62px; flex: none; }
.banner b { display: block; font-size: 16px; }
.banner span { font-size: 14px; color: var(--cat-card-muted); }
/* the console under the stage */
.foot {
  background: linear-gradient(180deg, var(--bar-1), var(--bar-2)); border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hilite);
  padding: 13px 18px 11px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; position: relative; z-index: 5;
}
.transport { display: flex; align-items: center; gap: 10px; }
.tbtn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); box-shadow: inset 0 1px 0 var(--hilite);
}
.tbtn:hover:not(:disabled) { border-color: var(--accent-line); color: var(--title); }
.tbtn:disabled { color: var(--faint); background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.tbtn svg { width: 19px; height: 19px; }
.tbtn.rec {
  width: 64px; height: 64px; border-color: transparent; color: var(--rec-ink); position: relative;
  background: radial-gradient(circle at 34% 28%, var(--rec-hi), var(--rec) 64%); box-shadow: 0 0 0 5px var(--rec-halo), 0 6px 26px var(--rec-halo);
}
.tbtn.rec:hover:not(:disabled) { transform: scale(1.04); border-color: transparent; color: var(--rec-ink); }
.tbtn.rec svg { width: 26px; height: 26px; }
.tbtn.rec:disabled { background: var(--rec-soft); color: var(--rec); border-color: var(--rec-halo); box-shadow: none; }
/* while a take is being recorded the button is the light itself: lit, with rings going out from it */
.tbtn.rec.live { background: radial-gradient(circle at 34% 28%, var(--rec-hi), var(--rec) 64%); color: var(--rec-ink); border-color: transparent; box-shadow: 0 0 0 5px var(--rec-halo), 0 0 34px 8px var(--rec-halo); }
.tbtn.rec.live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--rec); animation: ring 1.8s ease-out infinite; pointer-events: none; }
.clock { font: 600 23px/1 var(--font); font-variant-numeric: tabular-nums; min-width: 96px; color: var(--title); }
.clock small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 6px; letter-spacing: .14em; text-transform: uppercase; }
.oops {
  min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--accent-line); font-weight: 600; font-size: 15px; display: inline-flex; gap: 10px; align-items: center;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); box-shadow: inset 0 1px 0 var(--hilite), 0 0 18px var(--accent-soft); color: var(--title);
}
.oops svg { width: 19px; height: 19px; flex: none; color: var(--accent); }
.oops:hover:not(:disabled) { border-color: var(--accent); }
.oops:disabled { color: var(--faint); border-color: var(--line); background: var(--surface-2); box-shadow: none; }
.oops:disabled svg { color: var(--faint); }
.meters { display: flex; align-items: center; gap: 16px; justify-content: center; min-width: 0; }
.vu { flex: 0 1 128px; min-width: 96px; }
.vu .lbl, .gauge .lbl { white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .15em; color: var(--faint); text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; }
.vu .lbl span + span { letter-spacing: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vu .bar { height: 8px; border-radius: 6px; background: var(--well); border: 1px solid var(--line); overflow: hidden; margin-top: 9px; position: relative; }
.vu .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--blue-deep), var(--wave-clean)); border-radius: 6px; }
.vu .bar i.hot { background: var(--stop); }
/* the gauges give way before the ACX badge is covered: at 1512 px wide the row was 42 px too long and the
   Auto-adjust switch sat on the badge's last letter */
.gauge { flex: 0 1 116px; min-width: 100px; }
.gauge .val { font: 600 20px/1 var(--font); font-variant-numeric: tabular-nums; margin-top: 6px; display: flex; align-items: center; gap: 7px; color: var(--title); }
.gauge .val small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.gauge .track { height: 4px; border-radius: 4px; background: var(--surface-3); margin-top: 8px; position: relative; }
.gauge .track .win { position: absolute; top: 0; bottom: 0; background: var(--ok-soft); border-left: 2px solid var(--ok-line); border-right: 2px solid var(--ok-line); }
.gauge .track .dot { position: absolute; top: -5px; width: 4px; height: 14px; border-radius: 2px; background: var(--muted); transform: translateX(-2px); transition: left .25s linear; }
.gauge.ok .track .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok-line); }
.gauge.bad .track .dot { background: var(--stop); box-shadow: 0 0 10px var(--stop-line); }
.gauge.ok .val { color: var(--ok-text); }
.gauge.bad .val { color: var(--stop-text); }
.tick { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-3); color: var(--muted); }
.gauge.ok .tick { background: var(--ok-soft); color: var(--ok-text); }
.gauge.bad .tick { background: var(--stop-soft); color: var(--stop-text); }
.badge { flex: none; padding: 9px 13px; border-radius: 999px; font-weight: 600; font-size: 12.5px; letter-spacing: .12em; background: var(--well); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); }
.badge.bad { background: var(--stop-soft); color: var(--stop-text); border-color: var(--stop-line); }
.tools { display: flex; align-items: center; gap: 8px; }
.tools .switch { font-size: 13.5px; margin-right: 4px; }
/* the last row of the console: what the app hears on the left, which microphone on the right */
.status { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; min-width: 0; margin-top: 2px; position: relative; z-index: 1; }
.heard { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heard b { color: var(--text-2); font-weight: 600; }
/* Which microphone a take is recorded with: always named. Amber when it is one that does not
   make an audiobook (a Bluetooth headset, a sound-routing tool). */
.micname {
  flex: none; display: inline-flex; align-items: center; gap: 7px; max-width: 46%; padding: 3px 12px 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--well); color: var(--text-2); font-size: 13px; font-weight: 600;
}
.micname svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.micname span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.micname:hover { border-color: var(--accent-line); color: var(--title); }
.micname.none { color: var(--muted); font-weight: 500; }
.micname.warn, .micname.warn:hover { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.micname.warn svg { color: var(--warn-text); }
#studio.live .micname { cursor: default; }

/* the cat */
.cat { display: block; }
.cat .tail { transform-origin: 64px 96px; animation: swish 2.4s ease-in-out infinite alternate; }
.cat .ear-l { transform-origin: 34px 34px; animation: twitch 5s ease-in-out infinite; }
.cat .lids { transform-origin: 60px 54px; animation: blink 4.2s ease-in-out infinite; }
.cat .body { transform-origin: 60px 100px; animation: purr 2.8s ease-in-out infinite alternate; }
@keyframes swish { from { transform: rotate(-9deg); } to { transform: rotate(13deg); } }
@keyframes twitch { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-12deg); } 96% { transform: rotate(4deg); } }
@keyframes blink { 0%, 44%, 50%, 100% { transform: scaleY(0); } 47% { transform: scaleY(1); } }
@keyframes purr { from { transform: scaleY(1); } to { transform: scaleY(1.025); } }
/* the cat's card is paper under a lamp: cream in both rooms, with the lamp's glow around it */
.catcard {
  width: min(560px, 100%); background: linear-gradient(180deg, var(--cat-card), var(--paper-2)); color: var(--cat-card-ink); border-radius: 24px; padding: 22px 26px 24px; text-align: center;
  box-shadow: var(--shadow), 0 0 90px var(--gold-glow); border: 1px solid var(--paper-line);
}
.catcard .cat { width: 210px; height: 210px; margin: 0 auto -6px; }
.catcard h2 { font: 800 46px/1 var(--font); letter-spacing: 1px; }
.catcard p { font-size: 19px; font-weight: 600; margin-top: 8px; color: var(--cat-card-ink); }
.catcard p.small { font-size: 15px; font-weight: 500; color: var(--cat-card-muted); margin-top: 10px; }
.count { width: 74px; height: 74px; margin: 14px auto 0; position: relative; }
.count svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.count b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 30px/1 var(--font); font-variant-numeric: tabular-nums; }
.catcard .acts { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.catcard .btn, .catcard .btn:hover:not(:disabled) { background: var(--cat-fur); border-color: var(--cat-fur-2); color: var(--cat-card-ink); box-shadow: none; filter: none; }
.catcard .btn.primary, .catcard .btn.primary:hover:not(:disabled) { background: var(--cat-ink); color: var(--cat-shine); border-color: var(--cat-ink); }
.catcard .btn:disabled { background: var(--paper-2); color: var(--cat-card-muted); border-color: var(--paper-line); }

/* ------------------------------------------------------------ the editing room */
#editing { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.ed-strip { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--bar-2); border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.ed-strip .lg { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.ed-strip button.lg:hover { background: var(--surface-2); border-color: var(--line); }
.ed-strip .lg i { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.ed-strip .lg b { font-variant-numeric: tabular-nums; color: var(--title); }
.ed-strip .sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
.ed-strip .lg.mic svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.ed-strip .lg.mic.warn { color: var(--warn-text); }
.ed-strip .lg.mic.warn svg { color: var(--warn-text); }
.ed-strip .ul { display: inline-block; width: 26px; height: 0; border-bottom: 3px solid; margin-right: 2px; transform: translateY(-3px); }
.ed-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px 16px 12px; min-height: 0; }
.pane { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; box-shadow: var(--lift), inset 0 1px 0 var(--hilite); overflow: hidden; }
.pane-head { padding: 11px 18px 10px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; background: linear-gradient(180deg, var(--surface-hi), var(--surface)); }
.pane-head b { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.pane-head span { font-size: 13.5px; color: var(--muted); }
.pane-body { overflow: auto; padding: 18px 22px 40px; font: 18px/1.78 var(--read); scroll-behavior: smooth; position: relative; }
.pane-body p { margin: 0 0 .8em; }
.pane-body p.h { font: italic 400 21px/1.35 var(--display); letter-spacing: .01em; color: var(--accent); margin-top: 1em; }
.pane-body .empty { font: 15.5px/1.5 var(--font); color: var(--muted); text-align: center; padding: 40px 10px; }
.w { border-radius: 5px; padding: 1px 1px; cursor: pointer; text-decoration-thickness: 2.5px; text-underline-offset: 5px; }
.w:hover { background: var(--surface-3); }
.w.unread { color: var(--faint); }
.w.gone { color: var(--text-2); }
.w.k-retake, .mk.k-retake { background: var(--k-retake-soft); }
.w.k-nonsense, .mk.k-nonsense { background: var(--k-nonsense-soft); }
.w.k-misread, .mk.k-misread { background: var(--k-misread-soft); }
.w.k-missing, .mk.k-missing { background: var(--k-missing-soft); }
.w.k-silence, .mk.k-silence { background: var(--k-silence-soft); }
.w.k-noise, .mk.k-noise { background: var(--k-noise-soft); }
.w.k-roomtone, .mk.k-roomtone { background: var(--k-roomtone-soft); }
.w.v-delete, .mk.v-delete { text-decoration: underline; text-decoration-color: var(--v-delete); border-bottom: 0; }
.w.v-review, .mk.v-review { text-decoration: underline wavy; text-decoration-color: var(--v-review); text-decoration-thickness: 2px; }
.w.v-keep, .mk.v-keep { text-decoration: underline; text-decoration-color: var(--v-keep); }
/* taken out between two words, with no pause to cut in: still red underneath, and an amber line over it until it has been heard */
.w.listen, .mk.listen { border-top: 2px dotted var(--v-review); }
.w.play, .w.tokplay { background: var(--hl); box-shadow: 0 0 0 1px var(--hl-edge); color: var(--text); }
.mk { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1.5 var(--font); padding: 1px 8px; border-radius: 8px; margin: 0 3px; cursor: pointer; white-space: nowrap; vertical-align: 2px; text-decoration-thickness: 2.5px; text-underline-offset: 4px; color: var(--text-2); }
.mk:hover { filter: brightness(1.08); }
.takebreak { display: block; height: .7em; }
.pop {
  position: fixed; z-index: 30; width: 340px; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow), inset 0 1px 0 var(--hilite);
  background: linear-gradient(180deg, var(--float), var(--float-lo)); padding: 14px 16px; font: 14.5px/1.45 var(--font);
}
.pop h4 { margin: 0 0 4px; font-size: 15.5px; display: flex; align-items: center; gap: 8px; color: var(--title); }
.pop h4 i { width: 12px; height: 12px; border-radius: 4px; }
.pop p { color: var(--text-2); }
.pop .verdict { margin-top: 8px; font-weight: 700; font-size: 13.5px; }
.pop .verdict.delete { color: var(--v-delete); }
.pop .verdict.review { color: var(--v-review); }
.pop .verdict.keep { color: var(--v-keep); }
.pop .acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.busybar { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.busybar i { width: 120px; height: 6px; border-radius: 4px; background: var(--surface-3); position: relative; overflow: hidden; }
.busybar i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, var(--accent-line), var(--accent)); border-radius: 4px; animation: slide 1.1s ease-in-out infinite alternate; }
@keyframes slide { from { left: 0; } to { left: 60%; } }

.tl { background: linear-gradient(180deg, var(--bar-1), var(--bar-2)); border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hilite); padding: 9px 16px 7px; }
.tl-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.tl-tools .hint { font-size: 13.5px; color: var(--muted); }
.tl-wrap { position: relative; height: 116px; border-radius: 11px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
#tlCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.tl-mini { position: relative; height: 16px; margin-top: 6px; border-radius: 6px; background: var(--well); border: 1px solid var(--line); overflow: hidden; cursor: pointer; }
#miniCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.player { background: var(--bar-2); border-top: 1px solid var(--line); padding: 10px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.player .tbtn { width: 42px; height: 42px; }
.player .tbtn.play { width: 54px; height: 54px; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 1px 0 var(--gold-hilite), 0 2px 18px var(--gold-glow); }
.player .tbtn.play:hover:not(:disabled) { color: var(--gold-ink); border-color: transparent; filter: brightness(1.06); }
.player .time { font: 600 19px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--title); }
.player .time small { font-weight: 600; color: var(--muted); font-size: 14px; }
.player .now { font-size: 14.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.player select { min-height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--well); padding: 0 8px; font-size: 14px; }

/* export */
.ex-file { padding: 12px 14px; border-radius: 11px; background: var(--well); border: 1px solid var(--line); margin-top: 10px; }
.ex-file b { font-size: 15.5px; overflow-wrap: anywhere; color: var(--title); }
.ex-file .checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.progress { height: 6px; border-radius: 6px; background: var(--surface-3); margin-top: 16px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-2), var(--gold-1)); border-radius: 6px; transition: width .3s linear; box-shadow: 0 0 12px var(--gold-glow); }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 70; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--float), var(--float-lo)); box-shadow: var(--shadow), inset 0 1px 0 var(--hilite); font-size: 14.5px; font-weight: 600; max-width: 80vw;
}
.toast.bad { background: var(--float-lo); color: var(--stop-text); border-color: var(--stop-line); box-shadow: var(--shadow), inset 3px 0 0 var(--stop); }

/* ------------------------------------------------------------ narrow windows */
@media (max-width: 1470px) {
  /* the footer in two rows: the buttons and the tools, then the gauges */
  .foot { grid-template-columns: 1fr auto; }
  .foot .transport { grid-column: 1; grid-row: 1; }
  .foot .tools { grid-column: 2; grid-row: 1; }
  .foot .meters { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (max-width: 900px) {
  /* the top bar keeps what is needed to work: the rooms, the light, Export */
  .top { flex-wrap: wrap; gap: 8px 10px; padding: 6px 12px; }
  .brand span, .brand small, .top .file, .top .spacer { display: none; }
  .reclamp span { display: none; }
  .seg button { padding-left: 10px; padding-right: 10px; }
  .scroll { padding: 0 22px 0 16px; }
  .para { font-size: min(var(--read-px, 34px), 6.4vw); }
  .para.h { font-size: min(calc(var(--read-px, 34px) * .96), 6.2vw); }
  .ed-strip { padding: 8px 12px; gap: 6px; }
  .path { grid-template-columns: 1fr; }
  /* one above the other, the thread between the lamps has nowhere to run */
  .step:not(:last-child)::after, .step + .step::before { display: none; }
  .rt { grid-template-columns: 1fr; justify-items: center; }
  .dbg-grid { grid-template-columns: minmax(0, 1fr); }
  .dbg-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet.dbg .sheet-foot { bottom: -18px; margin: 16px -18px -18px; padding: 10px 18px 14px; }
  .ms-grid { grid-template-columns: 1fr; }
  .sheet { padding: 20px 18px 18px; }
  /* the editing room becomes one page that scrolls: the legend, the two texts one above the other,
     the timeline, the player (four fixed rows do not fit a phone's height) */
  #editing { display: block; overflow-y: auto; }
  .ed-main { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 44vh; }
  .foot { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 10px 12px; }
  .foot .transport, .foot .tools, .foot .meters { grid-column: 1; grid-row: auto; justify-content: center; flex-wrap: wrap; }
  .oops kbd { display: none; }
  .status { flex-direction: column; gap: 6px; margin-top: 0; }
  .heard { white-space: normal; text-align: center; }
  .micname { max-width: 100%; }
  .meters { flex-wrap: wrap; }
  .player { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; }
  .readout { display: none; }
  .file span { display: none; }
  .hero-copy { padding-top: 26px; }
  .hero-copy .eyebrow { letter-spacing: .13em; font-size: 12px; gap: 7px; }
  .seg button { font-size: 13px; }
  #voice { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .radiant.ready::before, .radiant.ready::after, .reclamp.on i::after, .tbtn.rec.live::after, .drop .pages i, .cat .tail, .cat .ear-l, .cat .body, .sent.start::before, .stop.busy .lamp::after { animation: none; }
  .scroll { transition: none; }
  .ms-page p .wd { animation: none; visibility: visible; transform: none; }
}