/* bundled type: no font request ever leaves the device */
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-300-900.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format("woff2")}

/* ============================================================
   D-REC — Digital Scribe · Knight AI+AV
   Machined-instrument UI. Light = anodized silver, dark = black
   anodized. One accent: signal orange. Type: Archivo (engineered
   grotesk, width axis) + IBM Plex Mono (data / timecode).
   ============================================================ */

:root{
  /* WHERE THE LIGHT IS COMING FROM, as two numbers from -1 to 1. The phone's
     own tilt writes them; everything below is the same lighting the deck has
     always had, with the light allowed to move. AT 0,0 EVERY VALUE BELOW
     RESOLVES TO EXACTLY WHAT IT WAS BEFORE, which is what makes this safe:
     with no gyroscope, no permission, or the switch off, the machine renders
     byte for byte as it did. Nothing here moves a pixel of content, only
     light and shadow, because text that moves is text that smears. */
  --tx: 0; --ty: 0;

  --accent:#e2440e;
  --accent-ink:#fff;              /* text painted ON accent surfaces */
  --accent-soft:rgba(226,68,14,.12);

  --bg:#e6e7e8;
  --bg-vign:radial-gradient(120% 90% at 50% 0%, #f0f1f2 0%, #e6e7e8 55%, #d8dadb 100%);
  --face-hi:#dcdfe0;
  --face-lo:#c3c6c8;
  --face-edge:rgba(255,255,255,.85);
  --face-shadow:0 24px 48px rgba(30,33,35,.28), 0 4px 10px rgba(30,33,35,.18);
  --metal-btn:linear-gradient(180deg,#e3e5e6 0%,#cfd2d4 55%,#c2c5c7 100%);
  --disc-hi:#e0e2e3;
  --disc-lo:#c9ccce;
  --hub-hi:#cfd2d4;
  --hub-lo:#b9bcbe;
  --hub-stitch:rgba(255,255,255,.85);   /* the glint at every stitch point of the quilted hub */

  --ink:#2b2e30;
  --ink-soft:#54585b;
  --ink-faint:#8b8f92;
  --line:rgba(20,22,24,.16);
  --line-strong:rgba(20,22,24,.30);

  --panel:#f0f1f1;
  --panel-edge:#fbfbfc;
  --row-hover:rgba(20,22,24,.045);

  --oled:#000;   /* a true black display, phosphor text on it */
  --panel-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.02),0 8px 16px -4px rgba(0,0,0,.06),0 24px 32px -8px rgba(0,0,0,.08);
  --oled-text:#f4f5f5;

  --key-h:78px;
  --font-ui:"Archivo",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Cascadia Mono",monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);        /* quint-out: every enter and exit */
  --ease-in-out:cubic-bezier(.77,0,.175,1);    /* moves and morphs that stay on screen */
  --ease-drawer:cubic-bezier(.32,.72,0,1);     /* the iOS sheet curve */
  --dur-fast:.15s;--dur:.25s;--dur-slow:.5s;
  --focus:var(--accent);
}

::selection{background:var(--accent);color:var(--accent-ink)}

[data-theme="dark"]{
  --bg:#0a0b0c;
  --bg-vign:radial-gradient(120% 90% at 50% 0%, #131415 0%, #0a0b0c 55%, #050606 100%);
  --face-hi:#232527;
  --face-lo:#141617;
  --face-edge:rgba(255,255,255,.14);
  --face-shadow:0 26px 52px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#2b2d2f 0%,#1d1f21 55%,#161819 100%);
  --disc-hi:#26282a;
  --disc-lo:#191b1d;
  --hub-hi:#202224;
  --hub-lo:#101112;
  --hub-seam:rgba(0,0,0,.72);          /* darker black seams and stitch points */
  --hub-stitch:rgba(255,255,255,.09);  /* the faint bevel edge */
  --hub-puff:rgba(255,255,255,.06);

  --ink:#d5d7d8;
  --ink-soft:#b4b7b9;
  --ink-faint:#9fa2a4;
  --line:rgba(235,237,238,.13);
  --line-strong:rgba(235,237,238,.26);

  --panel:#111213;
  --panel-edge:#1b1d1e;
  --row-hover:rgba(235,237,238,.05);
}

/* CRIMSON — deep true-red anodize (no purple lean) with a GOLD
   accent: record dot, keys, marks, recap all go gold here.
   Gold carries dark maroon text for contrast. */
[data-theme="crimson"]{
  --accent:#e3ac2f;
  --accent-ink:#2b0806;
  --accent-soft:rgba(227,172,47,.14);

  --bg:#190304;
  --face-hi:#440b0d;
  --face-lo:#250506;
  --face-edge:rgba(255,190,180,.15);
  --face-shadow:0 26px 52px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#541012 0%,#390809 55%,#2c0607 100%);
  --disc-hi:#4c0d0f;
  --disc-lo:#320708;
  --hub-hi:#3f0a0c;
  --hub-lo:#230405;
  --hub-seam:rgba(0,0,0,.62);          /* deeper crimson seams and stitch points */
  --hub-stitch:rgba(255,255,255,.09);  /* the faint bevel edge */
  --hub-puff:rgba(255,255,255,.07);

  --ink:#f5e2da;
  --ink-soft:#d5aea4;
  --ink-faint:#bc988f;
  --line:rgba(255,210,200,.14);
  --line-strong:rgba(255,210,200,.28);

  --panel:#210607;
  --panel-edge:#37100f;
  --row-hover:rgba(255,210,200,.05);
}
[data-theme="crimson"] .screw{background:radial-gradient(circle at 35% 30%,#6e1d1d,#250506)}

/* EMERALD — deep green edition with a gold accent.
   Gold carries dark green text for contrast. */
[data-theme="emerald"]{
  --accent:#daaa2b;
  --accent-ink:#14281c;
  --accent-soft:rgba(217,168,39,.14);

  --bg:#041710;
  --face-hi:#0f3a2c;
  --face-lo:#07231a;
  --face-edge:rgba(210,255,230,.14);
  --face-shadow:0 26px 52px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#144534 0%,#0c2f22 55%,#09261b 100%);
  --disc-hi:#123d2e;
  --disc-lo:#0a2a1e;
  --hub-hi:#0f3527;
  --hub-lo:#061d14;
  --hub-seam:rgba(0,0,0,.62);          /* deeper green seams and stitch points */
  --hub-stitch:rgba(255,255,255,.09);  /* the faint bevel edge */
  --hub-puff:rgba(255,255,255,.07);

  --ink:#ddefe3;
  --ink-soft:#a3c7b3;
  --ink-faint:#89aa98;
  --line:rgba(214,244,226,.13);
  --line-strong:rgba(214,244,226,.26);

  --panel:#08211a;
  --panel-edge:#123329;
  --row-hover:rgba(214,244,226,.05);
}
[data-theme="emerald"] .screw{background:radial-gradient(circle at 35% 30%,#2a5c46,#07231a)}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{height:100%}
/* the viewport IS the machine chassis — full bleed, no page scroll */
body{
  height:100dvh;
  display:flex;flex-direction:column;
  font-family:var(--font-ui);
  color:var(--ink);
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html{-webkit-tap-highlight-color:transparent}
button,[role="button"],[role="slider"],[role="tab"]{
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* faint machined grain over everything */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage,.colophon{position:relative;z-index:1}
.chrome{position:relative;z-index:20}   /* dropdowns must overlay the stage */

/* ============ CHROME ============ */
.chrome{
  display:flex;align-items:center;gap:12px;
  padding:calc(7px + env(safe-area-inset-top)) clamp(12px,3vw,22px) 7px;
  border-bottom:1px solid var(--line);
  flex:none;
}
.chip-full{width:30px;height:28px;padding:0;font-size:13px;line-height:1;display:grid;place-items:center}
.brand{display:flex;align-items:baseline;gap:7px;min-width:0}
.brand-dot{width:8px;height:8px;border-radius:2px;background:var(--accent);align-self:center;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.brand-name{
  margin:0;font-weight:800;font-stretch:112%;letter-spacing:.06em;font-size:14.5px;   /* an h1 for search engines, the same mark for people */
}
.brand-sub{margin:0;font-size:8.5px;letter-spacing:.3em;color:var(--ink-faint);font-weight:600;transform:translateY(-1px)}

/* the face switch: the active side lights in the theme's accent — the
   thumb carries a lit accent edge and the label takes the accent colour,
   so the switch reads at a glance on every colourway */
.tabs{
  position:relative;display:flex;margin-inline:auto;
  border:1px solid var(--line);border-radius:9px;padding:3px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),rgba(0,0,0,.02));
}
.tab{
  position:relative;z-index:1;
  padding:5px 16px;border-radius:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--ink-soft);
  transition:color .18s;
}
.tab.is-active{color:var(--accent);text-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.tab-thumb{
  position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:50%;
  border-radius:6px;background:var(--metal-btn);
  box-shadow:inset 0 1px 0 var(--face-edge),inset 0 -2px 0 var(--accent),0 1px 3px rgba(0,0,0,.25);
  transition:transform .22s cubic-bezier(.5,0,.2,1),width .22s;
}
.tabs[data-pos="1"] .tab-thumb{transform:translateX(100%)}

/* the top row's controls wrap rather than push the page sideways: on a 360 px
   phone this group used to run three pixels past the edge */
.chrome-right{display:flex;align-items:center;gap:var(--gap-y,8px);flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.chip{
  padding:6px 10px;border:1px solid var(--line);border-radius:7px;
  font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.04));
}
.chip:hover{color:var(--ink);border-color:var(--line-strong)}
/* the colorway control says what it is: a four-tile palette, the word
   THEME, and the name of the colorway you are on; the tile you are on is
   ringed in the accent. It breathes a few times on launch as an invitation. */
.chip-theme{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 8px;width:auto;cursor:pointer}
.palette{display:grid;grid-template-columns:repeat(2,7px);grid-auto-rows:7px;gap:2px;flex:none}
.pal{border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pal-light{background:linear-gradient(135deg,#f2f3f4,#c9cbce)}
.pal-dark{background:linear-gradient(135deg,#2a2b2d,#0a0b0c)}
.pal-crimson{background:linear-gradient(135deg,#7a1015,#2a0507)}
.pal-emerald{background:linear-gradient(135deg,#1c6b4d,#07231a)}
.pal.is-on{outline:1.5px solid var(--accent);outline-offset:1px}
.theme-label{display:flex;flex-direction:column;justify-content:center;line-height:1;text-align:left;gap:2px}
.theme-label b{font-size:7.5px;font-weight:800;letter-spacing:.2em;color:var(--ink-faint)}
.theme-label em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--ink);transition:opacity .18s var(--ease-out)}
.chip-theme.is-flipping .theme-label em{opacity:0}
@keyframes themeInvite{0%,100%{box-shadow:0 0 0 0 rgba(226,68,14,0)}50%{box-shadow:0 0 0 5px rgba(226,68,14,.28)}}
.chip-theme.is-inviting{animation:themeInvite 1.7s ease-in-out 4}
.chip-theme:hover .pal.is-on,.chip-theme:active .pal.is-on{outline-color:var(--ink)}
/* where live transcription runs. Green dot = on this machine; the accent
   dot = the browser's cloud recognizer, and the pill invites the switch */
.pill-engine{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink-soft);font:inherit;letter-spacing:inherit;text-transform:inherit}
.pill-engine i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);flex:none}
.pill-engine.is-local{color:var(--ink)}
.pill-engine.is-local i{background:#2fb36b;box-shadow:0 0 6px rgba(47,179,107,.6)}
.pill-engine.is-cloud i{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.pill-engine.is-cloud{border-color:var(--accent);color:var(--ink)}
.pill-engine.is-busy i{animation:enginePulse 1s ease-in-out infinite}
.pill-engine.is-off{opacity:.55;cursor:default}
@keyframes enginePulse{0%,100%{opacity:1}50%{opacity:.3}}
.swatch{
  width:15px;height:15px;border-radius:50%;
  background:linear-gradient(135deg,var(--face-hi) 0 50%,var(--accent) 50% 100%);
  box-shadow:0 0 0 1px var(--line-strong),inset 0 1px 1px rgba(255,255,255,.25);
}

/* clock chip + timezone / format menu */
.clockbox{position:relative}
.chip-clock{display:flex;align-items:baseline;gap:7px}
.clock-time{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.clock-tz{font-size:8.5px;letter-spacing:.16em;color:var(--ink-faint)}
.clock-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:196px;
  border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;
  background:var(--panel);
  box-shadow:0 14px 34px rgba(0,0,0,.30),inset 0 1px 0 var(--panel-edge);
}
.clock-fmt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-bottom:1px solid var(--line);
}
.clock-fmt-label{font-size:8.5px;font-weight:700;letter-spacing:.22em;color:var(--ink-faint)}
.fmt-switch{
  display:flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;
}
.fmt-opt{font-size:8.5px;font-weight:700;letter-spacing:.1em;padding:4px 8px;color:var(--ink-faint)}
.fmt-switch[data-mode="12"] .fmt-12,
.fmt-switch[data-mode="24"] .fmt-24{background:var(--accent);color:var(--accent-ink)}
.clock-zones{display:grid;padding:5px;max-height:min(300px,52dvh);overflow-y:auto}
.clock-zone{
  display:flex;align-items:center;gap:9px;
  padding:8px 9px;border-radius:6px;text-align:left;
  font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--ink-soft);
}
.clock-zone:hover{background:var(--row-hover);color:var(--ink)}
.clock-zone i{width:6px;height:6px;border-radius:2px;border:1.5px solid var(--line-strong);flex:none}
.clock-zone.is-on{color:var(--ink)}
.clock-zone.is-on i{background:var(--accent);border-color:var(--accent)}

/* ============ STAGE / VIEW SWITCH ============ */
.stage{flex:1;display:grid;grid-template-columns:1fr;align-items:stretch;padding:0;gap:0;min-height:0}
.side{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch}
body[data-view="play"] #view-scribe{display:none}
body[data-view="scribe"] #view-play{display:none}
body[data-view="split"] .stage{grid-template-columns:minmax(400px,36vw) minmax(0,1fr)}
body[data-view="split"] #view-play,
body[data-view="split"] #view-scribe{display:flex}

/* ============ THE MACHINE (full-bleed face) ============ */
.side-play{overflow:hidden}
.device{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding:9px clamp(18px,3vw,28px) 0;
  box-shadow:inset calc(var(--tx) * -2px) calc(1.5px - var(--ty) * 1.5px) 0 var(--face-edge);
}

/* top plate */
.plate-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:2px;flex:none}
.etch{font-weight:700;font-stretch:108%;letter-spacing:.08em;font-size:13px;color:var(--ink-soft);margin-top:3px}
.oled{
  margin-left:auto;background:var(--oled);border-radius:6px;
  min-width:132px;max-width:172px;padding:7px 9px 6px;
  text-align:left;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 6px rgba(0,0,0,.9),calc(var(--tx) * -1px) calc(1px - var(--ty) * 1px) 0 var(--face-edge);
  position:relative;
}
/* the sheen on the glass. Pointer events off and aria hidden: it is light, not
   an element, and it must never come between a finger and the display. */
.oled::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(calc(105deg + var(--tx) * 40deg),transparent 38%,rgba(255,255,255,.05) 50%,transparent 62%);
  opacity:calc(.35 + var(--ty) * .25);
}
.oled:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 2px 6px rgba(0,0,0,.9),0 1px 0 var(--face-edge)}
.oled-row1{
  color:var(--oled-text);font-weight:800;font-stretch:105%;letter-spacing:.05em;
  font-size:17px;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.oled-row1.is-rec{color:var(--accent)}
.oled-row2{display:flex;align-items:center;justify-content:space-between;margin-top:3px;gap:8px}
.oled-tc{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--oled-text);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.oled-take{
  font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--oled);
  background:var(--oled-text);border-radius:3px;padding:0 4px;line-height:1.5;
}

/* left rail — the vertical seek fader (same anatomy as the old
   horizontal seek strip: groove, fill, ticks, rectangle handle) */
.rail{
  position:absolute;left:6px;top:120px;bottom:calc(var(--key-h) + 128px);width:26px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  font-size:7px;letter-spacing:.05em;color:var(--ink-faint);
}
.rail-dn em{font-style:normal;display:block;text-align:center;font-size:7px}
.arm{
  flex:1;width:6px;margin-block:6px;border-radius:3px;position:relative;
  cursor:grab;touch-action:none;
  background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.12));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 1px 0 var(--face-edge);
}
.arm:active{cursor:grabbing}
.arm::before{content:"";position:absolute;inset:0 -11px}  /* touch target */
.arm:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.arm-fill{position:absolute;left:0;right:0;top:0;height:0;border-radius:3px 3px 0 0;background:var(--accent);opacity:.6;pointer-events:none}
.rail-tick{position:absolute;left:50%;width:14px;height:1.5px;transform:translate(-50%,-50%);background:var(--line-strong);pointer-events:none}
.rail-mark{position:absolute;left:50%;width:5px;height:5px;transform:translate(-50%,-50%) rotate(45deg);background:var(--accent);pointer-events:none}
.arm-pivot{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:22px;height:9px;border-radius:3px;
  background:var(--metal-btn);
  box-shadow:inset 0 1px 0 var(--face-edge),0 2px 5px rgba(0,0,0,.4);
  pointer-events:none;
}
.arm-pivot::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.5px;transform:translateY(-50%);background:var(--accent)}

/* the maker's mark: the full Knight helm, borderless, tone-on-tone;
   hover glows in the theme accent, click visits knightaiav.com */
.badge-rec{
  position:absolute;right:10px;top:114px;width:30px;height:30px;
  display:grid;place-items:center;
}
.helm{
  width:28px;height:28px;display:block;background:var(--ink-faint);
  -webkit-mask:url(helm-mask.png) center/contain no-repeat;
  mask:url(helm-mask.png) center/contain no-repeat;
  transition:background .2s var(--ease-out),filter .2s var(--ease-out);
}
.badge-rec:hover .helm,
.badge-rec.is-live .helm{
  background:var(--accent);
  filter:drop-shadow(0 0 7px var(--accent));
}
.badge-rec.is-live .helm{animation:helmGlow 1.2s ease-in-out infinite}
@keyframes helmGlow{0%,100%{filter:drop-shadow(0 0 3px var(--accent))}50%{filter:drop-shadow(0 0 10px var(--accent))}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,68,14,.55)}55%{box-shadow:0 0 0 7px rgba(226,68,14,0)}}

/* the reel */
.disc-well{flex:1;display:grid;place-items:center;padding:6px 0 4px;min-height:0}
.disc{
  --rot:0deg;
  /* sized against the well it lives in, never the viewport — a vh-based
     size ignores the app's own chrome and overflows on short screens */
  position:relative;width:min(84vw,430px);max-width:100%;max-height:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--disc-hi) 0%,var(--disc-lo) 78%);
  box-shadow:
    inset 0 1px 0 var(--face-edge),
    inset 0 -3px 8px rgba(0,0,0,.2),
    0 2px 6px rgba(0,0,0,.25),
    0 0 0 1px var(--line);
  transform:rotate(calc(var(--rot) + var(--over,0deg)));   /* --over: the give past either end of the tape */
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  outline-offset:6px;
}
.disc:active{cursor:grabbing}
.disc::after{ /* sheen that spins with the disc */
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,transparent 0deg,rgba(255,255,255,.10) 40deg,transparent 95deg,transparent 200deg,rgba(255,255,255,.05) 250deg,transparent 300deg);
}
.disc-groove{position:absolute;inset:9px;border-radius:50%;border:1px solid var(--line);opacity:.6}
.disc-hairline{
  position:absolute;left:50%;top:5.5%;bottom:5.5%;width:1px;margin-left:-.5px;
  background:var(--line-strong);transform:rotate(45deg);transform-origin:center;
}
/* stationary controls at the disc corners (the old etched labels, made real) */
.disc-ctl{
  position:absolute;z-index:3;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--ink-soft);padding:7px 11px;border-radius:16px;
  border:1px solid transparent;
}
.disc-ctl:hover{color:var(--ink);border-color:var(--line-strong)}
.disc-ctl.is-on{color:var(--accent);border-color:var(--accent)}
.ctl-speed{left:4%;top:9%}
.ctl-back{left:4%;bottom:8%}   /* right-bottom corner belongs to +/− */
.disc-well{position:relative}
/* the record label: session name + take/date, spinning with the platter */
.disc-label{
  position:absolute;left:50%;transform:translateX(-50%);
  text-align:center;pointer-events:none;
  max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.disc-name{
  bottom:calc(50% + 18.5%);
  font-weight:700;font-stretch:108%;letter-spacing:.16em;font-size:11px;color:var(--ink-soft);
}
.disc-date{
  top:calc(50% + 18.5%);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-faint);
}
.hub{cursor:pointer}
.hub:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* the hub is quilted: a diamond lattice of stitched seams (dark groove +
   light bevel), a soft puff in every diamond, and a glint at every stitch
   point. Geometry comes from two tiny SVG masks; every colour is a theme
   token, so each colorway quilts in its own leather. */
.hub{
  --qt:20%;   /* quilt tile, relative to the square: five tiles across */
  position:absolute;inset:0;margin:auto;width:31%;aspect-ratio:1;border-radius:26%;
  isolation:isolate;overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,var(--hub-puff,rgba(255,255,255,.17)),rgba(255,255,255,0) 56%) 0 0/var(--qt) var(--qt),
    radial-gradient(circle at 0% 50%,var(--hub-puff,rgba(255,255,255,.17)),rgba(255,255,255,0) 56%) 0 0/var(--qt) var(--qt),
    radial-gradient(circle at 42% 28%,var(--hub-hi),var(--hub-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 5px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.28);
}
.hub::before,.hub::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:var(--qt) var(--qt);mask-size:var(--qt) var(--qt);
}
/* Tone on tone: seams and stitch points are a darker shade of the unit's
   own leather, the bevel a faint lighter edge of it. On Silver the stitch
   points glint white; on the dark units they sink into the seams. Which
   layer carries the dots is a per-theme token. */
.hub{
  --hub-mask-seams:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0L16 16M16 0L0 16' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  --hub-mask-bevel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0L16 16M16 0L0 16' stroke='%23000' stroke-opacity='.45' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --hub-mask-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='%23000'%3E%3Ccircle cx='8' cy='8' r='1.35'/%3E%3Ccircle cx='0' cy='0' r='1.35'/%3E%3Ccircle cx='16' cy='0' r='1.35'/%3E%3Ccircle cx='0' cy='16' r='1.35'/%3E%3Ccircle cx='16' cy='16' r='1.35'/%3E%3C/g%3E%3C/svg%3E");
}
/* the grooves (and, on the dark units, the stitch points) */
.hub::before{
  background:var(--hub-seam,rgba(0,0,0,.42));
  -webkit-mask-image:var(--hub-mask-seams),var(--hub-dots-dark,none);
  mask-image:var(--hub-mask-seams),var(--hub-dots-dark,none);
}
/* the bevels (the same seams, a hair below and right) and, on Silver, the glints */
.hub::after{
  background:var(--hub-stitch);
  -webkit-mask-image:var(--hub-mask-bevel),var(--hub-dots-light,var(--hub-mask-dots));
  mask-image:var(--hub-mask-bevel),var(--hub-dots-light,var(--hub-mask-dots));
  -webkit-mask-position:1px 1px,0 0;mask-position:1px 1px,0 0;
}
[data-theme="dark"] .hub,[data-theme="crimson"] .hub,[data-theme="emerald"] .hub{
  --hub-dots-dark:var(--hub-mask-dots);   /* stitch points sink into the seams */
  --hub-dots-light:none;
}
.screw{
  position:absolute;z-index:1;width:8px;height:8px;border-radius:50%;   /* above the quilting */
  background:radial-gradient(circle at 35% 30%,#e8eaeb,#a9adaf);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5),0 1px 1px rgba(255,255,255,.25);
}
[data-theme="dark"] .screw{background:radial-gradient(circle at 35% 30%,#3a3d3f,#141617)}
.screw::after{content:"";position:absolute;left:1.5px;right:1.5px;top:50%;height:1px;background:rgba(0,0,0,.55);transform:rotate(28deg)}
.screw.s1{left:16%;top:16%}
.screw.s2{right:13%;top:44%}
.screw.s3{left:30%;bottom:12%}


/* transport — pinned to the bottom edge, thumb reach */
.transport{
  position:relative;display:flex;align-items:stretch;gap:10px;flex:none;
  margin:10px calc(-1 * clamp(18px,3vw,28px)) 0;
  padding:12px 18px calc(16px + env(safe-area-inset-bottom)) 26px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,0) 30%);
}
.jack{position:absolute;left:-1px;top:38%;width:7px;height:26px;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.08));}
.key{
  flex:1;height:var(--key-h);border-radius:10px;
  background:var(--metal-btn);
  box-shadow:
    inset calc(var(--tx) * -1.5px) calc(1.5px - var(--ty) * 1.2px) 0 var(--face-edge),
    inset calc(var(--tx) * 2px) calc(-3px + var(--ty) * 2px) 5px rgba(0,0,0,.18),
    calc(var(--tx) * -3px) calc(5px - var(--ty) * 2.5px) 9px rgba(0,0,0,.28);
  display:grid;place-items:center;color:var(--ink-soft);
  transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out);
}
.key:active,.key.is-down{
  transform:translateY(2px) scale(.985);
  box-shadow:inset 0 1px 0 var(--face-edge),inset 0 2px 5px rgba(0,0,0,.25),inset 0 -1px 2px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.3);
}
.key svg{width:17px;height:17px}
.glyph-rec{width:17px;height:17px;border-radius:50%;background:var(--accent);box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.3)}
.key-rec.is-live .glyph-rec{animation:pulse 1.1s ease-in-out infinite}
/* the analog needle VU: instant attack, eased fall, a peak tick that
   sinks at a constant rate. Tap opens the gain panel. */
.vu{
  width:78px;height:56px;align-self:center;margin-left:4px;position:relative;
  display:grid;place-items:end center;cursor:pointer;border-radius:8px;
}
.vu:hover{background:var(--row-hover)}
.vu svg{width:78px;height:52px;overflow:visible}
.vu-tick{stroke:var(--line-strong);stroke-width:1.4}
.vu-tick.is-major{stroke-width:2}
.vu-red{stroke:var(--accent);stroke-width:2.6;opacity:.85}
.vu-needle{stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.vu.is-hot .vu-needle{stroke:var(--accent)}
.vu-peaktick{stroke:var(--accent);stroke-width:2;opacity:0}
.vu-hubdot{fill:var(--ink-soft)}

/* gain panel — vertical meter + the one knob */
.gainpop{
  position:absolute;right:14px;bottom:calc(var(--key-h) + 34px);z-index:28;
  width:230px;border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;
  background:var(--panel);
  box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 var(--panel-edge);
}
.gp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--ink-soft);
}
.gp-body{display:flex;gap:14px;padding:12px 14px 8px}
.gp-meter{
  position:relative;width:14px;height:150px;border-radius:7px;flex:none;
  background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.14));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 1px 0 var(--panel-edge);
  overflow:hidden;
}
.gp-fill{
  position:absolute;left:2px;right:2px;bottom:2px;height:0;border-radius:5px;
  background:linear-gradient(0deg,var(--accent),var(--accent) 70%,color-mix(in srgb,var(--accent) 55%,var(--ink)) 100%);
}
.gp-peak{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--ink);opacity:0}
.gp-right{flex:1;display:grid;justify-items:center;gap:6px;min-width:0}
.gp-knob{
  width:58px;height:58px;border-radius:50%;position:relative;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 36% 30%,var(--face-hi),var(--face-lo));
  box-shadow:inset 0 1px 0 var(--face-edge),inset 0 -3px 6px rgba(0,0,0,.3),0 4px 9px rgba(0,0,0,.35),0 0 0 1px var(--line);
}
.gp-knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gp-pointer{
  position:absolute;left:50%;top:5px;width:2.5px;height:15px;border-radius:2px;
  background:var(--accent);
  transform-origin:50% 24px;
  transform:translateX(-50%) rotate(var(--ga,-135deg));
  transition:transform .12s var(--ease-out);
}
/* panels arrive, they don't appear */
@keyframes popIn{from{opacity:0;transform:translateY(5px) scale(.97)}to{opacity:1;transform:none}}
.gainpop,.shelf,.clock-menu{animation:popIn .18s var(--ease-out)}
.gp-val{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.05em}
.gp-tag{font-size:7.5px;font-weight:700;letter-spacing:.18em;color:var(--ink-faint);text-align:center}
.gp-db{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.gp-db b{font-family:var(--font-mono);font-size:30px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gp-db em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink-faint)}
.gp-stats{display:flex;gap:12px;font-size:8.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-faint)}
.gp-stats b{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.gp-note{
  padding:8px 12px;border-top:1px solid var(--line);text-align:center;
  font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--ink-soft);
}
.gp-note.is-warn{color:var(--accent)}


.deck-status{
  position:absolute;left:clamp(20px,3vw,30px);bottom:calc(var(--key-h) + 96px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;color:var(--ink-faint);
  display:flex;gap:9px;align-items:center;font-variant-numeric:tabular-nums;
}

/* load-a-file + the permanent clear X */
.loadbox{
  position:absolute;right:clamp(18px,3vw,28px);bottom:calc(var(--key-h) + 94px);
  display:flex;align-items:center;gap:7px;z-index:4;
}
.load-btn{
  font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:6px;padding:5px 9px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.04));
}
.load-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.load-name{
  font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);
  max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.load-x{
  width:23px;height:23px;border-radius:6px;display:grid;place-items:center;
  color:#e5484d;border:1.5px solid rgba(229,72,77,.55);font-size:11px;line-height:1;
  transition:background .15s var(--ease-out),color .15s var(--ease-out);
}
.load-x:hover{background:#e5484d;color:#fff;border-color:#e5484d}
.empty-note-soft{font-size:10px;letter-spacing:.06em;color:var(--ink-faint);font-weight:600;max-width:420px}

/* ============ SHUTTLE BAR ============ */
.shuttle{
  display:flex;align-items:center;gap:10px;flex:none;
  margin-top:8px;padding:0 2px;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
@property --tilt{syntax:'<angle>';initial-value:0deg;inherits:true}
@property --shL{syntax:'<number>';initial-value:0;inherits:true}
@property --shR{syntax:'<number>';initial-value:0;inherits:true}
.sh-track{
  position:relative;flex:1;height:38px;min-width:0;
  display:flex;align-items:center;cursor:pointer;touch-action:none;
  perspective:1400px;   /* whisper of depth — never a slide */
  transition:--tilt .3s var(--ease-out),--shL .3s var(--ease-out),--shR .3s var(--ease-out);
}
.sh-track.is-live{transition:none}   /* while held, everything follows the finger */
.sh-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.sh-groove{display:none}   /* nothing peeks out from under the plank */
.sh-plank{
  position:absolute;inset:0;border-radius:9px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  background:var(--metal-btn);
  box-shadow:inset 0 1px 0 var(--face-edge),inset 0 -2px 4px rgba(0,0,0,.2),0 3px 7px rgba(0,0,0,.3);
  transform:rotateY(var(--tilt,0deg));transform-origin:50% 50%;
  pointer-events:none;
}
.sh-plank::before{   /* the pressed half falls into shade — the click-in */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,var(--shL,0)) 0%, transparent 42%,
    transparent 58%, rgba(0,0,0,var(--shR,0)) 100%);
}
.sh-cue{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-soft);transition:color .12s,text-shadow .12s;
}
.sh-cue.is-on{color:var(--accent);text-shadow:0 0 8px var(--accent-soft)}
.sh-pivot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,var(--face-hi),var(--face-lo));
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5),0 0 0 1px var(--line);
}
.deck-status .is-hot{color:var(--accent)}
.deck-sep{opacity:.5}

/* ============ THE SCRIBE (the machine's big display, full bleed) ============ */
.scribe-panel{
  position:relative;
  flex:1;display:flex;flex-direction:column;min-height:0;width:100%;
  overflow:hidden;
  background:var(--panel);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.10);
}
/* BUBBLE FITTING (his rule, 2026-09-05): a pill is a bubble around ONE line.
   Nothing wraps inside one, every bubble in a row is the same height, and the
   row wraps or a label ellipses rather than a bubble growing a second line.
   "LOCAL · ENGINE" and "AUTO · LOS ANGELES" used to break across two lines
   inside their bubbles, which made three different pill heights in one row. */
.scribe-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-x,12px);row-gap:var(--gap-y,8px);flex-wrap:wrap;
  padding:9px 16px;border-bottom:1px solid var(--line);
}
/* THE SEARCH BELONGS IN THE MIDDLE OF THE HEADER, not on the right edge. It
   used to be the first child of .scribe-meta, so it rode the pills over to the
   right and read as one more chip rather than the transcript's own control.
   Its own column, with the title and the pills given equal flex-basis, puts it
   on the panel's centre line. */
.scribe-title{display:flex;align-items:baseline;gap:var(--gap-x,12px);min-width:0;flex:1 1 0}
.scribe-find{display:flex;align-items:center;gap:8px;justify-content:center;flex:0 0 auto;min-width:0}
.scribe-session{font-weight:800;font-stretch:110%;letter-spacing:.1em;font-size:12.5px;white-space:nowrap;flex:none}
.scribe-date{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.scribe-meta{display:flex;gap:var(--gap-x,12px);row-gap:var(--gap-y,8px);flex-wrap:wrap;justify-content:flex-end;align-items:center;min-width:0;flex:1 1 0}
.pill{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:20px;padding:0 10px;
  display:inline-flex;align-items:center;gap:6px;
  min-height:var(--pill-h,26px);box-sizing:border-box;flex:0 0 auto;max-width:100%;
  white-space:nowrap;
}
/* the label inside a bubble gives way before the bubble does */
.pill>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill-live{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.pill-live i{width:6px;height:6px;border-radius:50%;background:var(--accent-ink);animation:pulse 1.1s infinite}

.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 14px;min-height:0}
.scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* topic blocks */
.topic{border-bottom:1px solid var(--line)}
.topic:last-child{border-bottom:0}
.topic-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:baseline;gap:12px;
  padding:12px 18px 9px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topic-mark{width:8px;height:8px;border-radius:2px;background:var(--accent);align-self:center;flex:none}
.topic-range{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--ink-faint);letter-spacing:.06em;flex:none;font-variant-numeric:tabular-nums}
.topic-title{font-weight:800;font-stretch:108%;letter-spacing:.07em;font-size:12.5px;text-transform:uppercase;min-width:0}
.topic-title.is-pending{color:var(--ink-faint);font-weight:600;letter-spacing:.05em}

.row{
  display:flex;gap:14px;align-items:baseline;
  padding:7px 18px 7px 15px;border-left:3px solid transparent;
  cursor:pointer;
}
.row:hover{background:var(--row-hover)}
.row.is-active{border-left-color:var(--accent);background:var(--accent-soft)}
.row.is-played .row-text{color:var(--ink)}
.row-tc{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);flex:none;padding-top:2px;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.row.is-active .row-tc{color:var(--accent);font-weight:600}
.row-text{font-size:14px;line-height:1.5;color:var(--ink-soft);font-weight:450}
.row.is-interim .row-text{font-style:italic;color:var(--ink-faint)}

/* recap card (auto-summary on STOP) */
.recap{
  margin:14px 16px 6px;border:1.5px solid var(--accent);border-radius:12px;overflow:hidden;
  background:var(--accent-soft);
}
.recap-head{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:var(--accent);color:var(--accent-ink);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;
}
.recap-head .rc-tc{margin-left:auto;font-family:var(--font-mono);font-weight:600;letter-spacing:.05em}
.recap-body{padding:10px 14px 12px;display:grid;gap:7px}
.recap-body p{font-size:13.5px;line-height:1.5;color:var(--ink)}
.recap-body p::before{content:"— ";color:var(--accent);font-weight:700}
.recap-body .is-pend{color:var(--accent);letter-spacing:.16em;font-size:11px;font-weight:800;animation:pulse 1.4s infinite}
.recap-body .is-pend::before{content:""}

/* the whole take: the summary card that STOP writes, above the chapters */
.sum{margin:14px 16px 6px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel-edge);overflow:hidden}
.sum-head{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--ink)}
.sum-head .rc-tc{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--accent);font-weight:600}
.sum-pend{margin:0;padding:12px 14px;font-size:12px;letter-spacing:.06em;color:var(--ink-faint);animation:pulse 1.4s infinite}
.sum-points{margin:0;padding:10px 14px 4px 30px;display:grid;gap:6px}
.sum-points li{font-size:14px;line-height:1.5;color:var(--ink)}
.sum-points li::marker{color:var(--accent)}
.sum-acts{padding:8px 14px 12px;border-top:1px solid var(--line);margin-top:8px}
.sum-label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;color:var(--accent);margin-bottom:6px}
.sum-acts ul{margin:0;padding-left:16px;display:grid;gap:5px}
.sum-acts li{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.sum-acts li::marker{color:var(--accent)}

/* empty state */
.empty{
  display:grid;place-items:center;gap:14px;padding:70px 20px;text-align:center;
}
.empty-glyph{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center}
.empty-glyph i{width:15px;height:15px;border-radius:50%;background:var(--accent)}
.empty p{font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--ink-faint)}
.empty button{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:8px 16px}
.empty button:hover{background:var(--accent);color:var(--accent-ink)}

.scribe-foot{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.1em;color:var(--ink-faint);font-weight:600;
}
/* mini transport for the scribe view (mobile/tablet — the deck is off-screen there) */
.foot-keys{display:none;gap:6px}
.fk{
  width:36px;height:27px;border-radius:7px;
  background:var(--metal-btn);
  box-shadow:inset 0 1px 0 var(--face-edge),inset 0 -1.5px 3px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.22);
  display:grid;place-items:center;color:var(--ink-soft);
  transition:transform .1s var(--ease-out),box-shadow .1s var(--ease-out);
}
.fk:active,.fk.is-down{transform:translateY(1.5px);box-shadow:inset 0 1px 0 var(--face-edge),0 1px 2px rgba(0,0,0,.25)}
.fk svg{width:9px;height:11px}
.fk-rec i{display:block;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.fk-rec.is-live i{animation:pulse 1.1s ease-in-out infinite}
@media (max-width:1099px){.foot-keys{display:flex}}
.foot-state{font-family:var(--font-mono);letter-spacing:.12em}
.foot-state.is-hot{color:var(--accent)}
.foot-hint{margin-inline:auto;text-align:center}
.foot-actions{display:flex;gap:var(--gap-y,6px);flex-wrap:wrap;justify-content:flex-end;align-items:center}
.mini{white-space:nowrap;flex:0 0 auto}
.mini{
  font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:6px;padding:0 9px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.04));
  /* one height for every one of them: the lock glyph on a Pro button used to
     make three different heights in the same row */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--mini-h,24px);box-sizing:border-box;line-height:1;
}
.mini:hover{color:var(--ink);border-color:var(--line-strong)}
.mini-danger:hover{color:var(--accent);border-color:var(--accent)}

/* ============ COLOPHON ============ */
.colophon{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;flex:none;
  padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  font-size:9px;font-weight:600;letter-spacing:.22em;color:var(--ink-faint);
}
/* the colophon version opens the release log, so it reads as a control */
#verColo{cursor:pointer;border-bottom:1px dotted var(--ink-faint);transition:color .15s}
#verColo:hover,#verColo:focus-visible{color:var(--ink);border-bottom-color:var(--accent);outline:none}
.colophon-sep{opacity:.5}

/* ============ RESPONSIVE ============ */
@media (max-width:720px){
  .chrome{flex-wrap:wrap;gap:10px;row-gap:7px}
  .chrome-right{margin-left:auto}
  .tabs{order:3;width:100%;margin:0}
  .tab{flex:1;padding:6px 0;text-align:center;font-size:10.5px}
  .scribe-head{padding:8px 12px;row-gap:7px}
  :root{--key-h:74px}   /* the keys grow as the platter shrinks: thumb-sized */
  .oled{min-width:118px}
  .scribe-foot .foot-hint{display:none}
  .scribe-foot{padding:8px 12px 4px}   /* the recording line beneath it carries the safe-area inset */
  /* one short line, never a column of single words (the foot's status wrapped on the iPhone) */
  .foot-state{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* THE EXPORT ROW MUST WRAP, NOT RUN OFF THE PHONE. `flex:0 0 auto` told it
     never to shrink, so it took its full content width (366 px inside a 320 px
     screen) and its own flex-wrap never engaged: CLR, AUDIO and CSV sat past
     the right edge, unreachable, which is exactly what "export needs UI work"
     meant. Allowed to shrink and given a full row of its own, it wraps onto as
     many lines as it needs and every button can be tapped. */
  /* THE EXPORT ROW MUST WRAP, NOT RUN OFF THE PHONE. `flex:0 0 auto` told it
     never to shrink, so it took its full content width (366 px inside a 320 px
     screen) and its own flex-wrap never engaged: CLR sat 200 px past the right
     edge, unreachable. Allowed to shrink and given a row of its own, it wraps
     onto as many lines as it needs. Proof: demo/mobile-reach.mjs. */
  .foot-actions{flex:1 1 100%;min-width:0;justify-content:flex-start;row-gap:6px}
  .scribe-foot{flex-wrap:wrap}
  .colophon{display:none}
  .disc{width:min(70vw,400px)}   /* a notch smaller than the face: room for bigger controls, clears the rail and the helm */
  .scribe-head{flex-wrap:wrap;row-gap:9px;padding:12px 14px}
  .scribe-title{flex:1 1 100%;min-width:0}
  .scribe-date{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scribe-meta{flex:1;justify-content:flex-end}
  #tzPill{display:none}   /* the clock chip already shows the zone */
  #txtBtn,#copyBtn{display:none}   /* CSV covers mobile export; TXT/COPY live on desktop */
  .scribe-find{flex:1 1 auto;justify-content:flex-start;min-width:0}
  .find{flex:1;min-width:0;max-width:220px}
  .find:focus{width:auto}
}
/* THE RULE ON PHONES (either way up): nothing floats. Every deck control is
   a normal flex row in the device column, so overlap is structurally
   impossible regardless of screen size. Only the thin rail and the helm
   badge stay absolute — both live in reserved margins. */
@media (max-width:720px), ((orientation:landscape) and (max-height:560px)){
  .plate-top{order:0}
  .disc-well{order:1}
  .loadbox{
    position:static;order:2;right:auto;bottom:auto;
    justify-content:flex-end;margin:6px 2px 0;
  }
  .deck-status{
    position:static;order:3;left:auto;right:auto;bottom:auto;
    display:block;margin:5px 2px 0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .deck-status>*{margin-right:9px}
  .deck-diag{order:3}
  .shuttle{order:4}
  .transport{order:5;padding:12px 14px 4px 14px;gap:8px}   /* the recording line beneath it carries the safe-area inset */
  .rec-line{order:6}
  .jack{display:none}
  .vu{width:78px;margin-left:0}
  .rail{top:110px;bottom:calc(var(--key-h) + 200px)}
  .sh-track{height:48px}   /* thumb-sized seesaw */
  /* everything around the smaller platter steps up a size: bigger type,
     bigger targets, the same margins */
  .key svg{width:19px;height:19px}
  .key .glyph-rec{transform:scale(1.12)}
  .load-btn{font-size:10.5px;padding:9px 13px;border-radius:8px}
  .load-x{width:32px;height:32px;font-size:13px;border-radius:8px}
  .disc-ctl{font-size:12.5px;padding:9px 14px}
  .deck-status{font-size:11px}
  .oled{min-width:132px;padding:8px 11px 7px}
  .oled-row1{font-size:19px}
  .oled-tc{font-size:13px}
  .rail{width:30px}
  .rail-up,.rail-dn,.rail-dn em{font-size:8px}
  .ctl-speed{left:42px;top:1%}      /* clear of the rail, clear of the platter's rim */
  .ctl-back{left:42px;bottom:1%}
}
/* ============ THE DESK, ON A DESKTOP: ONE GRID ============
   The status line and LOAD used to be pinned with `bottom: calc(var(--key-h)
   + 96px)`, a guess at where the shuttle would end up. Narrow the column or
   shorten the window and both slid on top of the plank (2026-09-05, his
   screenshot: LOAD sitting over the fast-forward cue). Nothing here is pinned
   any more. Five rows; the status and LOAD share a row as two columns, so
   they cannot reach each other or the shuttle at any size, and the platter
   takes exactly the room the rest does not want. Phones and a phone on its
   side keep their own layouts below. */
@media (min-width:721px) and (min-height:561px){
  .device{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto minmax(0,1fr) auto auto auto auto;
    grid-template-areas:
      "plate     plate"
      "disc      disc"
      "status    load"
      "diag      diag"
      "shuttle   shuttle"
      "transport transport";
    row-gap:6px;
  }
  .plate-top{grid-area:plate;margin-bottom:0}
  .disc-well{grid-area:disc;min-height:0;padding:2px 0}
  .deck-status{grid-area:status;position:static;left:auto;right:auto;bottom:auto;justify-self:start;align-self:center;margin:0}
  .loadbox{grid-area:load;position:static;left:auto;right:auto;bottom:auto;justify-self:end;align-self:center;margin:0;max-width:100%}
  .deck-diag{grid-area:diag;align-self:start;margin:0}
  .shuttle{grid-area:shuttle;margin-top:2px}
  .transport{grid-area:transport;margin-top:2px}
  .rec-line{grid-column:1 / -1}
  /* the platter is measured against its own row, not the viewport, so it
     fills the space that is actually there instead of leaving a hole */
  .disc-well{container-type:size}
  .side-play .disc,
  body[data-view="split"] .side-play .disc{width:min(92cqw,92cqh,540px);height:auto}
  /* the rail's reserved gutter now ends where the bottom stack begins */
  .rail{bottom:calc(var(--key-h) + 150px)}
}
@supports not (container-type:size){
  @media (min-width:721px) and (min-height:561px){
    .side-play .disc,
    body[data-view="split"] .side-play .disc{width:min(38vw,52dvh,540px)}
  }
}

/* desktop: both faces open side by side — tabs are a mobile/tablet control */
@media (min-width:1100px){
  .tabs{display:none}
  .side-scribe{border-left:1px solid var(--line)}
  body[data-view="split"] .side-play .disc{width:min(26vw,min(430px,48dvh))}
}
/* a phone turned sideways mirrors the desktop: machine left, transcript right */
@media (orientation:landscape) and (max-height:560px) and (min-width:640px){
  .tabs{display:none}
  .side-scribe{border-left:1px solid var(--line)}
  body[data-view="split"] .stage{grid-template-columns:minmax(300px,46vw) minmax(0,1fr)}
  /* the machine is re-plated for the short screen: the platter sits at
     left beside a stack of OLED / LOAD / status, then the rocker, then the
     transport — everything scaled to fit the height with no scrolling */
  .side-play{overflow:hidden auto;-webkit-overflow-scrolling:touch}
  .device{
    flex:none;min-height:100%;padding:6px 14px 0 14px;
    display:grid;column-gap:10px;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr auto auto auto;
    grid-template-areas:
      "disc plate"
      "disc load"
      "disc status"
      "disc diag"
      "shuttle shuttle"
      "transport transport"
      "recline recline";
  }
  .rec-line{grid-area:recline;margin:0 -14px}
  .plate-top{grid-area:plate;margin:0;padding-right:34px}   /* leaves the helm its corner */
  .etch{display:none}   /* the OLED names the machine on this plate */
  .oled{margin-left:0;max-width:none;width:100%;box-sizing:border-box}
  .badge-rec{top:10px;right:8px}
  .disc-well{grid-area:disc;align-self:center;margin-left:24px;padding:0}   /* clears the rail */
  .loadbox{grid-area:load;margin:6px 0 0;justify-content:flex-start}
  .deck-status{grid-area:status;margin:6px 0 0;font-size:9px}
  .deck-diag{grid-area:diag;align-self:start}
  .shuttle{grid-area:shuttle;margin-top:6px}
  .transport{grid-area:transport;margin:6px -14px 0;padding:8px 10px 4px}   /* full-bleed to the column edges, no further; the recording line beneath carries the inset */
  .colophon{display:none}
  body[data-view="split"] .side-play .disc{width:clamp(110px,38dvh,200px)}
  /* sideways there is no corner room: speed and back-ten sit under the platter */
  .disc-well{padding-bottom:38px}
  .ctl-speed{left:0;top:auto;bottom:0}
  .ctl-back{left:auto;right:0;top:auto;bottom:0}
  .sh-track{height:40px}
  .vu{width:60px}
  :root{--key-h:56px}
  .rail{top:64px;bottom:calc(var(--key-h) + 108px)}
  .helm{width:22px;height:22px}
  /* the transcript foot keeps only what fits: mini transport, mark, csv */
  .scribe-foot .foot-hint{display:none}
  #txtBtn,#copyBtn,#tzPill{display:none}
  .scribe-foot{padding:8px 12px 4px}
  body[data-view="split"] .side-scribe .scribe-panel{padding-top:10px}
}
/* the turn itself: columns slide open and the second face fades in */
.stage{transition:grid-template-columns .42s cubic-bezier(.2,.7,.2,1)}
@keyframes faceIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}   /* slides in from the seam, never past the screen edge */
body[data-view="split"] #view-scribe{animation:faceIn .42s cubic-bezier(.2,.7,.2,1) both}

/* ============ SESSION SHELF (opens from the OLED) ============ */
.shelf{
  position:absolute;right:clamp(16px,3vw,26px);top:74px;z-index:30;
  width:min(320px,86vw);
  border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;
  background:var(--panel);
  box-shadow:0 18px 44px rgba(0,0,0,.35),inset 0 1px 0 var(--panel-edge);
}
.shelf-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--line);
  font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--ink-soft);
}
/* A CLOSE BUTTON A THUMB CAN ACTUALLY HIT. This was 17x19 px, less than half
   Apple's 44 px guidance, on the session list and the input panel: the two
   panels a phone user opens and closes most. The glyph stays small; the
   TARGET grows around it, so nothing looks different and everything is
   catchable. Measured by demo/mobile-reach.mjs, which fails any control under
   a thumb-sized box. */
.shelf-x{
  color:var(--ink-faint);font-size:11px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;padding:0;margin:-6px -6px -6px 0;border-radius:8px;
}
@media (hover:none){.shelf-x{min-width:44px;min-height:44px;margin:-10px -10px -10px 0}}
.shelf-x:hover{color:var(--ink)}
.shelf-name{display:flex;gap:7px;padding:10px 12px;border-bottom:1px solid var(--line)}
.shelf-name input{
  flex:1;min-width:0;background:none;border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--ink);text-transform:uppercase;
}
.shelf-name input::placeholder{color:var(--ink-faint);letter-spacing:.12em}
.shelf-name input:focus{outline:none;border-color:var(--accent)}
.shelf-list{max-height:220px;overflow-y:auto;padding:5px}
.shelf-item{
  position:relative;display:grid;gap:2px;
  padding:8px 30px 8px 10px;border-radius:7px;border-left:3px solid transparent;cursor:pointer;
}
.shelf-item:hover{background:var(--row-hover)}
.shelf-item.is-active{border-left-color:var(--accent);background:var(--accent-soft)}
.shelf-item-name{font-size:11px;font-weight:800;letter-spacing:.08em}
.shelf-item-name em{font-style:normal;font-size:8px;letter-spacing:.18em;color:var(--accent);margin-left:6px}
.shelf-item-meta{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);letter-spacing:.05em}
.shelf-del{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:10px;padding:5px;border-radius:5px;
}
.shelf-del:hover{color:var(--accent)}
.shelf-empty{padding:16px 12px;font-size:9.5px;letter-spacing:.16em;color:var(--ink-faint);text-align:center}
/* the shelf's three verbs: STORE and NEW come with Pro, WIPE is everyone's */
.shelf-actions{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line)}
.shelf-act{
  position:relative;padding:12px 6px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--accent);
  border-right:1px solid var(--line);
}
.shelf-act:last-child{border-right:0}
.shelf-act:hover{background:var(--accent);color:var(--accent-ink)}
.shelf-act.is-danger{color:#e5484d}
.shelf-act.is-danger:hover{background:#e5484d;color:#fff}
.shelf-act[disabled]{opacity:.35;pointer-events:none}
.shelf-act em{display:none;position:absolute;top:4px;right:6px;font-family:var(--font-mono);font-style:normal;font-size:7px;letter-spacing:.18em;padding:1px 4px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.shelf-act.is-locked{color:var(--ink-faint)}
.shelf-act.is-locked em{display:block}
.shelf-act.is-locked:hover{background:var(--row-hover);color:var(--ink)}
.shelf-item.is-live .shelf-item-meta{color:var(--accent)}

/* ============ SEARCH / FIND ============ */
.find{
  width:120px;background:none;border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--ink);transition:width .18s;
  -webkit-appearance:none;appearance:none;
}
.find::placeholder{color:var(--ink-faint)}
.find:focus{outline:none;border-color:var(--accent);width:170px}
.find-count{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--accent);white-space:nowrap}
/* an empty match count still ate its flex gap, which pushed the field 4px
   right of the centre line it is supposed to sit on */
.find-count:empty{display:none}
.row-text mark{background:var(--accent);color:var(--accent-ink);border-radius:2px;padding:0 2px}

/* ============ MARKERS ============ */
.row.is-marker .row-text{color:var(--accent);font-weight:700;letter-spacing:.1em;font-size:11.5px}
.row.is-marker .row-tc{color:var(--accent)}

/* ============ LIVE FOLLOW ============ */
.live-jump{
  position:absolute;left:50%;bottom:56px;transform:translateX(-50%);z-index:5;
  background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:7px 16px;
  font-size:10px;font-weight:800;letter-spacing:.16em;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  animation:pulse 1.4s infinite;
}

/* recap card is a control now */
.recap{cursor:pointer;transition:transform .12s}
.recap:hover{transform:translateY(-1px)}
.recap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* listening / notes in the empty state */
.empty-glyph.is-live i{animation:pulse 1.1s infinite}
.empty-interim{font-style:italic;color:var(--ink-soft);font-size:13px;letter-spacing:0;font-weight:450;max-width:420px}
.empty-note{color:var(--accent);font-size:10px;letter-spacing:.08em;font-weight:700;max-width:420px;line-height:1.6}

/* ============ FAULT OVERLAY ============ */
.alarm{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(8,8,10,.28);
  backdrop-filter:blur(16px) saturate(.75);-webkit-backdrop-filter:blur(16px) saturate(.75);
  animation:alarmIn .28s var(--ease-out);cursor:pointer;
}
.alarm.is-out{animation:alarmOut .3s var(--ease-out) forwards}
@keyframes alarmIn{from{opacity:0}to{opacity:1}}
@keyframes alarmOut{from{opacity:1}to{opacity:0}}
.alarm-card{display:grid;gap:12px;justify-items:center;text-align:center;max-width:480px}
.alarm-title{
  font-weight:800;font-stretch:110%;letter-spacing:.22em;font-size:clamp(20px,5vw,30px);
  color:#e5484d;text-shadow:0 0 26px rgba(229,72,77,.45);
}
.alarm-body{font-size:13px;line-height:1.65;color:#f2f3f4;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* ============ ONBOARDING — the privacy story over a blurred deck ============ */
.onboard{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:color-mix(in srgb,var(--face-lo) 72%,transparent);
  backdrop-filter:blur(18px) saturate(.8);-webkit-backdrop-filter:blur(18px) saturate(.8);
  animation:alarmIn .32s var(--ease-out);
  padding:24px clamp(20px,6vw,48px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.onboard.is-out{animation:alarmOut .3s var(--ease-out) forwards}
.ob-stage{
  position:relative;display:grid;gap:26px;justify-items:center;
  width:min(520px,100%);text-align:center;
}
.ob-slide{
  grid-area:1/1;display:grid;gap:14px;justify-items:center;align-content:center;
  min-height:min(300px,46dvh);
  opacity:0;transform:translateY(10px) scale(.985);pointer-events:none;
  /* the outgoing slide snaps away (.1s) so rapid taps never stack ghosts;
     the incoming one still fades up */
  transition:opacity .1s linear,transform .1s linear;
}
.ob-slide.is-on{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
.ob-kicker{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.34em;
  color:var(--accent);
}
.ob-title{
  font-weight:800;font-stretch:112%;letter-spacing:.1em;line-height:1.18;
  font-size:clamp(22px,5.6vw,34px);color:var(--ink);margin:0;
}
.ob-body{
  font-size:13.5px;line-height:1.75;color:var(--ink-soft);font-weight:500;
  max-width:44ch;margin:0;
}
/* the start card: his logo, the name, and what the machine can do */
.ob-logo{
  width:clamp(88px,22vw,120px);height:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.ob-name{font-size:clamp(30px,8vw,44px);letter-spacing:.16em;margin-top:2px}
.ob-start .ob-body{max-width:38ch}
/* the start card says what the machine is, what it does, and one true
   line about where everything stays */
.ob-what{margin:4px 0 0;font-size:clamp(15px,4.2vw,18px);line-height:1.5;color:var(--ink);font-weight:600;max-width:34ch}
.ob-tag{margin-top:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--accent)}
.empty-sub{margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-faint);font-weight:500;max-width:32ch;text-align:center}
.ob-can{
  list-style:none;margin:6px 0 0;padding:0;display:grid;gap:7px;
  width:min(360px,100%);text-align:left;
}
.ob-can li{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:10px;
  padding:7px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  box-shadow:inset 0 0 0 1px var(--line);
}
.ob-can b{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--accent);white-space:nowrap}
.ob-can span{font-size:11.5px;color:var(--ink-soft);font-weight:500}
/* generated card art: brushed metal on slate, the palette of the deck */
.ob-art{
  width:min(400px,100%);height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08);
}
.ob-dots{display:flex;gap:8px}
.ob-dot{
  width:7px;height:7px;border-radius:50%;background:var(--line-strong);
  transition:background .25s var(--ease-out),transform .25s var(--ease-out);
}
.ob-dot.is-on{background:var(--accent);transform:scale(1.25)}
.ob-nav{display:flex;gap:12px;align-items:center}
.ob-next{
  font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--accent-ink,#fff);
  background:var(--accent);border-radius:10px;padding:13px 34px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:transform .12s var(--ease-out);
}
.ob-next:active{transform:translateY(2px)}
.ob-skip{
  font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--ink-faint);
  padding:13px 16px;border-radius:10px;
}
.ob-skip:hover{color:var(--ink-soft)}

.deck-diag{
  font-family:var(--font-mono);font-size:8px;letter-spacing:.04em;color:var(--ink-faint);
  margin:2px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8;
  display:none;   /* engineering codes stay off the face until something goes wrong (cognitive load) */
}
body.is-diag .deck-diag{display:block}
.load-btn.is-off{opacity:.35;pointer-events:none}   /* LOAD steps back while the tape rolls */
/* touch: every small control gets a finger-sized target (Fitts) */
@media (pointer:coarse){
  .chip,.load-btn,.load-x,.disc-ctl,.mini,.tab{min-height:38px}
  .load-x{min-width:38px}
  .chip-full{min-width:38px}
}
.deck-diag-foot{flex:1;min-width:0;text-align:right}
.brand-ver{
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;
  color:var(--ink-faint);align-self:flex-end;margin-bottom:2px;cursor:pointer;
}
.brand-ver:hover{color:var(--ink-soft)}
.alarm-act{
  font-size:12px;font-weight:800;letter-spacing:.16em;color:#fff;
  border:1.5px solid rgba(255,255,255,.85);border-radius:9px;padding:12px 22px;
  background:rgba(255,255,255,.12);cursor:pointer;
}
.alarm-act:active{background:rgba(255,255,255,.28)}
.alarm-hint{font-size:9px;font-weight:800;letter-spacing:.26em;color:rgba(242,243,244,.55);animation:pulse 1.6s infinite}

/* reduced motion */
/* ============ LEARNING THE MACHINE: cap, ?, onboarding nav, tour, help ============ */
/* The help control asks before it teaches: a question mark in the colorway's
   own accent, and the graduation cap settles onto it on hover. Both glyphs sit
   in the SAME grid cell so nothing reflows and the chrome never shifts by a
   pixel; only opacity and transform move, so it stays on the compositor. The
   cap arrives from slightly above with a little tilt, which reads as a cap
   being put on rather than a plain cross-fade. */
.chip-cap{display:grid;place-items:center;width:34px;height:28px;padding:0;color:var(--ink-faint);cursor:pointer}
.chip-cap>*{grid-area:1/1}
/* ONE CONTINUOUS SWAP, not two animations that happen to overlap.
   The first version cross-faded in .18s over a .34s springy transform, so a
   quick pointer across the chrome caught it mid-flight and it read as a
   flicker: both glyphs at half opacity, the cap bouncing, and the whole thing
   snapping back. Three changes fix it.

   The two glyphs share ONE duration and ONE curve, so at every instant of the
   swap their opacities sum to the same amount and there is no muddy middle.
   The spring is gone: an overshoot is charming on a slow deliberate hover and
   is jitter on a fast one, and this control gets both. And it is slower, .34s
   rather than .18s, because the thing being asked for is smoothness and a
   swap the eye can follow is what smooth means here. */
.chip-cap .cap-q,.chip-cap .cap{
  transition:opacity .34s var(--ease-in-out),transform .34s var(--ease-in-out),filter .34s var(--ease-in-out);
}
.chip-cap .cap-q{
  font-family:var(--font-mono);font-size:15px;font-weight:800;line-height:1;
  color:var(--accent);
  opacity:1;transform:none;
}
.chip-cap .cap{
  width:20px;height:15px;display:block;color:var(--accent);
  opacity:0;transform:translateY(-5px) rotate(-9deg) scale(.9);
}
.chip-cap:hover .cap-q,.chip-cap:focus-visible .cap-q{opacity:0;transform:translateY(4px) scale(.82)}
.chip-cap:hover .cap,.chip-cap:focus-visible .cap{
  opacity:1;transform:none;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 55%,transparent));
}
/* the swap still happens, it just does not fly */
@media (prefers-reduced-motion:reduce){
  .chip-cap .cap-q,.chip-cap .cap{transition:opacity .12s linear}
  .chip-cap .cap{transform:none}
  .chip-cap:hover .cap-q,.chip-cap:focus-visible .cap-q{transform:none}
}
.mini-q{min-width:30px;font-weight:800;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
/* onboarding: arrows either side of a centered SKIP; tap or swipe moves forward */
.ob-hint{font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;color:var(--ink-faint)}
.ob-nav{display:grid;grid-template-columns:44px auto 44px;gap:14px;align-items:center;justify-content:center}
.ob-arrow{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;color:var(--ink-soft);border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.05));
  transition:color .15s var(--ease-out),border-color .15s var(--ease-out),opacity .15s var(--ease-out);
}
.ob-arrow:hover{color:var(--ink);border-color:var(--ink-faint)}
.ob-arrow[disabled]{opacity:.3;pointer-events:none}
.ob-arrow.is-go{color:var(--accent-ink,#fff);background:var(--accent);border-color:transparent;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.ob-cap{width:64px;height:48px;color:var(--accent);filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent))}
.ob-go,.help-go{
  font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--accent-ink,#fff);
  background:var(--accent);border-radius:10px;padding:13px 30px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:transform .12s var(--ease-out);
}
.ob-go:active,.help-go:active{transform:scale(.97)}
.help-alt{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--ink-soft);padding:13px 16px;border-radius:10px;border:1px solid var(--line-strong)}
.help-alt:hover{color:var(--ink);border-color:var(--ink-faint)}
/* the tour: everything dims except one control, lit by a hole in the shade */
.tour{position:fixed;inset:0;z-index:70;animation:alarmIn .25s var(--ease-out);cursor:pointer}
.tour.is-out{animation:alarmOut .25s var(--ease-out) forwards}
.tour-spot{
  position:fixed;left:0;top:0;width:0;height:0;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,7,8,.74),0 0 0 2px var(--accent),0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);
  transition:left .42s var(--ease-out),top .42s var(--ease-out),width .42s var(--ease-out),height .42s var(--ease-out),border-radius .42s var(--ease-out);
}
/* CENTRED BY MARGIN, NEVER BY TRANSFORM. This card used to sit at left:50%
   with transform:translateX(-50%), and it shared the `cardIn` entrance with
   every other card. That animation ends on `transform:none` and is declared
   `both`, so its final frame PERSISTS and wiped the centring the moment the
   entrance finished. The card's LEFT edge then sat at the middle of the
   screen and the rest ran off the right: on a phone that put SKIP and half
   the text past the edge, which is what shipped. It was invisible on a wide
   desktop because 220 px of overhang still had room to land.
   Rule worth keeping: an element that is positioned by transform cannot also
   be animated by transform. left/right plus auto margins centres it without
   spending the one property the animation needs. */
/* CENTRED BY MARGIN, NEVER BY TRANSFORM. This card sat at left:50% with
   transform:translateX(-50%) and shared the `cardIn` entrance, which ends on
   `transform:none` and is declared `both`, so its final frame PERSISTS and
   wiped the centring the moment the entrance finished. The card's left edge
   then sat at the middle of the screen and the rest ran off the right: 171 px
   off a 390 px phone, from step one. Invisible on a wide desktop, where the
   overhang still had room to land.
   An element positioned by transform cannot also be animated by transform. */
.tour-card{
  position:fixed;left:0;right:0;margin-inline:auto;width:min(440px,calc(100vw - 24px));
  display:grid;gap:8px;padding:16px 18px 14px;border-radius:14px;cursor:default;
  background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);
  box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 1px 0 var(--panel-edge);
  transition:top .42s var(--ease-out),bottom .42s var(--ease-out);
}
.tour-card.is-top{top:max(12px,env(safe-area-inset-top));bottom:auto}
.tour-card.is-bottom{bottom:max(12px,env(safe-area-inset-bottom));top:auto}
.tour-count{font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;color:var(--accent)}
.tour-title{margin:0;font-weight:800;font-stretch:110%;letter-spacing:.14em;font-size:15px;color:var(--ink)}
.tour-body{margin:0;font-size:13px;line-height:1.6;color:var(--ink-soft);font-weight:500}
.tour-nav{display:grid;grid-template-columns:40px auto 40px;gap:10px;align-items:center;justify-content:center;margin-top:4px}
.tour-arrow{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--ink-soft);border:1px solid var(--line-strong)}
.tour-arrow:hover{color:var(--ink);border-color:var(--ink-faint)}
.tour-arrow[disabled]{opacity:.3;pointer-events:none}
.tour-arrow.is-go{color:var(--accent-ink,#fff);background:var(--accent);border-color:transparent}
.tour-skip{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--ink-faint);padding:10px 12px;border-radius:8px}
.tour-skip:hover{color:var(--ink-soft)}
.tour-hint{font-family:var(--font-mono);font-size:8px;letter-spacing:.28em;color:var(--ink-faint);text-align:center}
/* help + the ? tip: the same blurred sheet as the story */
.help,.tip{
  position:fixed;inset:0;z-index:65;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--face-lo) 72%,transparent);
  backdrop-filter:blur(18px) saturate(.8);-webkit-backdrop-filter:blur(18px) saturate(.8);
  animation:alarmIn .28s var(--ease-out);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.help.is-out,.tip.is-out{animation:alarmOut .25s var(--ease-out) forwards}
.help-card,.tip-card{
  position:relative;display:grid;gap:12px;justify-items:center;text-align:center;
  width:min(480px,100%);padding:26px 22px 20px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:0 22px 50px rgba(0,0,0,.45),inset 0 1px 0 var(--panel-edge);
}
.help-close{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;color:var(--ink-faint);font-size:12px}
.help-close:hover{color:var(--ink)}
.help-cap,.tip-cap{width:54px;height:40px;color:var(--accent)}
.help-title{margin:0;font-weight:800;letter-spacing:.16em;font-size:24px;color:var(--ink)}
.help-what{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-soft);font-weight:500;max-width:40ch}
.help-release{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);max-width:44ch}
/* the account: identity and plan, in the cap panel */
.acct{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);max-width:44ch}
.acct-state{margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink)}
.acct-pitch{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.acct-pitch b{color:var(--ink);font-weight:700}
.acct-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acct-btn{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--ink);padding:11px 14px;border-radius:10px;border:1px solid var(--line-strong);background:var(--metal-btn);cursor:pointer}
.acct-btn.is-go{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.acct-btn:hover{filter:brightness(1.05)}
.acct-form{display:flex;flex-direction:column;gap:8px}
.acct-in{font:inherit;font-size:13px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--panel-edge);color:var(--ink)}
.acct-link{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);background:none;border:0;padding:6px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.acct-link.is-danger{color:#c0392b}
.acct-who{margin:0;font-size:12.5px;color:var(--ink-soft)}
.acct-msg{margin:0;font-size:11.5px;color:var(--accent);min-height:1em}
#acctBtn{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-soft);padding:6px 9px;border-radius:999px;border:1px solid var(--line-strong);background:none;cursor:pointer}
#acctBtn.is-pro{color:var(--accent);border-color:var(--accent)}
@media (max-width:720px){#acctBtn{display:none}}
.help-release-line{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);font-style:italic}
.help-copy{align-self:flex-start;padding:9px 12px}
.help-actions,.tip-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.help-form{display:grid;gap:9px;width:100%;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.help-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;color:var(--accent)}
.help-kinds{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.help-kinds label{position:relative}
.help-kinds input{position:absolute;opacity:0;pointer-events:none}
.help-kinds span{display:inline-block;padding:7px 12px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ink-soft);border:1px solid var(--line);cursor:pointer}
.help-kinds input:checked+span{color:var(--accent-ink,#fff);background:var(--accent);border-color:transparent}
.help-text,.help-contact{
  width:100%;border-radius:10px;border:1px solid var(--line-strong);background:var(--oled);color:var(--oled-text);
  font:500 13px/1.5 var(--font-ui);padding:10px 12px;resize:vertical;
}
.help-text:focus,.help-contact:focus{outline:2px solid var(--accent);outline-offset:1px}
.help-send-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.help-status{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-soft);text-align:left}
.help-status.is-ok{color:#2fb36b}
.help-status.is-bad{color:#e5484d}
.help-send{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--accent-ink,#fff);background:var(--accent);border-radius:9px;padding:11px 22px}
.help-send[disabled]{opacity:.5}
/* the ticket: a reference somebody has to be able to read off a screen and type
   back a week later, so it is mono, large, and one tap to copy */
.ticket-open{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--face-lo)}
.ticket-open b{font-size:10px;letter-spacing:.22em;color:var(--ink-faint);font-family:var(--font-mono)}
.ticket-ref{align-self:flex-start;font-family:var(--font-mono);font-size:19px;letter-spacing:.12em;font-weight:700;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.ticket-ref.is-copied::after{content:" COPIED";font-size:10px;letter-spacing:.18em;color:var(--ink-faint)}
.ticket-open small{font-size:11.5px;line-height:1.4;color:var(--ink-faint)}
.ticket-check{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ticket-check label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--ink-faint);margin-bottom:6px}
.ticket-row{display:flex;gap:8px;flex-wrap:wrap}
.ticket-row input{flex:1 1 150px;min-width:0;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--face-lo);color:var(--ink)}
.ticket-out{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.ticket-out b{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--ink-faint);display:block;margin-bottom:4px}
.ticket-out .is-bad{color:var(--rec)}
.help-fine{font-size:10.5px;line-height:1.5;color:var(--ink-faint);max-width:44ch}
.tip-body{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-soft);font-weight:500;max-width:36ch}
.tip-body b{color:var(--ink)}
/* the version tag is a button: what's new, and a red pulse when a newer
   D-REC is out (tap goes straight to TestFlight) */
.brand-ver{cursor:pointer;border-radius:6px;padding:2px 6px;margin-left:2px;transition:color .2s var(--ease-out),background .2s var(--ease-out)}
.brand-ver:hover{color:var(--ink);background:var(--row-hover)}
.brand-ver.is-update{
  color:#fff;background:#e5484d;font-weight:800;letter-spacing:.16em;
  box-shadow:0 0 0 0 rgba(229,72,77,.5);animation:updatePulse 1.6s ease-in-out infinite;
}
@keyframes updatePulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}

/* SHARE. One row per way out, each saying what it will actually do rather
   than naming a protocol. The rows are big enough to hit with a thumb because
   this is reached most often on a phone. */
.share-card{max-width:460px;text-align:left;justify-items:stretch}
.share-card .help-label,.share-card .help-title{text-align:center;justify-self:center}
.share-rows{display:grid;gap:9px;margin-top:4px}
.share-row{display:grid;gap:4px;text-align:left;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 45%,transparent);
  cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.share-row:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.share-row:active{transform:scale(.985)}
.share-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.share-row b{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink)}
.share-row i{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.share-btn{margin-left:8px}
@media (max-width:430px){.share-btn{margin-left:6px}}

.wn-card{max-width:520px;text-align:left;justify-items:stretch}
.wn-card .help-label,.wn-card .help-title{text-align:center;justify-self:center}
.wn-state{display:grid;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--panel) 60%,transparent)}
.wn-state.is-behind{border-color:#e5484d;background:color-mix(in srgb,#e5484d 12%,var(--panel))}
.wn-state.is-current{border-color:color-mix(in srgb,#2fb36b 55%,var(--line-strong))}
.wn-state-line{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--ink-soft)}
.wn-state.is-behind .wn-state-line{color:#e5484d;font-weight:700}
.wn-state.is-current .wn-state-line{color:#2fb36b}
.wn-state-body{margin:0;font-size:13px;line-height:1.6;color:var(--ink)}
.wn-go{justify-self:start;font-size:11px;font-weight:800;letter-spacing:.2em;color:#fff;background:#e5484d;border-radius:9px;padding:11px 20px;box-shadow:0 6px 18px rgba(229,72,77,.35)}
.wn-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;max-height:min(46dvh,420px);overflow:auto;-webkit-overflow-scrolling:touch}
.wn-rel{display:grid;gap:5px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 40%,transparent)}
.wn-rel.is-here{border-color:var(--accent)}
.wn-rel-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wn-rel-v{font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--ink)}
.wn-rel-date{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--ink-faint)}
.wn-rel-here{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.24em;color:var(--accent)}
.wn-rel-new{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.24em;color:#e5484d}
.wn-rel ul{margin:0;padding-left:16px;display:grid;gap:3px}
.wn-rel li{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
/* a softer alarm for good news: accent instead of red, no fault buzz */
.alarm.is-info .alarm-title{color:var(--accent);text-shadow:0 0 26px color-mix(in srgb,var(--accent) 45%,transparent)}

/* reduced motion yields fades, not nothing: every move collapses to an
   instant, opacity and colour still ease briefly, nothing loops */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .help,.tip,.onboard,.tour,.alarm,.help-card,.tip-card,.am-card,.alarm-card,.am-step,.ob-slide{transition-duration:.2s!important;animation-duration:.2s!important}
  .sh-track.is-inviting,.chip-theme.is-inviting{animation:none!important}
}

/* ============ TEXTURE ON THE OPEN SPACE ============
   Every colorway may paint a texture on the chassis (the open space around
   the controls), never on the buttons: a fixed layer under the stage. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:var(--bg-tex,none);opacity:var(--bg-tex-o,1)}

/* ============ THE GEAR ============ */
.chip-gear{width:30px;height:28px;padding:0;display:grid;place-items:center;color:var(--ink-soft)}
.chip-gear svg{width:17px;height:17px;transition:transform .5s var(--ease-out)}
.chip-gear:hover{color:var(--ink)}
.chip-gear:hover svg{transform:rotate(60deg)}
.chip-gear.is-open{color:var(--accent);border-color:var(--accent)}
.chip-gear.is-open svg{transform:rotate(180deg)}

/* ============ THE PANELS, READABLE ============ */
.learn-card,.set-card,.themes-card{width:min(540px,100%);padding:26px 26px 22px;gap:16px;justify-items:stretch;text-align:left}
.help-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.learn-card .help-what{font-size:15px;line-height:1.65;color:var(--ink);max-width:40ch}
.learn-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.learn-tips li{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.learn-tips b{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--accent)}
.learn-tips span{font-size:14px;line-height:1.55;color:var(--ink)}
.learn-card .help-fine,.set-card .help-fine{font-size:12px;line-height:1.55;color:var(--ink-faint);max-width:none}
.set-gear{width:44px;height:44px}
.set-sec{display:flex;flex-direction:column;gap:10px;padding:16px 0 4px;border-top:1px solid var(--line)}
.set-h{margin:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.32em;color:var(--accent);font-weight:700}
.set-p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.set-p b{color:var(--ink)}
.set-card .acct-state{font-size:11px}
.set-card .acct-who{font-size:13px;color:var(--ink)}
.set-card .acct-btn{padding:12px 16px;font-size:11px}
.set-card .help-release-line{font-size:13.5px;padding:12px 14px;border-radius:10px;background:var(--panel-edge);border:1px solid var(--line)}
.set-card .help-form{margin:0;padding:0;border:0}
.set-card .help-kinds{justify-content:flex-start}
.set-ver{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-faint)}
.set-about{padding-bottom:0}
.set-card .help-fine a{color:var(--ink-soft)}
@media (max-width:520px){.learn-tips li{grid-template-columns:1fr;gap:3px}}

/* ============ THE DOOR (account modal) ============ */
.modal{z-index:70;padding:16px}
.am-card{
  position:relative;width:min(400px,100%);padding:32px 28px 24px;border-radius:22px;display:grid;align-items:start;overflow:hidden;
  transition:height .34s var(--ease-out);
  background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:0 34px 80px rgba(0,0,0,.55),inset 0 1px 0 var(--panel-edge);
}
.am-step{
  grid-area:1/1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);filter:blur(3px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),filter .3s var(--ease-out),visibility 0s linear .3s;
}
.am-step.is-on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}
.am-logo{width:56px;height:56px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.am-title{margin:0;font-weight:800;letter-spacing:.14em;font-size:20px;color:var(--ink)}
.am-body{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:32ch}
.am-body b{color:var(--ink)}
.am-stack{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.am-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;border-radius:12px;
  font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--ink);
  border:1px solid var(--line-strong);background:var(--metal-btn);cursor:pointer;
  transition:transform .15s var(--ease-out),filter .15s;
}
.am-btn:hover{filter:brightness(1.06)}
.am-btn:active{transform:scale(.985)}
.am-btn.is-go{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.am-btn.is-apple{background:#000;color:#fff;border-color:#000}
.am-btn.is-google{background:#fff;color:#1f1f1f;border-color:#dadce0}
.am-btn svg{width:18px;height:18px;flex:none}
.am-btn small{font-weight:700;letter-spacing:.12em;font-size:9px;opacity:.8;margin-left:2px}
/* the divider at the door: sign in above it, buy below it */
.am-or{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 10px}
.am-or::before,.am-or::after{content:"";flex:1;height:1px;background:var(--line)}
.am-or span{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--ink-faint)}
.am-google-host{display:flex;justify-content:center;min-height:0}
.am-later{background:none;border:0;font-size:12px;letter-spacing:.08em;color:var(--ink-soft);padding:6px 10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.am-later:hover{color:var(--ink)}
.am-back{position:absolute;left:12px;top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-soft);padding:8px 10px;border-radius:8px}
.am-back:hover{color:var(--ink)}
.am-fine{margin:4px 0 0;font-size:11px;line-height:1.5;color:var(--ink-faint);max-width:34ch}
.am-fine a{color:var(--ink-soft)}
.am-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.am-in{font:inherit;font-size:15px;padding:13px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--panel-edge);color:var(--ink);text-align:center;width:100%}
.am-in:focus{outline:2px solid var(--accent);outline-offset:1px}
.am-code{font-family:var(--font-mono);font-size:26px;letter-spacing:.42em;text-indent:.42em;padding:12px}
.am-msg{margin:0;min-height:1.2em;font-size:12px;line-height:1.4;color:var(--accent)}
.am-check{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-size:30px;font-weight:800;animation:amPop .5s var(--ease-out)}
@keyframes amPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.modal.is-busy .am-btn{opacity:.6;pointer-events:none}

/* ============ THE COLORWAY PICKER ============ */
/* TWENTY FIVE COLORWAYS HAVE TO BE SCANNABLE, NOT SCROLLED THROUGH. At a 148px
   minimum the sheet ran three tiles wide and about 1900px tall, so choosing a
   colorway meant a long scroll past the one you wanted. The tile is a preview,
   not a page: shrinking it to 112px puts five or six on a row and the whole
   set within about a screen, which is what makes it feel like a palette. The
   swatch and the type come down with it so the tile keeps its proportions
   rather than becoming a small box with big text in it. */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;width:100%}
.theme-tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:7px;border-radius:10px;border:1px solid var(--line);background:var(--panel-edge);cursor:pointer;text-align:left;transition:transform .15s var(--ease-out),border-color .15s}
.theme-tile:hover{transform:translateY(-1px);border-color:var(--line-strong)}
.theme-tile.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.theme-swatch{height:32px;border-radius:7px;display:grid;grid-template-columns:3fr 2fr 1fr;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.theme-swatch i{display:block}
.theme-name{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-lock{position:absolute;top:5px;right:5px;font-family:var(--font-mono);font-size:7px;letter-spacing:.16em;padding:2px 5px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.theme-tile.is-locked .theme-swatch{filter:saturate(.7)}

/* ============ THE ROCKER SAYS IT CAN BE PRESSED ============
   ridges machined into both ends of the plank, clear of the cues and the
   pivot; a rocking invitation on early launches; a caption until first use */
.sh-plank::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  /* one ridge per 1.5% of the plank, tiled from the left band's edge, so each
     band holds exactly fourteen whole ridges and neither edge cuts one */
  background:linear-gradient(90deg,rgba(0,0,0,.24) 0 26%,rgba(255,255,255,.085) 26% 44%,transparent 44% 100%) 19% 50%/1.5% 52% repeat-x;
  -webkit-mask:linear-gradient(90deg,transparent 0 19%,#000 19% 40%,transparent 40% 61%,#000 61% 82%,transparent 82% 100%);
  mask:linear-gradient(90deg,transparent 0 19%,#000 19% 40%,transparent 40% 61%,#000 61% 82%,transparent 82% 100%);
}
/* the press lights the plank where the thumb is: a soft lift that slides
   with the finger and breathes while it is held; the ridges show through it */
.sh-glow{
  position:absolute;top:0;bottom:0;left:var(--gx,50%);width:36%;
  transform:translateX(-50%);border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(58% 130% at 50% 45%,var(--accent-soft) 0%,rgba(255,255,255,.05) 45%,transparent 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:left .14s var(--ease-out),opacity .24s var(--ease-out);
}
.sh-track.is-live .sh-glow{opacity:1;animation:shBreath 1.5s ease-in-out infinite}
@keyframes shBreath{0%,100%{filter:brightness(1);transform:translateX(-50%) scaleY(1)}50%{filter:brightness(1.35);transform:translateX(-50%) scaleY(1.06)}}
@keyframes rockInvite{0%,100%{--tilt:0deg;--shL:0;--shR:0}22%{--tilt:-8deg;--shL:.3;--shR:0}50%{--tilt:0deg;--shL:0;--shR:0}72%{--tilt:8deg;--shL:0;--shR:.3}}
.sh-track.is-inviting{animation:rockInvite 2.4s ease-in-out 3}
.sh-hint{
  position:absolute;left:0;right:0;top:calc(100% + 3px);text-align:center;pointer-events:none;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;color:var(--accent);white-space:nowrap;
  animation:alarmIn .5s var(--ease-out);
}
.shuttle.has-hint{margin-bottom:12px}
/* On a narrow phone this line needs 365px inside a 335px box, and nowrap cut
   the last word off mid-sentence: it read "SLIDE IN TO SLO". It wraps and
   tightens instead, because a hint that is missing its verb is worse than a
   hint on two lines. */
@media (max-width:430px){
  .sh-hint{white-space:normal;letter-spacing:.10em;line-height:1.45;text-wrap:balance}
  .shuttle.has-hint{margin-bottom:22px}
}

/* ============ ELEVEN MORE COLORWAYS ============ */
/* FIRE: ember red chassis, the glow rises from below and breathes. Free. */
[data-theme="fire"]{
  --accent:#ff8b50;--accent-ink:#1a0500;--accent-soft:rgba(255,106,31,.16);
  --bg:#140503;
  --face-hi:#3d1108;--face-lo:#1e0804;--face-edge:rgba(255,170,120,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#4e170a 0%,#320c05 55%,#260803 100%);
  --disc-hi:#43140a;--disc-lo:#290a05;--hub-hi:#3a1108;--hub-lo:#1d0703;
  --hub-seam:rgba(0,0,0,.62);--hub-stitch:rgba(255,255,255,.09);--hub-puff:rgba(255,255,255,.07);
  --ink:#ffe7d6;--ink-soft:#f2a985;--ink-faint:#c89680;--line:rgba(255,160,110,.15);--line-strong:rgba(255,160,110,.3);
  --panel:#1b0705;--panel-edge:#2f0f08;--row-hover:rgba(255,160,110,.05);
  --bg-tex:radial-gradient(60% 46% at 50% 108%,rgba(255,110,30,.6),transparent 70%),radial-gradient(34% 30% at 16% 104%,rgba(255,180,50,.38),transparent 70%),radial-gradient(34% 30% at 84% 104%,rgba(235,40,20,.45),transparent 70%),radial-gradient(1.2px 1.2px at 20% 70%,rgba(255,200,120,.6),transparent 100%),radial-gradient(1px 1px at 63% 82%,rgba(255,170,80,.6),transparent 100%),radial-gradient(1.4px 1.4px at 44% 60%,rgba(255,120,40,.5),transparent 100%),radial-gradient(1px 1px at 80% 64%,rgba(255,200,120,.5),transparent 100%),radial-gradient(1.2px 1.2px at 32% 88%,rgba(255,150,60,.6),transparent 100%);
}
[data-theme="fire"] .screw{background:radial-gradient(circle at 35% 30%,#7a2a14,#1e0804)}
@keyframes emberBreath{0%,100%{opacity:.78}50%{opacity:1}}
[data-theme="fire"] body::after{animation:emberBreath 3.6s ease-in-out infinite}

/* NEON: blacks, an electric yellow, cyan light, a magenta bleed; scanlines and a grid on the chassis. Pro. */
[data-theme="neon"]{
  --accent:#fcee0a;--accent-ink:#0c0c0c;--accent-soft:rgba(252,238,10,.16);
  --bg:#08080d;
  --face-hi:#17171f;--face-lo:#0d0d13;--face-edge:rgba(0,240,255,.2);--face-shadow:0 26px 52px rgba(0,0,0,.65),0 0 24px rgba(0,240,255,.08);
  --metal-btn:linear-gradient(180deg,#22222d 0%,#151520 55%,#101018 100%);
  --disc-hi:#1b1b25;--disc-lo:#0f0f16;--hub-hi:#17171f;--hub-lo:#0a0a0f;
  --hub-seam:rgba(0,0,0,.7);--hub-stitch:rgba(0,240,255,.12);--hub-puff:rgba(255,255,255,.05);
  --ink:#e6fbff;--ink-soft:#5fd9e6;--ink-faint:#79a8b0;--line:rgba(0,240,255,.16);--line-strong:rgba(0,240,255,.34);
  --panel:#0b0b12;--panel-edge:#15151f;--row-hover:rgba(0,240,255,.05);
  --bg-tex:repeating-linear-gradient(0deg,rgba(0,240,255,.05) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(252,238,10,.045) 0 1px,transparent 1px 30px),repeating-linear-gradient(0deg,rgba(252,238,10,.045) 0 1px,transparent 1px 30px),radial-gradient(52% 40% at 84% 0%,rgba(0,240,255,.2),transparent 70%),radial-gradient(44% 34% at 8% 100%,rgba(255,0,60,.2),transparent 70%);
}
[data-theme="neon"] .screw{background:radial-gradient(circle at 35% 30%,#2a2a36,#0d0d13)}
[data-theme="neon"] .tab.is-active{text-shadow:0 0 14px rgba(252,238,10,.6)}

/* MIDNIGHT: navy with brass; a blueprint grid on the chassis. Pro. */
[data-theme="midnight"]{
  --accent:#d9a441;--accent-ink:#14100a;--accent-soft:rgba(217,164,65,.14);
  --bg:#0a1024;
  --face-hi:#1a2546;--face-lo:#101a35;--face-edge:rgba(190,205,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#24325d 0%,#172344 55%,#121c38 100%);
  --disc-hi:#1e2b4f;--disc-lo:#121d3a;--hub-hi:#1a2646;--hub-lo:#0d1530;
  --hub-seam:rgba(0,0,0,.62);--hub-stitch:rgba(255,255,255,.09);--hub-puff:rgba(255,255,255,.07);
  --ink:#e4eaf8;--ink-soft:#a9b8d9;--ink-faint:#96a1c0;--line:rgba(180,200,255,.14);--line-strong:rgba(180,200,255,.28);
  --panel:#0e1832;--panel-edge:#182547;--row-hover:rgba(180,200,255,.05);
  --bg-tex:repeating-linear-gradient(90deg,rgba(150,180,255,.07) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(150,180,255,.07) 0 1px,transparent 1px 26px),radial-gradient(60% 40% at 50% 0%,rgba(80,110,200,.22),transparent 70%);
}
[data-theme="midnight"] .screw{background:radial-gradient(circle at 35% 30%,#33446e,#101a35)}

/* PAPER: warm stock with terracotta; grain on the chassis. Pro. */
[data-theme="paper"]{
  --accent:#b3421e;--accent-ink:#fff;--accent-soft:rgba(179,66,30,.12);
  --bg:#f1ebe1;--bg-vign:none;
  --face-hi:#ece5d8;--face-lo:#d9d0bf;--face-edge:rgba(255,255,255,.9);--face-shadow:0 24px 48px rgba(60,45,30,.25),0 4px 10px rgba(60,45,30,.15);
  --metal-btn:linear-gradient(180deg,#f0e9dc 0%,#dfd6c5 55%,#d3c9b6 100%);
  --disc-hi:#eae3d5;--disc-lo:#d6cdbb;--hub-hi:#dbd1bd;--hub-lo:#c7bca6;--hub-stitch:rgba(255,255,255,.85);
  --ink:#2a2622;--ink-soft:#534d45;--ink-faint:#6f685f;--line:rgba(40,30,20,.16);--line-strong:rgba(40,30,20,.3);
  --panel:#f6f1e8;--panel-edge:#fcf9f3;--row-hover:rgba(40,30,20,.045);
  --bg-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 50% 0%,transparent 50%,rgba(90,70,40,.12) 100%);
}
[data-theme="paper"] .screw{background:radial-gradient(circle at 35% 30%,#efe8db,#bfb39c)}

/* GRAPHITE: cool grey with electric blue; brushed metal on the chassis. Pro. */
[data-theme="graphite"]{
  --accent:#5db1ff;--accent-ink:#041423;--accent-soft:rgba(58,160,255,.14);
  --bg:#2f3236;
  --face-hi:#4a4e54;--face-lo:#34383d;--face-edge:rgba(255,255,255,.18);--face-shadow:0 26px 52px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.45);
  --metal-btn:linear-gradient(180deg,#585c63 0%,#41454b 55%,#383c42 100%);
  --disc-hi:#4d5157;--disc-lo:#393d42;--hub-hi:#45494f;--hub-lo:#2d3035;
  --hub-seam:rgba(0,0,0,.6);--hub-stitch:rgba(255,255,255,.1);--hub-puff:rgba(255,255,255,.07);
  --ink:#eef0f2;--ink-soft:#bdc2c7;--ink-faint:#a9adb2;--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.28);
  --panel:#2a2d31;--panel-edge:#3a3e43;--row-hover:rgba(255,255,255,.05);
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.06),transparent 30%,transparent 70%,rgba(0,0,0,.14));
}
[data-theme="graphite"] .screw{background:radial-gradient(circle at 35% 30%,#6a6f76,#34383d)}

/* OLIVE: drab green with sand; canvas weave on the chassis. Pro. */
[data-theme="olive"]{
  --accent:#dcc78d;--accent-ink:#1e2010;--accent-soft:rgba(220,199,141,.14);
  --bg:#2b2f1e;
  --face-hi:#4a5033;--face-lo:#343824;--face-edge:rgba(240,240,210,.14);--face-shadow:0 26px 52px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.45);
  --metal-btn:linear-gradient(180deg,#575e3d 0%,#3f462b 55%,#363c25 100%);
  --disc-hi:#4c5237;--disc-lo:#363b27;--hub-hi:#454b31;--hub-lo:#2a2e1c;
  --hub-seam:rgba(0,0,0,.6);--hub-stitch:rgba(255,255,255,.09);--hub-puff:rgba(255,255,255,.06);
  --ink:#eef0dc;--ink-soft:#bfc49f;--ink-faint:#aaaf93;--line:rgba(230,235,200,.14);--line-strong:rgba(230,235,200,.28);
  --panel:#252919;--panel-edge:#343a24;--row-hover:rgba(230,235,200,.05);
  --bg-tex:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);
}
[data-theme="olive"] .screw{background:radial-gradient(circle at 35% 30%,#6a7150,#343824)}

/* ROSE GOLD: blush with rose metal; a dot grid on the chassis. Pro. */
[data-theme="rose"]{
  --accent:#b8746a;--accent-ink:#fff;--accent-soft:rgba(184,116,106,.14);
  --bg:#f3e4e2;--bg-vign:none;
  --face-hi:#eddad6;--face-lo:#dcc1bc;--face-edge:rgba(255,255,255,.9);--face-shadow:0 24px 48px rgba(90,50,45,.25),0 4px 10px rgba(90,50,45,.15);
  --metal-btn:linear-gradient(180deg,#f2dfdb 0%,#e0c6c1 55%,#d5b8b3 100%);
  --disc-hi:#ead6d2;--disc-lo:#d9bfba;--hub-hi:#dec5c0;--hub-lo:#caaca6;--hub-stitch:rgba(255,255,255,.85);
  --ink:#3a2a28;--ink-soft:#4e3a38;--ink-faint:#6d5856;--line:rgba(70,40,40,.16);--line-strong:rgba(70,40,40,.3);
  --panel:#f8ecea;--panel-edge:#fdf6f5;--row-hover:rgba(70,40,40,.045);
  --bg-tex:radial-gradient(rgba(120,70,60,.16) 1px,transparent 1.6px) 0 0/14px 14px,radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.5),transparent 70%);
}
[data-theme="rose"] .screw{background:radial-gradient(circle at 35% 30%,#f0dcd8,#b99691)}

/* ULTRAVIOLET: deep purple with violet neon; a diagonal hatch on the chassis. Pro. */
[data-theme="ultraviolet"]{
  --accent:#d092ff;--accent-ink:#1a0630;--accent-soft:rgba(199,125,255,.16);
  --bg:#140a24;
  --face-hi:#2c1a4a;--face-lo:#1c1033;--face-edge:rgba(220,190,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#382159 0%,#261541 55%,#1f1136 100%);
  --disc-hi:#2f1c4e;--disc-lo:#1e1237;--hub-hi:#291744;--hub-lo:#150b28;
  --hub-seam:rgba(0,0,0,.62);--hub-stitch:rgba(255,255,255,.09);--hub-puff:rgba(255,255,255,.07);
  --ink:#f0e7ff;--ink-soft:#c2aee0;--ink-faint:#ab9ac4;--line:rgba(210,180,255,.14);--line-strong:rgba(210,180,255,.3);
  --panel:#190e2c;--panel-edge:#271744;--row-hover:rgba(210,180,255,.05);
  --bg-tex:repeating-linear-gradient(45deg,rgba(200,130,255,.06) 0 2px,transparent 2px 12px),radial-gradient(50% 40% at 50% 100%,rgba(150,60,255,.22),transparent 70%);
}
[data-theme="ultraviolet"] .screw{background:radial-gradient(circle at 35% 30%,#4a2f74,#1c1033)}

/* ARCTIC: ice with cyan; frost on the chassis. Pro. */
[data-theme="arctic"]{
  --accent:#0f8fb0;--accent-ink:#fff;--accent-soft:rgba(15,143,176,.14);
  --bg:#e8f1f6;--bg-vign:none;
  --face-hi:#dbe8ef;--face-lo:#c4d5de;--face-edge:rgba(255,255,255,.92);--face-shadow:0 24px 48px rgba(30,60,80,.24),0 4px 10px rgba(30,60,80,.14);
  --metal-btn:linear-gradient(180deg,#e3eef4 0%,#cddce4 55%,#c1d1da 100%);
  --disc-hi:#dde9ef;--disc-lo:#c8d8e0;--hub-hi:#d0dee6;--hub-lo:#b8cad4;--hub-stitch:rgba(255,255,255,.9);
  --ink:#1e2c33;--ink-soft:#3f525e;--ink-faint:#5d6d75;--line:rgba(20,50,60,.16);--line-strong:rgba(20,50,60,.3);
  --panel:#f1f7fa;--panel-edge:#fafdfe;--row-hover:rgba(20,50,60,.045);
  --bg-tex:radial-gradient(rgba(255,255,255,.9) 1px,transparent 2px) 0 0/22px 22px,radial-gradient(rgba(255,255,255,.7) .6px,transparent 1.4px) 11px 9px/22px 22px,radial-gradient(60% 50% at 10% 0%,rgba(255,255,255,.8),transparent 70%);
}
[data-theme="arctic"] .screw{background:radial-gradient(circle at 35% 30%,#e9f2f7,#a9bec9)}

/* TERMINAL: phosphor green on black; raster lines on the chassis. Pro. */
[data-theme="terminal"]{
  --accent:#35ff6a;--accent-ink:#04140a;--accent-soft:rgba(53,255,106,.14);
  --bg:#040704;
  --face-hi:#11201a;--face-lo:#0a1410;--face-edge:rgba(53,255,106,.14);--face-shadow:0 26px 52px rgba(0,0,0,.65),0 0 20px rgba(53,255,106,.05);
  --metal-btn:linear-gradient(180deg,#182a20 0%,#0f1b15 55%,#0b1510 100%);
  --disc-hi:#11211a;--disc-lo:#08130e;--hub-hi:#0f1b15;--hub-lo:#050b08;
  --hub-seam:rgba(0,0,0,.7);--hub-stitch:rgba(53,255,106,.1);--hub-puff:rgba(255,255,255,.05);
  --ink:#d6ffe0;--ink-soft:#7fd69a;--ink-faint:#78ad88;--line:rgba(53,255,106,.14);--line-strong:rgba(53,255,106,.3);
  --panel:#07110c;--panel-edge:#0f1c14;--row-hover:rgba(53,255,106,.05);
  --bg-tex:repeating-linear-gradient(0deg,rgba(53,255,106,.05) 0 1px,transparent 1px 3px),radial-gradient(70% 60% at 50% 50%,transparent 50%,rgba(0,20,8,.7) 100%);
}
[data-theme="terminal"] .screw{background:radial-gradient(circle at 35% 30%,#1f3a2c,#0a1410)}
[data-theme="terminal"] .tab.is-active{text-shadow:0 0 12px rgba(53,255,106,.6)}

/* SUNSET: warm brown with amber; dusk bands on the chassis. Pro. */
[data-theme="sunset"]{
  --accent:#ffb347;--accent-ink:#2a1200;--accent-soft:rgba(255,179,71,.14);
  --bg:#26140b;
  --face-hi:#4a2a16;--face-lo:#33190d;--face-edge:rgba(255,220,180,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#5c341a 0%,#3f2211 55%,#361c0e 100%);
  --disc-hi:#4b2a16;--disc-lo:#351b0e;--hub-hi:#422414;--hub-lo:#25120a;
  --hub-seam:rgba(0,0,0,.62);--hub-stitch:rgba(255,255,255,.09);--hub-puff:rgba(255,255,255,.07);
  --ink:#ffe9d2;--ink-soft:#dfb391;--ink-faint:#bf9e83;--line:rgba(255,200,150,.14);--line-strong:rgba(255,200,150,.3);
  --panel:#21110a;--panel-edge:#331c10;--row-hover:rgba(255,200,150,.05);
  --bg-tex:linear-gradient(180deg,rgba(255,120,40,.22),transparent 42%,transparent 68%,rgba(80,20,60,.4)),radial-gradient(30% 24% at 50% 18%,rgba(255,190,80,.38),transparent 70%);
}
[data-theme="sunset"] .screw{background:radial-gradient(circle at 35% 30%,#7a4a2a,#33190d)}

/* the account card of the intro */
.ob-logo{width:64px;height:64px;border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.4);margin-bottom:4px}
.ob-account-row{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
.ob-later{background:none;border:0;font-size:11px;font-weight:700;letter-spacing:.18em;color:inherit;opacity:.65;padding:10px 14px;cursor:pointer}
.ob-later:hover{opacity:1}

/* ============ POLISH: MOTION, STATES, TARGETS ============
   The rules of the craft, applied everywhere at once. Enters scale up from
   .96 over 250 ms; exits are shorter, retrace the path and blur; feedback
   lands on pointer-down; every focus ring is the same ring; hover only
   exists for a real pointer; nothing on iOS is small enough to zoom. */
/* the card rises as it scales, so a dialog reads as opening rather than
   as the screen swapping. Phones override this with sheetIn. */
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cardOut{to{opacity:0;transform:translateY(-10px) scale(.98);filter:blur(4px)}}
.help-card,.tip-card,.am-card,.alarm-card,.tour-card{animation:cardIn var(--dur) var(--ease-out) both}
.help.is-out .help-card,.tip.is-out .tip-card,.help.is-out .am-card,.alarm.is-out .alarm-card{animation:cardOut var(--dur-fast) var(--ease-out) forwards}
.help.is-out,.tip.is-out,.tour.is-out,.alarm.is-out{animation-duration:.2s}
:where(button,[role="button"],[role="slider"],[role="tab"],[role="switch"],a,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chip,.acct-btn,.help-alt,.theme-tile,.am-later,.disc-ctl,.mini,.fk,.tab,.ob-arrow,.ob-skip,.help-close,.am-back,.help-send,.acct-link,.empty button{transition:transform var(--dur-fast) var(--ease-out),color .18s,border-color .18s,background-color .18s,box-shadow .18s}
.chip:active,.acct-btn:active,.help-alt:active,.theme-tile:active,.am-later:active,.disc-ctl:active,.mini:active,.tab:active,.ob-arrow:active,.ob-skip:active,.help-close:active,.am-back:active,.help-send:active,.acct-link:active,.empty button:active{transform:scale(.97)}
@media (hover:none){
  .row:hover{background:transparent}
  .row.is-active:hover{background:var(--accent-soft)}
  .recap:hover,.theme-tile:hover{transform:none}
  .vu:hover{background:none}
}
@supports (-webkit-touch-callout:none){input,textarea{font-size:max(16px,1em)}}
.am-in,.help-contact,.help-text,.acct-in{font-size:16px}
/* the machine powers on when the intro leaves: keys rise in, the platter
   settles, the display warms. Once, about a second, never on reduced motion */
@keyframes keyOn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes discOn{from{opacity:.55;transform:rotate(calc(var(--rot,0deg) - 22deg)) scale(.985)}to{opacity:1;transform:rotate(var(--rot,0deg)) scale(1)}}
@keyframes oledOn{0%{opacity:.2;filter:brightness(.4)}60%{filter:brightness(1.35)}100%{opacity:1;filter:none}}
@keyframes rowOn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
body.is-poweron .key{animation:keyOn var(--dur-slow) var(--ease-out) both}
body.is-poweron .key:nth-child(2){animation-delay:80ms}
body.is-poweron .key:nth-child(3){animation-delay:160ms}
body.is-poweron .vu{animation:keyOn var(--dur-slow) var(--ease-out) both;animation-delay:240ms}
body.is-poweron .shuttle{animation:keyOn var(--dur-slow) var(--ease-out) both;animation-delay:120ms}
body.is-poweron .disc{animation:discOn 1.1s var(--ease-out) both}
body.is-poweron .oled{animation:oledOn .7s var(--ease-out) both;animation-delay:160ms}
body.is-poweron .row:nth-child(-n+9){animation:rowOn .45s var(--ease-out) both}
body.is-poweron .row:nth-child(2){animation-delay:40ms}
body.is-poweron .row:nth-child(3){animation-delay:80ms}
body.is-poweron .row:nth-child(4){animation-delay:120ms}
body.is-poweron .row:nth-child(5){animation-delay:160ms}
body.is-poweron .row:nth-child(6){animation-delay:200ms}
body.is-poweron .row:nth-child(7){animation-delay:240ms}
body.is-poweron .row:nth-child(8){animation-delay:280ms}
body.is-poweron .row:nth-child(9){animation-delay:320ms}

/* ============ POLISH: MATERIALS, SURFACES, TYPE ============ */
/* one light, top-left, on every key: contact shadow + ambient shadow +
   a bright top edge + a shaded bottom lip */
/* THIS is the rule that wins: there is an earlier .key above with the same
   specificity, and the later one takes it. Lighting the first one alone did
   nothing at all and the check caught it. */
.key{box-shadow:inset calc(var(--tx) * -1.5px) calc(1.5px - var(--ty) * 1.2px) 0 var(--face-edge),inset calc(var(--tx) * 1.5px) calc(-2px + var(--ty) * 1.5px) 3px rgba(0,0,0,.14),calc(var(--tx) * -1px) calc(1px - var(--ty) * .8px) 2px rgba(0,0,0,.25),calc(var(--tx) * -3px) calc(5px - var(--ty) * 2.5px) 10px rgba(0,0,0,.2)}
.fk{box-shadow:inset 0 1px 0 var(--face-edge),inset 0 -1.5px 2px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.22),0 3px 6px rgba(0,0,0,.16)}
/* the record lamp blooms while a take rolls */
.key-rec.is-live .glyph-rec{box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.3),0 0 14px color-mix(in srgb,var(--accent) 70%,transparent)}
/* the display: a real black pane with a hairline ring, nothing else on it */
.oled{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 6px rgba(0,0,0,.6),0 1px 0 var(--face-edge)}
/* dark colorways: elevation is a brighter surface and a hairline, not a
   deeper shadow; light colorways keep the layered, hue-matched stack */
[data-theme="dark"],[data-theme="crimson"],[data-theme="emerald"],[data-theme="fire"],[data-theme="neon"],[data-theme="midnight"],[data-theme="graphite"],[data-theme="olive"],[data-theme="ultraviolet"],[data-theme="terminal"],[data-theme="sunset"]{
  --panel-shadow:0 0 0 1px rgba(255,255,255,.08),0 7px 32px rgba(0,0,0,.35);
}
.help-card,.am-card,.tour-card,.gainpop,.clock-menu{box-shadow:var(--panel-shadow),inset 0 1px 0 var(--panel-edge)}
.am-card{border-radius:18px}
/* settings as inset groups: each section is its own quiet surface */
.set-card .set-sec{border-top:0;padding:16px 16px 14px;border-radius:16px;background:color-mix(in srgb,var(--panel-edge) 55%,transparent);border:1px solid var(--line)}
.set-card{gap:12px}
/* the door's buttons: one prominent, the rest the same height; a double
   focus ring that reads on any surface */
.am-btn:focus-visible,.acct-btn:focus-visible,.help-go:focus-visible,.ob-go:focus-visible{outline:none;box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
/* type: titles balanced, running text pretty, display tracking eased */
.help-title,.am-title,.ob-title,.alarm-title,.tour-title{text-wrap:balance}
.help-what,.set-p,.am-body,.ob-body,.tip-body,.alarm-body,.learn-tips span,.help-fine,.am-fine{text-wrap:pretty}
.help-title{letter-spacing:.12em;font-size:22px}
.am-title{letter-spacing:.11em}
.ob-title{letter-spacing:.07em}
/* the transcript reads like a page: a touch larger, interim words at 60% */
.row-text{font-size:15px;line-height:1.55}
.row-tc{font-size:11px;opacity:.75}
.row.is-active .row-tc{opacity:1}
.row.is-interim .row-text{font-style:normal;opacity:.6;color:var(--ink-soft)}
.row-text{transition:opacity .15s var(--ease-out),color .15s var(--ease-out)}
@media (max-width:720px){.row-text{font-size:16px}}
/* the empty transcript breathes so the eye lands on the one thing to do */
@keyframes emptyBreath{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.empty-glyph i{animation:emptyBreath 2.6s ease-in-out infinite}
/* the picker's tiles preview the machine and the page, not three bars */
.theme-swatch{display:block;height:54px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.theme-swatch .ts-deck{position:absolute;inset:0;width:46%;background:var(--ts-face)}
.theme-swatch .ts-disc{position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:50%;background:var(--ts-disc);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.theme-swatch .ts-disc::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--ts-accent)}
.theme-swatch .ts-keys{position:absolute;left:6px;right:6px;bottom:5px;height:6px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px}
.theme-swatch .ts-keys i{display:block;border-radius:2px;background:var(--ts-key)}
.theme-swatch .ts-keys i:first-child{background:var(--ts-accent)}
.theme-swatch .ts-page{position:absolute;inset:0 0 0 46%;background:var(--ts-panel);padding:8px 8px 0}
.theme-swatch .ts-page i{display:block;height:3px;border-radius:2px;background:var(--ts-ink);opacity:.55;margin-bottom:5px}
.theme-swatch .ts-page i:nth-child(2){width:70%}
.theme-swatch .ts-page i:nth-child(3){width:85%}
.theme-swatch .ts-page i:nth-child(4){width:55%}
.theme-tile.is-on .theme-name::after{content:"  ✓";color:var(--accent)}

/* ============ POLISH: TOASTS, SHEETS, THE VEIL, EMPTY STATES ============ */
/* clear of the transcript's control row: a toast sitting on CSV/TXT/COPY/AUDIO
   swallows the next tap, and a toast is swipeable so it cannot be click-through */
.toasts{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;max-width:min(360px,calc(100vw - 36px))}
.toast{
  pointer-events:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink);
  padding:11px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--panel-edge);
  transform:translateY(calc(var(--i,0) * -0px)) scale(calc(1 - var(--i,0) * .04));transform-origin:bottom center;opacity:calc(1 - var(--i,0) * .25);
  animation:toastIn .4s ease both;transition:transform .3s var(--ease-out),opacity .3s var(--ease-out);
}
.toast.is-bad{border-color:#e5484d;color:#e5484d}
.toast.is-out{opacity:0!important;transform:translateY(6px) scale(.98)!important}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:720px){.toasts{left:50%;right:auto;bottom:auto;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);flex-direction:column;align-items:center}.toast{transform-origin:top center}@keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}}
/* the veil: the chassis, a breathing brand dot, gone the moment the faces are in */
.boot{position:fixed;inset:0;z-index:200;background:linear-gradient(180deg,var(--face-hi),var(--face-lo));display:grid;place-items:center;transition:opacity .4s var(--ease-out);pointer-events:none}
.boot i{width:10px;height:10px;border-radius:3px;background:var(--accent);animation:bootDot 1.1s ease-in-out infinite}
@keyframes bootDot{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.boot.is-out{opacity:0}
/* phones: panels are sheets from the bottom, with a grabber and a pull to dismiss */
@media (max-width:720px){
  .help:not(.modal){align-items:end;padding:0}
  .help:not(.modal) .help-card{width:100%;max-height:92dvh;overflow-y:auto;border-radius:20px 20px 0 0;padding-top:30px;padding-bottom:calc(24px + env(safe-area-inset-bottom));animation:sheetIn var(--dur-slow) var(--ease-drawer) both}
  .help:not(.modal) .help-card::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--line-strong)}
  .help:not(.modal).is-out .help-card{animation:sheetOut var(--dur) var(--ease-out) forwards}
  .tip{align-items:end;padding:0}
  .tip-card{width:100%;border-radius:20px 20px 0 0;padding-top:30px;padding-bottom:calc(24px + env(safe-area-inset-bottom));animation:sheetIn var(--dur-slow) var(--ease-drawer) both}
  .tip-card::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--line-strong)}
  .tip.is-out .tip-card{animation:sheetOut var(--dur) var(--ease-out) forwards}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{to{transform:translateY(100%);opacity:.6}}
/* the sweep: a face change on the phone slides in from the side the finger
   came from, blurred with motion, and settles sharp */
@keyframes sweepInL{0%{transform:translateX(22%);filter:blur(10px);opacity:.55}60%{filter:blur(2px)}100%{transform:none;filter:none;opacity:1}}
@keyframes sweepInR{0%{transform:translateX(-22%);filter:blur(10px);opacity:.55}60%{filter:blur(2px)}100%{transform:none;filter:none;opacity:1}}
@media (max-width:720px){
  body.is-sweep-l #view-scribe{animation:sweepInL .46s var(--ease-out) both}
  body.is-sweep-r #view-play{animation:sweepInR .46s var(--ease-out) both}
}

/* empty states say why, and what to do */
.shelf-empty{display:grid;justify-items:center;gap:6px;padding:22px 12px 18px;font-size:10px;letter-spacing:.16em;color:var(--ink-faint);text-align:center}
.shelf-empty i{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:emptyBreath 2.6s ease-in-out infinite;margin-bottom:4px}
.shelf-empty b{color:var(--ink-soft);font-weight:800;letter-spacing:.2em}
.shelf-empty span{font-family:var(--font-ui);font-size:12px;letter-spacing:0;line-height:1.5;color:var(--ink-faint);max-width:26ch;text-transform:none}
.empty.is-search{padding:44px 20px}
.empty-sub{font-size:12px;color:var(--ink-faint);letter-spacing:0;font-weight:500;max-width:30ch;line-height:1.5}


/* ============ WHAT FREE CANNOT DO, SHOWN RATHER THAN HIDDEN ============
   A locked control keeps its place and its label and wears a small padlock.
   Nothing disappears, so the shape of the app never changes under anyone. */
.mini.is-locked{color:var(--ink-faint);border-style:dashed}
.mini.is-locked::after{content:"🔒";font-size:9px;margin-left:5px;opacity:.75}
.mini.is-locked:hover{color:var(--accent);border-color:var(--accent)}
.ob-fine{font-size:12px;color:var(--ink-faint);margin-top:-2px}
/* the reads, as a card that says what it would have held */
.sum.is-locked{cursor:pointer;border-style:dashed}
.sum.is-locked .rc-tc{color:var(--accent)}
.sum.is-locked .sum-pend{color:var(--ink-soft);font-style:normal}
.sum.is-locked:hover{border-color:var(--accent)}


/* ============ THE UPDATE CARD ============
   It has one job: make the new version look worth the tap. The icon, the
   version you are moving to, and the actual lines from the release, then one
   button that says exactly where it is taking you. */
.upd{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:updVeil .28s var(--ease-out) both}
.upd.is-out{animation:updVeilOut .22s var(--ease-out) both}
@keyframes updVeil{from{opacity:0}to{opacity:1}}
@keyframes updVeilOut{to{opacity:0}}
.upd-card{
  width:min(420px,100%);max-height:min(78vh,640px);overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:14px;padding:24px 22px 20px;
  border-radius:20px;background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4),inset 0 1px 0 var(--panel-edge);
  animation:updIn .42s var(--ease-out) both}
@keyframes updIn{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.upd.is-out .upd-card{animation:updOut .22s var(--ease-out) both}
@keyframes updOut{to{transform:translateY(8px) scale(.99);opacity:0}}
.upd-top{display:flex;gap:14px;align-items:center}
.upd-logo{border-radius:13px;box-shadow:0 8px 20px rgba(0,0,0,.45);flex:none}
.upd-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.upd-kicker{font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;color:var(--accent)}
.upd-title{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
.upd-from{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-faint)}
.upd-notes{display:flex;flex-direction:column;gap:9px;margin:0}
.upd-note{display:flex;gap:9px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.upd-note::before{content:"";flex:none;width:5px;height:5px;margin-top:7px;border-radius:50%;background:var(--accent);opacity:.85}
.upd-more{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-faint);padding-left:14px}
.upd-go{
  margin-top:2px;padding:15px 16px;border:0;border-radius:13px;cursor:pointer;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 10px 26px var(--accent-soft);transition:transform .14s var(--ease-out),box-shadow .2s}
.upd-go:hover{transform:translateY(-1px);box-shadow:0 14px 32px var(--accent-soft)}
.upd-go:active{transform:translateY(1px)}
.upd-later{background:none;border:0;cursor:pointer;padding:4px;font-size:12.5px;color:var(--ink-faint)}
.upd-later:hover{color:var(--ink)}
.upd-fine{margin:0;text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--ink-faint)}
@media (max-width:520px){ .upd-card{padding:20px 18px 18px} .upd-title{font-size:19px} }

/* the terms line in the onboarding chrome: present on every card, quiet, never a wall */
.ob-terms{
  margin:.5rem 0 0; text-align:center;
  font-size:.68rem; letter-spacing:.04em; line-height:1.5;
  color:var(--ink-soft, #8b8f92);
}
.ob-terms a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ob-terms a:hover,.ob-terms a:focus-visible{ color:var(--accent, #e2440e); }


/* ============ EDITING: CUTS AND SOUNDS ============
   A cut sentence stays in the transcript, struck through and faded, so the
   edit is always visible and always reversible. A sound is a labelled line
   of its own, set apart from speech. */
.row.is-cut .row-text{text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;color:var(--ink-faint)}
.row.is-cut .row-tc{color:var(--ink-faint);opacity:.6}
.row.is-sound .row-text{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.row.is-sound{border-left-color:var(--accent);border-left-style:dotted}
body.is-editing .row[data-idx]{cursor:cell}
body.is-editing .row[data-idx]:hover{background:var(--accent-soft)}
body.is-editing .row[data-idx]:hover .row-text::after{content:"  CUT";font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--accent)}
body.is-editing .row.is-cut[data-idx]:hover .row-text::after{content:"  KEEP"}
.mini.is-on{color:var(--accent);border-color:var(--accent)}


/* ============ THE MICROPHONE ============ */
.pill-mic{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink-soft);max-width:min(38vw,220px);overflow:hidden;white-space:nowrap}
.pill-mic i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);flex:none}
.pill-mic.is-ext i{background:#2fb36b;box-shadow:0 0 6px rgba(47,179,107,.6)}
.pill-mic.is-live{color:var(--ink)}
.pill-mic:hover{color:var(--ink);border-color:var(--line-strong)}
.mic{position:fixed;inset:0;z-index:118;display:grid;place-items:end center;padding:0 0 env(safe-area-inset-bottom);background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (min-width:700px){ .mic{place-items:center;padding:22px} }
.mic-card{width:min(460px,100%);max-height:78vh;overflow:auto;padding:20px 18px calc(18px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 -20px 60px rgba(0,0,0,.5);animation:updIn .32s var(--ease-out) both}
@media (min-width:700px){ .mic-card{border-radius:20px} }
.mic-head{display:flex;align-items:baseline;gap:10px}
.mic-kicker{font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;color:var(--accent)}
.mic-title{margin:0;flex:1;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.mic-x{background:none;border:0;color:var(--ink-faint);font-size:14px;cursor:pointer;padding:4px 6px}
.mic-body{margin:8px 0 12px;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.mic-list{display:flex;flex-direction:column;gap:6px}
.mic-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 12px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;font:inherit}
.mic-row:hover{border-color:var(--line-strong)}
.mic-row.is-on{border-color:var(--accent);background:var(--accent-soft)}
.mic-row b{display:block;font-size:13.5px;font-weight:700}
.mic-row small{display:block;margin-top:2px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-faint)}
.mic-row .mic-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none}
.mic-row.is-on .mic-dot{background:var(--accent);box-shadow:0 0 8px var(--accent-soft)}
.mic-row.is-ext .mic-dot{background:#2fb36b}
.mic-out{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mic-subtitle{font-size:15px;font-weight:800;letter-spacing:.06em;margin:2px 0 10px;color:var(--ink)}
.mic-fine{margin:12px 0 0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-faint);text-align:center}

/* ============ THE DESKTOP DOWNLOADS ============ */
.acct-dl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.acct-dl-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--ink-faint);width:100%}
.acct-dl a.acct-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.acct-dl small{display:block;width:100%;font-size:11.5px;line-height:1.4;color:var(--ink-faint)}

/* ============ THE REEL'S MOTION BLUR (2.0.45) ============
   No filters, no canvas: two ghost copies of the label and the hairline sit
   inside the platter and are rotated back by a share of the angle the disc
   swept since the last frame (app.js sets --t1/--t2/--trail/--smear). At
   reading speed they are invisible; at a fling or a 32x shuttle they trail the
   crisp copy and the crisp copy softens, so the reel smears like a real one
   instead of strobing. Two composited layers, nothing else. */
.disc{will-change:transform}
.disc-trail{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:var(--trail,0);transform:rotate(var(--t1,0deg));will-change:transform,opacity}
.disc-trail+.disc-trail{transform:rotate(var(--t2,0deg));opacity:calc(var(--trail,0)*.55)}
/* A THIRD SAMPLE OF THE SHUTTER. Real motion blur integrates the whole time
   the shutter is open; two ghosts is a coarse approximation of that and reads
   as two copies rather than a smear once the reel is genuinely quick. The
   third sits furthest back and faintest, so fast movement fills in instead of
   banding. */
.disc-trail+.disc-trail+.disc-trail{transform:rotate(var(--t3,0deg));opacity:calc(var(--trail,0)*.3)}
.disc>.disc-hairline,.disc>.disc-label,.disc::after,.hub .screw{opacity:calc(1 - var(--smear,0)*.72)}
.disc-trail .disc-hairline{opacity:1}
@media (prefers-reduced-motion:reduce){.disc-trail{display:none}.disc>.disc-hairline,.disc>.disc-label,.disc::after,.hub .screw{opacity:1}}

/* ============ THE RECORDING COLOR (2.0.45) ============
   Every colorway names one color that means "the tape is rolling": distinct
   from its accent, loud on its ground, and seen only while a take rolls. The
   record key, the REC on the display, the pill, the level needle and the word
   beneath the keys all take it; idle, none of it shows. */
:root{--rec:#d8161c;--rec-ink:#fff}
[data-theme="dark"]{--rec:#ff2d2d}
[data-theme="crimson"]{--rec:#ff4d6d}
[data-theme="emerald"]{--rec:#ff5a4e}
[data-theme="fire"]{--rec:#ffd93d;--rec-ink:#1a0500}
[data-theme="neon"]{--rec:#ff2d95}
[data-theme="midnight"]{--rec:#ff4b4b}
[data-theme="paper"]{--rec:#d11a2a}
[data-theme="graphite"]{--rec:#ff3b30}
[data-theme="olive"]{--rec:#ff6b3d}
[data-theme="rose"]{--rec:#d9264a}
[data-theme="ultraviolet"]{--rec:#ff4fa3}
[data-theme="arctic"]{--rec:#e8283c}
[data-theme="terminal"]{--rec:#ff3c3c}
[data-theme="sunset"]{--rec:#ff4d4d}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rec) 55%,transparent)}55%{box-shadow:0 0 0 7px color-mix(in srgb,var(--rec) 0%,transparent)}}
.key-rec.is-live .glyph-rec{background:var(--rec);animation:recPulse 1.1s ease-in-out infinite;box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.3),0 0 16px color-mix(in srgb,var(--rec) 75%,transparent)}
.fk-rec.is-live i{background:var(--rec);animation:recPulse 1.1s ease-in-out infinite}
.pill.pill-live{color:var(--rec-ink);background:var(--rec);border-color:var(--rec)}
.pill.pill-live i{background:var(--rec-ink)}
.oled-row1.is-rec{color:var(--rec)}
.foot-state.is-hot{color:var(--rec)}
.deck-status .is-hot{color:var(--rec)}
.vu.is-hot .vu-needle{stroke:var(--rec)}
.empty-glyph.is-live i{background:var(--rec);animation:recPulse 1.1s infinite}
.rec-line{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:30px;padding:5px 12px calc(7px + env(safe-area-inset-bottom));
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.24em;
  color:var(--rec);visibility:hidden;opacity:0;transition:opacity .25s var(--ease-out);
}
.rec-line.is-on{visibility:visible;opacity:1}
.rec-line i{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:recPulse 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rec-line i,.key-rec.is-live .glyph-rec,.fk-rec.is-live i{animation:none}}

/* ============ THE FINISH: FILM GRAIN AND LINEN (2.0.48) ============
   Two fixed layers over the whole machine, both switchable in the colorway
   sheet. Grain: a fine monochrome fractal noise (SVG turbulence, drawn once
   per tile at device pixels, so it stays crisp on any screen) blended in
   soft-light and stepped through twenty-four positions a second, film's own
   rate, at one speck to a device pixel. Linen: two crossed hairline weaves in overlay. Neither takes a
   press (pointer-events none) and neither runs when motion is reduced. */
/* one spacing scale for the whole face: the same horizontal and vertical
   rhythm everywhere a row of bubbles or buttons sits, so nothing is spaced by
   eye and nothing drifts */
:root{--gap-x:12px;--gap-y:8px;--pill-h:26px;--mini-h:24px}
@media (max-width:720px){:root{--gap-x:8px;--gap-y:6px;--pill-h:30px;--mini-h:30px}}
/* the clock chip is a bubble too: its time never breaks across two lines */
.chip-clock{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.clock-time,.clock-tz{white-space:nowrap}
:root{--grain-op:0;--linen-op:0}
html[data-grain="on"]{--grain-op:1}
html[data-grain="on"][data-theme="light"],html[data-grain="on"][data-theme="paper"],html[data-grain="on"][data-theme="rose"],html[data-grain="on"][data-theme="arctic"]{--grain-op:.6}
html[data-linen="on"]{--linen-op:.55}
html[data-linen="on"][data-theme="light"],html[data-linen="on"][data-theme="paper"],html[data-linen="on"][data-theme="rose"],html[data-linen="on"][data-theme="arctic"]{--linen-op:.35}
/* THE BUG THAT MADE EVERY VERSION OF THIS LOOK LIKE A SHEET (2026-09-05):
   the grain lived on `.texture::before`, and `.texture` was a stacking context
   (position:fixed + z-index, and it carried contain:strict as well). An element
   with mix-blend-mode blends with the backdrop inside its nearest stacking
   context, so the grain was blending against nothing and compositing NORMALLY:
   a translucent mid-grey noise sheet laid over the app. Measured on the bare
   chassis, level 48 with it off and level 125 with it on, a lift of 77 levels
   in what was supposed to be a neutral texture. That is the wash, the milk and
   the security camera, all one fault. The layers are now their own top-level
   elements with the blend on the element itself, so each one blends with the
   page. Never nest a blended layer inside a stacking context. */
.texture,.tex-linen{position:fixed;inset:-12%;pointer-events:none;z-index:9000}
.texture{
  /* the tile is drawn on a canvas in app.js (Texture.drawGrain) and handed over
     as --grain-url; an SVG filter came back from WebKit at its own resolution */
  background-image:var(--grain-url,none);
  background-size:var(--grain-tile,176px) var(--grain-tile,176px);
  background-repeat:repeat;
  mix-blend-mode:overlay;opacity:var(--grain-op);
  animation:grainStep 1s steps(1) infinite;will-change:transform;
}
.tex-linen{
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:var(--linen-op);
}
html:not([data-grain="on"]) .texture{display:none}
html:not([data-linen="on"]) .tex-linen{display:none}
/* 24 positions, one per twenty-fourth of a second: film's own rate */
@keyframes grainStep{
  0%{transform:translate3d(0,0,0)}
  4.166%{transform:translate3d(-5%,3%,0)}
  8.333%{transform:translate3d(4%,-4%,0)}
  12.5%{transform:translate3d(-2%,-5%,0)}
  16.666%{transform:translate3d(5%,4%,0)}
  20.833%{transform:translate3d(-4%,1%,0)}
  25%{transform:translate3d(2%,5%,0)}
  29.166%{transform:translate3d(-6%,-2%,0)}
  33.333%{transform:translate3d(3%,3%,0)}
  37.5%{transform:translate3d(-1%,-6%,0)}
  41.666%{transform:translate3d(6%,-1%,0)}
  45.833%{transform:translate3d(-3%,5%,0)}
  50%{transform:translate3d(1%,-3%,0)}
  54.166%{transform:translate3d(-5%,-4%,0)}
  58.333%{transform:translate3d(4%,2%,0)}
  62.5%{transform:translate3d(-2%,6%,0)}
  66.666%{transform:translate3d(5%,-5%,0)}
  70.833%{transform:translate3d(-6%,2%,0)}
  75%{transform:translate3d(2%,-2%,0)}
  79.166%{transform:translate3d(-4%,4%,0)}
  83.333%{transform:translate3d(6%,5%,0)}
  87.5%{transform:translate3d(-3%,-3%,0)}
  91.666%{transform:translate3d(1%,6%,0)}
  95.833%{transform:translate3d(-5%,-1%,0)}
}
@media (prefers-reduced-motion:reduce){.texture::before{animation:none}}

/* ============ ARMED, NOT YET LISTENING ============
   The gap between the press and the first word belongs to the machine, not to
   the user's trust. Nothing wears the recording color until the microphone is
   open and the engine is up: the deck holds a slow, quiet breath in the ink
   colour, spells out what it is waiting on, and only then goes red. */
@keyframes armBreath{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes armRing{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink-soft) 30%,transparent)}55%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ink-soft) 0%,transparent)}}
.key-rec.is-arming .glyph-rec{
  background:var(--ink-faint);animation:armRing 1.6s ease-in-out infinite,armBreath 1.6s ease-in-out infinite;
  box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.3);
}
.fk-rec.is-arming i{background:var(--ink-faint);animation:armBreath 1.6s ease-in-out infinite}
.oled-row1.is-arming{color:var(--ink-faint);animation:armBreath 1.6s ease-in-out infinite}
.foot-state.is-arming,.deck-status .is-arming{color:var(--ink-faint)}
.pill-live.is-arming{color:var(--ink-soft);background:none;border-color:var(--line-strong)}
.pill-live.is-arming i{background:var(--ink-faint);animation:armBreath 1.6s ease-in-out infinite}
.empty-glyph.is-arming i{background:var(--ink-faint);animation:armBreath 1.6s ease-in-out infinite}
.rec-line.is-arming i{background:var(--ink-faint);animation:armBreath 1.6s ease-in-out infinite}
.rec-line.is-arming span{color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){
  .key-rec.is-arming .glyph-rec,.fk-rec.is-arming i,.oled-row1.is-arming,
  .pill-live.is-arming i,.empty-glyph.is-arming i,.rec-line.is-arming i{animation:none}
}

/* ============ THE LOADING GATE ============
   Nothing in D-REC loads from a server while it works — but the engine itself
   arrives once, and a big download behind a blank deck reads as a broken app.
   So it is said plainly, over a blurred deck, with the real bar. It never
   traps anyone: KEEP WORKING, Escape or a tap outside puts it away and the
   chip carries the rest. */
/* the desktop lock. It sits above everything, including the gate, because the
   question it asks comes before any other. */
.lock{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lock-card{max-width:420px;text-align:center;background:var(--face);border:1px solid var(--line);border-radius:16px;padding:28px 24px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lock-mark{border-radius:14px;margin-bottom:14px}
.lock-title{font-size:19px;font-weight:800;letter-spacing:.06em;margin:0 0 10px;color:var(--ink)}
.lock-body{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 18px}
.lock-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.lock-go,.lock-alt{width:100%;padding:12px;border-radius:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;font-weight:700;cursor:pointer;border:1px solid var(--line)}
.lock-go{background:var(--accent);color:#fff;border-color:transparent}
.lock-alt{background:var(--metal-btn);color:var(--ink)}
.lock-move{font-size:12.5px;line-height:1.5;color:var(--ink);margin:0 0 12px}
.lock-move button{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.lock-fine{font-size:11.5px;line-height:1.5;color:var(--ink-faint);margin:0}
.gate{
  position:fixed;inset:0;z-index:9500;display:grid;place-items:center;
  padding:24px;background:rgba(8,9,10,.55);
  backdrop-filter:blur(18px) saturate(.9);-webkit-backdrop-filter:blur(18px) saturate(.9);
  animation:gateIn .32s var(--ease-out) both;
}
.gate.is-out{animation:gateOut .3s var(--ease-out) both}
.gate-card{
  width:min(480px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:34px 32px 24px;border-radius:18px;text-align:center;
  background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:0 34px 80px rgba(0,0,0,.55),inset 0 1px 0 var(--panel-edge);
  animation:gateCard .38s var(--ease-out) both;
}
.gate-mark{border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.35);image-rendering:auto}
.gate-title{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--ink);margin:2px 0 0}
.gate-note{font-size:12.5px;line-height:1.55;color:var(--ink-faint);margin:0;max-width:44ch;text-wrap:balance}
/* the three things that are true, said before the bar, because the reason for
   the wait IS the product: it runs here, so it has to arrive here once */
.gate-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:2px}
.gate-tags span{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:10px;padding:3px 8px;
}
.gate-bar{
  position:relative;width:100%;height:7px;margin-top:6px;border-radius:4px;overflow:hidden;
  background:var(--face-lo);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 0 0 1px var(--line);
}
.gate-fill{
  display:block;height:100%;width:0%;border-radius:4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#000) 0%,var(--accent) 60%,color-mix(in srgb,var(--accent) 72%,#fff) 100%);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
/* the sheen that says it is moving even when the bytes stall */
.gate-fill::after{
  content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);
  animation:gateSheen 1.5s linear infinite;
}
.gate-foot{display:flex;justify-content:space-between;width:100%;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-faint)}
.gate-pct{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.gate-x{
  margin-top:6px;font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:7px;padding:7px 14px;background:none;
}
.gate-x:hover{color:var(--ink);border-color:var(--line-strong)}
@keyframes gateIn{from{opacity:0}to{opacity:1}}
@keyframes gateOut{from{opacity:1}to{opacity:0}}
@keyframes gateCard{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes gateSheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .gate,.gate-card{animation:none}
  .gate-fill{transition:none}
  .gate-fill::after{animation:none;opacity:0}
}
@media (max-width:720px){.gate-card{padding:26px 20px 18px}}

/* ============ KEYWORD CHIPS · SEARCH ACROSS SESSIONS · TIMECODE ============ */
/* the words a chapter kept coming back to, under its title; a tap searches */
.topic-keys{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-self:center}
.topic-key{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:10px;padding:2px 7px;background:none;
}
.topic-key:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:720px){.topic-head{flex-wrap:wrap}.topic-keys{flex-basis:100%;margin-left:0}}
/* hits in other stored sessions, under the current session's own */
.topic.is-others .topic-head{border-top:2px solid var(--line-strong)}
.row.is-other .row-tc{white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft)}
/* the frame rate the exports count in, beside the clock format */
.fps-set{display:flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden}
.fps-set button{font-size:8.5px;font-weight:700;letter-spacing:.1em;padding:4px 8px;color:var(--ink-faint);background:none}
.fps-set button.is-on{background:var(--accent);color:var(--accent-ink)}
/* the edit's files live on the desktop; CSV covers the phone */
@media (max-width:720px){#mdBtn,#edlBtn{display:none}}
/* one chapter on its own: the arrow at the end of its title */
.topic-ex{
  flex:none;width:20px;height:20px;border-radius:5px;border:1px solid transparent;
  font-size:11px;line-height:1;color:var(--ink-faint);background:none;align-self:center;
}
.topic-head:hover .topic-ex{border-color:var(--line)}
.topic-ex:hover{color:var(--accent);border-color:var(--accent)}
@media (hover:none){.topic-ex{color:var(--ink-soft);border-color:var(--line)}}
/* the slate: the camera's timecode at the take's start */
.slate-in{
  width:104px;background:none;border:1px solid var(--line-strong);border-radius:6px;
  padding:3px 7px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--ink);-webkit-appearance:none;appearance:none;text-align:center;
}
.slate-in::placeholder{color:var(--ink-faint);letter-spacing:.02em}
.slate-in:focus{outline:none;border-color:var(--accent)}
.slate-in.is-on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line-strong))}
.slate-in:disabled{opacity:.45}
/* the clip counter, on the meter and in the gain panel */
.vu{position:relative}
.vu-clip{
  position:absolute;top:2px;right:2px;min-width:15px;padding:1px 3px;border-radius:7px;
  background:var(--rec,#d8161c);color:#fff;font-family:var(--font-mono);font-size:8px;
  font-weight:700;line-height:1.3;text-align:center;pointer-events:none;
}
.vu.is-clipped .vu-red{opacity:1}
/* the switches in the colorway sheet */
.texture-row{display:flex;flex-direction:column;gap:10px;margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.texture-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:var(--ink-faint);font-weight:600}
.tx{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;-webkit-user-select:none}
.tx input{position:absolute;opacity:0;width:0;height:0}
.tx-switch{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:11px;background:var(--face-lo);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px var(--line);transition:background .2s var(--ease-out)}
.tx-switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--metal-btn);box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 var(--face-edge);transition:transform .2s var(--ease-out)}
.tx input:checked+.tx-switch{background:var(--accent)}
.tx input:checked+.tx-switch i{transform:translateX(18px)}
.tx input:focus-visible+.tx-switch{outline:2px solid var(--accent);outline-offset:2px}
.tx-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tx-text b{font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--ink)}
.tx-text small{font-size:10.5px;color:var(--ink-faint);line-height:1.3}

/* ============ TEN MORE COLORWAYS (2.1.3) ============
   Same anatomy as the first fifteen: a chassis, a platter, an ink, a panel and
   one recording colour that is loud on this ground and never the accent. */
[data-theme="brass"]{
  --accent:#d9a441;--accent-ink:#1a1206;--accent-soft:#d9a44124;
  --bg:#1a1410;
  --face-hi:#3a2f24;--face-lo:#241c15;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#3a2f24 0%,#241c15 55%,#271e15 100%);
  --disc-hi:#3c3025;--disc-lo:#271e15;--hub-hi:#352a20;--hub-lo:#20180f;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#f2e8dc;--ink-soft:#c9b9a4;--ink-faint:#a6957f;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#1f1811;--panel-edge:#2b2117;--row-hover:rgba(255,255,255,.05);
  --rec:#ff6b4a;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="ink"]{
  --accent:#7fb3ff;--accent-ink:#04101f;--accent-soft:#7fb3ff24;
  --bg:#0b0e14;
  --face-hi:#232a36;--face-lo:#141a24;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#232a36 0%,#141a24 55%,#151b25 100%);
  --disc-hi:#242b38;--disc-lo:#151b25;--hub-hi:#1f2531;--hub-lo:#10151d;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#e8edf5;--ink-soft:#b3bdcc;--ink-faint:#8e99a9;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#10151d;--panel-edge:#1b2230;--row-hover:rgba(255,255,255,.05);
  --rec:#ff4d5a;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="amber"]{
  --accent:#ffb000;--accent-ink:#1a1000;--accent-soft:#ffb00024;
  --bg:#120e07;
  --face-hi:#2c2216;--face-lo:#1a140c;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#2c2216 0%,#1a140c 55%,#1b150d 100%);
  --disc-hi:#2e2417;--disc-lo:#1b150d;--hub-hi:#271e13;--hub-lo:#150f08;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#ffe0a3;--ink-soft:#d4b98a;--ink-faint:#a8905f;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#150f08;--panel-edge:#221909;--row-hover:rgba(255,255,255,.05);
  --rec:#ff5c33;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="cobalt"]{
  --accent:#35d0ff;--accent-ink:#03141f;--accent-soft:#35d0ff24;
  --bg:#071426;
  --face-hi:#14304f;--face-lo:#0b1e33;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#14304f 0%,#0b1e33 55%,#0c2036 100%);
  --disc-hi:#163350;--disc-lo:#0c2036;--hub-hi:#122b45;--hub-lo:#08182b;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#dff1ff;--ink-soft:#a8c6dd;--ink-faint:#7f9db5;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#08182b;--panel-edge:#12283f;--row-hover:rgba(255,255,255,.05);
  --rec:#ff4d6d;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="rust"]{
  --accent:#ff7a45;--accent-ink:#1a0800;--accent-soft:#ff7a4524;
  --bg:#1c0f09;
  --face-hi:#3d2317;--face-lo:#26150d;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#3d2317 0%,#26150d 55%,#28170e 100%);
  --disc-hi:#3f2518;--disc-lo:#28170e;--hub-hi:#38200f;--hub-lo:#1d1009;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#f7e3d5;--ink-soft:#d0b09b;--ink-faint:#a98a75;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#1f110a;--panel-edge:#2c1a10;--row-hover:rgba(255,255,255,.05);
  --rec:#ff2d55;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="slate"]{
  --accent:#9ec5e8;--accent-ink:#0b1620;--accent-soft:#9ec5e824;
  --bg:#262b31;
  --face-hi:#3d454e;--face-lo:#2c333a;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#3d454e 0%,#2c333a 55%,#2e353d 100%);
  --disc-hi:#3f4750;--disc-lo:#2e353d;--hub-hi:#38404a;--hub-lo:#252b32;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#e9edf1;--ink-soft:#b9c2cb;--ink-faint:#98a2ac;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#222830;--panel-edge:#2f3740;--row-hover:rgba(255,255,255,.05);
  --rec:#ff5252;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="plum"]{
  --accent:#c792ff;--accent-ink:#150826;--accent-soft:#c792ff24;
  --bg:#1a0f1c;
  --face-hi:#35203a;--face-lo:#221326;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#35203a 0%,#221326 55%,#231428 100%);
  --disc-hi:#37223c;--disc-lo:#231428;--hub-hi:#2f1c34;--hub-lo:#1b1020;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#f6e7f4;--ink-soft:#cdb4cf;--ink-faint:#a892ac;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#1d1120;--panel-edge:#2a1930;--row-hover:rgba(255,255,255,.05);
  --rec:#ff4d6d;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="moss"]{
  --accent:#a8e05f;--accent-ink:#0d1705;--accent-soft:#a8e05f24;
  --bg:#0f1611;
  --face-hi:#26331f;--face-lo:#161f18;--face-edge:rgba(255,255,255,.16);--face-shadow:0 26px 52px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
  --metal-btn:linear-gradient(180deg,#26331f 0%,#161f18 55%,#18211a 100%);
  --disc-hi:#28351f;--disc-lo:#18211a;--hub-hi:#222d1c;--hub-lo:#121a14;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.10);--hub-puff:rgba(255,255,255,.07);
  --ink:#e6f2e2;--ink-soft:#b8ccb4;--ink-faint:#93a890;--line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --panel:#111a13;--panel-edge:#1b271c;--row-hover:rgba(255,255,255,.05);
  --rec:#ff5a3c;--rec-ink:#fff;
  --bg-tex:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.16));
}
[data-theme="jade"]{
  --accent:#2f7d5e;--accent-ink:#ffffff;--accent-soft:#2f7d5e24;
  --bg:#dfe5e0;
  --face-hi:#eef2ee;--face-lo:#d5ddd6;--face-edge:rgba(255,255,255,.9);--face-shadow:0 22px 44px rgba(60,55,45,.22),0 3px 8px rgba(60,55,45,.18);
  --metal-btn:linear-gradient(180deg,#eef2ee 0%,#d5ddd6 55%,#d0d9d1 100%);
  --disc-hi:#e7ece7;--disc-lo:#d0d9d1;--hub-hi:#dde4de;--hub-lo:#c6d0c8;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.85);--hub-puff:rgba(255,255,255,.07);
  --ink:#22302a;--ink-soft:#4b5a53;--ink-faint:#6b7a73;--line:rgba(30,30,30,.15);--line-strong:rgba(30,30,30,.28);
  --panel:#f3f7f3;--panel-edge:#fbfdfb;--row-hover:rgba(30,30,30,.045);
  --rec:#c0392b;--rec-ink:#fff;
  --bg-tex:linear-gradient(90deg,rgba(255,255,255,.5),transparent 30%,transparent 70%,rgba(0,0,0,.05)),radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(60,55,45,.10) 100%);
}
[data-theme="bone"]{
  --accent:#8a5a2b;--accent-ink:#ffffff;--accent-soft:#8a5a2b24;
  --bg:#e9e4da;
  --face-hi:#f6f3ec;--face-lo:#ded8cc;--face-edge:rgba(255,255,255,.9);--face-shadow:0 22px 44px rgba(60,55,45,.22),0 3px 8px rgba(60,55,45,.18);
  --metal-btn:linear-gradient(180deg,#f6f3ec 0%,#ded8cc 55%,#d9d2c4 100%);
  --disc-hi:#f0ece3;--disc-lo:#d9d2c4;--hub-hi:#e6e0d4;--hub-lo:#cfc7b8;
  --hub-seam:rgba(0,0,0,.55);--hub-stitch:rgba(255,255,255,.85);--hub-puff:rgba(255,255,255,.07);
  --ink:#2e2a24;--ink-soft:#575147;--ink-faint:#787064;--line:rgba(30,30,30,.15);--line-strong:rgba(30,30,30,.28);
  --panel:#faf7f1;--panel-edge:#fefcf8;--row-hover:rgba(30,30,30,.045);
  --rec:#b3261e;--rec-ink:#fff;
  --bg-tex:linear-gradient(90deg,rgba(255,255,255,.5),transparent 30%,transparent 70%,rgba(0,0,0,.05)),radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(60,55,45,.10) 100%);
}

/* ============ THREE MORE FINISHES (2.1.3) ============
   Each is one more fixed layer over the machine, each switchable on its own,
   each free of pointer events and off when motion is reduced where it moves.
   HALATION: the warm bloom film gets where light spills past the emulsion,
   strongest at the edges. VIGNETTE: the corner falloff of a real lens.
   DUST: the sparse specks and hairs a print picks up, drifting slowly. */
:root{--halo-op:0;--vig-op:0;--dust-op:0}
html[data-halation="on"]{--halo-op:.30}
html[data-halation="on"][data-theme="light"],html[data-halation="on"][data-theme="paper"],
html[data-halation="on"][data-theme="rose"],html[data-halation="on"][data-theme="arctic"],
html[data-halation="on"][data-theme="jade"],html[data-halation="on"][data-theme="bone"]{--halo-op:.18}
html[data-vignette="on"]{--vig-op:.42}
html[data-vignette="on"][data-theme="light"],html[data-vignette="on"][data-theme="paper"],
html[data-vignette="on"][data-theme="rose"],html[data-vignette="on"][data-theme="arctic"],
html[data-vignette="on"][data-theme="jade"],html[data-vignette="on"][data-theme="bone"]{--vig-op:.22}
html[data-dust="on"]{--dust-op:.5}
.tex-halo,.tex-vig,.tex-dust{position:fixed;inset:0;pointer-events:none;z-index:9001}
.tex-halo{
  background:radial-gradient(120% 90% at 50% 50%,transparent 42%,color-mix(in srgb,var(--accent) 55%,#ff9a5a) 100%);
  mix-blend-mode:screen;opacity:var(--halo-op);filter:blur(28px);
}
.tex-vig{
  background:radial-gradient(125% 95% at 50% 48%,transparent 46%,rgba(0,0,0,.9) 100%);
  opacity:var(--vig-op);
}
/* the specks: three sparse fields at three sizes, drifting at different rates */
.tex-dust{
  opacity:var(--dust-op);mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 17% 23%,rgba(255,255,255,.9) 0 .6px,transparent 1.2px),
    radial-gradient(circle at 71% 61%,rgba(0,0,0,.75) 0 .7px,transparent 1.4px),
    radial-gradient(circle at 44% 88%,rgba(255,255,255,.65) 0 .5px,transparent 1px);
  background-size:263px 263px,331px 331px,197px 197px;
  animation:dustDrift 17s linear infinite;will-change:transform;transform:translateZ(0);
}
@keyframes dustDrift{
  0%{background-position:0 0,0 0,0 0}
  100%{background-position:263px -180px,-331px 240px,197px 160px}
}
html:not([data-halation="on"]) .tex-halo{display:none}
html:not([data-vignette="on"]) .tex-vig{display:none}
html:not([data-dust="on"]) .tex-dust{display:none}
@media (prefers-reduced-motion:reduce){.tex-dust{animation:none}}
/* the colorway sheet, made easy to read: the tiles group under a heading and
   the finish switches sit two to a row on anything wider than a phone */
.theme-group{
  grid-column:1 / -1;   /* a heading spans the row; it is not a tile */
  font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;color:var(--ink-faint);
  margin:12px 0 6px;padding-top:10px;border-top:1px solid var(--line);
}
.theme-group:first-child{margin-top:0;padding-top:0;border-top:0}
@media (min-width:560px){.texture-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.texture-label{grid-column:1 / -1}}

/* how much grain, his choice: the same three-step control the frame rate uses */
/* The amount belongs to FILM GRAIN, so it sits UNDER it in the same column.
   Spanning the full row with space-between threw the label to the far left and
   the pills to the far right, so the one control that modifies the grain
   looked like it belonged to nothing (his sheet, 2026-09-05). */
.tx-amt{display:flex;align-items:center;justify-content:flex-start;gap:10px;grid-column:1;margin-top:-2px;padding-left:52px}
.tx-amt>span:first-child{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--ink-faint)}

/* ============ A WAIT WITH NO NUMBER STILL HAS TO LOOK ALIVE ============
   Some waits are measurable (a download knows its bytes) and some are not
   (the microphone opening, a model waking up). Inventing a percentage for the
   second kind is how progress bars come to mean nothing, so those draw a
   travelling bar instead: the same accent, the same track, clearly moving and
   clearly not claiming to know how far along it is. The percentage is hidden
   rather than showing a made-up zero. */
.gate.is-working .gate-fill{
  width:38%;
  animation:gateTravel 1.25s cubic-bezier(.55,0,.35,1) infinite;
  transition:none;
}
@keyframes gateTravel{
  0%{transform:translateX(-105%)}
  100%{transform:translateX(305%)}
}
@media (prefers-reduced-motion:reduce){
  .gate.is-working .gate-fill{animation:none;width:100%;opacity:.5}
  .gate-fill::after{animation:none}
}

/* ============ NOTHING RUNS OFF A NARROW PHONE ============
   At 320 px (an iPhone SE, still a device people record on) the page scrolled
   sideways by 33 px. Two separate causes, both worth fixing rather than
   hiding:

   1. The version tag sat at the end of a brand row that could not shrink, so
      it pushed the document wider than the screen. The row is allowed to give
      now, and the subtitle steps aside before the version does, because
      "RECORD · REWIND · TRANSCRIBE" is decoration and the version is what a
      person reads out when reporting a fault.

   2. The finish layers are deliberately larger than the viewport (inset:-12%)
      so the grain never shows a seam at an edge. A fixed layer that big can
      still lengthen the document. `overflow-x: clip` stops the sideways
      scroll WITHOUT creating a scroll container, so it does not disturb
      position:fixed the way overflow:hidden would. */
html{overflow-x:clip}
@media (max-width:360px){
  .brand{gap:5px;flex-wrap:nowrap;overflow:hidden}
  .brand-sub{display:none}                 /* decoration goes before information */
  .brand-ver{flex:0 0 auto;margin-left:0;padding:2px 4px}
  .brand-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ============ THE DISPLAY LOOKS LIKE IT DOES SOMETHING (2.2.4) ============
   The OLED opens the session list: name a take, swap between takes, start a
   new one, store one. Nobody knew, the owner included, because it looked like
   a readout rather than a control. Three things say so now, all of them quiet:

   1. A line inside the display, TAP FOR SESSIONS. It sits inside the panel so
      it reads as part of the instrument rather than a caption stuck under it.
   2. A ring that breathes around the display while the deck is IDLE, and only
      then. The moment anything is recording or playing the display has a job
      and the invitation stops, because a hint during a take is noise.
   3. The tour says it in words (step in app.js's TOUR list).

   The hint fades once someone has opened the list, because a thing you have
   already found does not need pointing at for ever. */
.oled{position:relative}
.oled-hint{
  display:block;margin-top:3px;
  font-family:var(--font-mono);font-size:7.5px;letter-spacing:.22em;
  color:color-mix(in srgb,var(--oled-text) 52%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s var(--ease-out);
}
/* while a take rolls or a take plays, the display is doing its real job.
   IT NO LONGER GOES AWAY ONCE YOU HAVE USED IT. It used to hide itself for
   good on [data-oled-known], and its own owner still could not find the
   sessions: "sometimes I'm looking around and I can't find it" (2026-09-06).
   A hint that vanishes after the one time you did not need it is not a hint.
   It breathes instead, faintly, so the eye catches it without the panel
   turning into a blinking sign. */
body.is-live .oled-hint,body.is-playing .oled-hint{opacity:0}
.oled-hint{animation:oledHintGlow 3.4s ease-in-out infinite}
@keyframes oledHintGlow{
  0%,100%{color:color-mix(in srgb,var(--oled-text) 40%,transparent)}
  50%{color:color-mix(in srgb,var(--oled-text) 88%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .oled-hint{animation:none;color:color-mix(in srgb,var(--oled-text) 70%,transparent)}
}

/* the ring: only while the deck is idle, and never during motion sickness */
.oled::after{
  content:"";position:absolute;inset:-4px;border-radius:9px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  opacity:0;transition:opacity .35s var(--ease-out);
}
body.deck-idle:not(.is-live):not(.is-playing) .oled::after{
  animation:oledInvite 2.6s var(--ease-out) infinite;
}
.oled:hover::after{opacity:.9;animation:none}
html[data-oled-known="1"] .oled::after{animation:none}
@keyframes oledInvite{
  0%,100%{opacity:0}
  45%{opacity:.55}
  70%{opacity:.18}
}
@media (prefers-reduced-motion:reduce){
  body.deck-idle .oled::after{animation:none;opacity:.4}
}

/* ============ WIPE: THE HOLD IS VISIBLE BEFORE IT LANDS (2.2.4) ============
   One button, three depths: tap wipes this session, a hold opens sweep mode,
   a longer hold asks about clearing everything. The consequence has to be
   legible WHILE the finger is down, not after, so the button fills as it is
   held and changes colour at the point where the meaning changes. */
#shelfWipe{position:relative;overflow:hidden;--hold:0%}
#shelfWipe::before{
  content:"";position:absolute;inset:0;width:var(--hold);
  background:color-mix(in srgb,var(--rec,#d8161c) 26%,transparent);
  transition:background .2s var(--ease-out);pointer-events:none;
}
#shelfWipe.is-armed::before{background:color-mix(in srgb,var(--rec,#d8161c) 46%,transparent)}
#shelfWipe.is-armed{color:var(--rec-ink,#fff)}

/* SWEEP MODE: every row can be flicked away, so a long list clears a flick at
   a time and can be abandoned at any point. */
.shelf.is-sweep .shelf-item{
  position:relative;touch-action:pan-y;transition:transform .18s var(--ease-out),opacity .18s var(--ease-out);
}
.shelf.is-sweep .shelf-item::after{
  content:"SWIPE";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;
  color:color-mix(in srgb,var(--rec,#d8161c) 80%,transparent);pointer-events:none;
}
.shelf.is-sweep .shelf-item.is-going{transform:translateX(-110%);opacity:0}
.shelf.is-sweep .shelf-list{scroll-behavior:smooth}

/* ---- the computer as an input ------------------------------------------
   A different kind of source from a microphone, so it reads as one: a square
   dot rather than a round one, and its own colour, kept away from the green
   that already means "an external mic is live". Desktop only; the row is
   never built on the web or on a phone. */
.mic-row.is-sys{border-style:dashed}
.mic-row.is-sys .mic-dot{border-radius:2px;background:var(--accent);box-shadow:0 0 6px var(--accent-soft)}
.mic-row.is-sys.is-on{border-style:solid}
.pill-mic.is-sys i{border-radius:2px;background:var(--accent);box-shadow:0 0 6px var(--accent-soft)}

/* ---- the first run asks to be used -------------------------------------
   Play glows and the platter nudges until the person uses either. Both stop
   for good the first time they play, scrub or record.

   The nudge uses the independent `rotate` property, NOT `transform`: the disc
   already carries `transform: rotate(calc(var(--rot) + var(--over)))` from the
   scrub engine, and an animation on the same declaration would fight it. The
   two compose instead, so a nudge mid-spin is impossible rather than merely
   unlikely. */
/* It BREATHES. The first version went from fully transparent to a 16px glow
   and back on an ease-in-out, which spends most of its time at the extremes
   and reads as blinking. This never reaches zero, moves through two
   intermediate stops so the curve has somewhere to go, and takes 3.6s, which
   is nearer a breath than a pulse. */
@keyframes playBeckon{
  0%,100%{box-shadow:0 0 6px 0 color-mix(in srgb,var(--accent) 14%,transparent)}
  30%{box-shadow:0 0 13px 1px color-mix(in srgb,var(--accent) 34%,transparent)}
  50%{box-shadow:0 0 18px 2px color-mix(in srgb,var(--accent) 46%,transparent)}
  72%{box-shadow:0 0 13px 1px color-mix(in srgb,var(--accent) 32%,transparent)}
}
body.is-firstrun .key-play{animation:playBeckon 3.6s cubic-bezier(.4,0,.5,1) infinite}
body.is-firstrun .key-play svg{color:var(--accent);transition:color .3s var(--ease-out)}

/* a twitch in the last fifth of the cycle, still for the rest of it */
/* A NUDGE THAT SETTLES, not a shiver. Four hard swings inside one fifth of
   the cycle was a vibration; a platter does not vibrate, it is turned and it
   comes to rest. This is one push and a single decaying return over a third
   of the cycle, on a curve that eases out of every stop, so it reads as
   somebody having touched it. */
@keyframes discNudge{
  0%,68%,100%{rotate:0deg}
  76%{rotate:2.4deg}
  85%{rotate:-1.1deg}
  93%{rotate:.35deg}
}
body.is-firstrun .disc{animation:discNudge 8s cubic-bezier(.33,0,.2,1) infinite}

@media (prefers-reduced-motion:reduce){
  body.is-firstrun .disc{animation:none}
  body.is-firstrun .key-play{animation:none;box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 40%,transparent)}
}

/* ---- the iPhone note ----------------------------------------------------
   A person on an iPhone, on the WEBSITE, is told the app is coming. It is a
   note rather than a wall: bottom of the screen, above the home indicator,
   never over a control, and gone the moment they touch anything. The colorway
   paints it, so it belongs to the app rather than sitting on top of it. */
.ios-note{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  /* 62, not 60: the intro overlay is also 60 and comes later in the document,
     so a tie put the note underneath the thing it is meant to be seen over.
     Still well below the grain layers at 9000, because the note should wear
     the same film as everything else rather than float above it. */
  z-index:62;display:flex;align-items:center;gap:13px;
  /* a notch bigger than it was: this is the only thing an iPhone visitor is
     told, and at the old size it read as a cookie banner */
  padding:14px 15px;border-radius:18px;
  background:color-mix(in srgb,var(--bg) 88%,var(--ink) 12%);
  border:1px solid var(--line-strong);
  box-shadow:0 10px 34px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
  animation:iosNoteIn .42s var(--ease-out) both;
}
.ios-note.is-going{animation:iosNoteOut .3s var(--ease-in-out) both}
.ios-note-icon{width:46px;height:46px;border-radius:11px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ios-note-text{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
/* APPLE'S OWN BADGE, UNALTERED. It is the mark Apple supplies for linking to an
   app, and reproducing it exactly is the point: resizing the whole lockup is
   allowed, changing the wording, the colours or the proportions is not. It is
   shown ONLY once version.json carries an appstore link, because a Download
   badge over an app nobody can download is both a broken promise and a misuse
   of the badge. */
.ios-note-badge{display:inline-block;margin-top:7px;line-height:0}
.ios-note-badge svg{height:40px;width:auto;display:block}
.ios-note-badge:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:7px}
.ios-note-text b{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--accent);
}
.ios-note-text small{font-size:13.5px;color:var(--ink-soft);line-height:1.35}
.ios-note-x{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--ink-faint);font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.ios-note-x:hover{color:var(--ink);border-color:var(--line-strong)}
.ios-note a{color:var(--accent);text-decoration:none;font-weight:600}
@keyframes iosNoteIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes iosNoteOut{to{opacity:0;transform:translateY(14px) scale(.98)}}
@media (prefers-reduced-motion:reduce){
  .ios-note{animation:none}
  .ios-note.is-going{animation:none;opacity:0}
}

/* takes held behind the sign-in door: present, not lost */
.shelf-held{
  margin-top:8px;padding:9px 11px;border-radius:10px;
  border:1px dashed var(--line-strong);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--ink-faint);text-align:center;
}

/* ACCESSIBILITY: the two settings D-REC never answered.

   prefers-reduced-motion was already honoured in thirteen places. These two
   were not honoured anywhere, and both are set by people who need them rather
   than people browsing preferences: reduced transparency is a legibility
   setting (low vision, and it is on by default under some assistive setups),
   and increased contrast is a vision setting. A blurred translucent overlay
   over a moving deck is exactly the surface those settings exist to fix.

   Nothing here changes the design for anyone who has not asked for it. Every
   value comes from the existing colorway tokens, so all twenty five colorways
   and both finishes stay correct without a per-theme rule. */

@media (prefers-reduced-transparency: reduce) {
  /* Solid ground instead of blur. The blur is the expensive half for these
     users AND the illegible half, so it goes rather than being softened. */
  .topic-head, .alarm, .onboard, .help, .tip, .upd, .mic, .lock, .gate {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .alarm, .onboard, .help, .tip, .upd, .mic, .lock, .gate {
    background: var(--bg);
  }
  .topic-head { background: var(--panel); }
  /* The scrim stops being a see-through wash and becomes a real curtain, so
     the deck behind a dialog cannot compete with the words in front of it. */
  .help::before, .alarm::before, .gate::before { background: var(--bg); opacity: .96; }
}

@media (prefers-contrast: more) {
  /* Near-solid surfaces with a defined edge. Without the border a solid panel
     on a solid ground has no boundary at all, which is worse than translucency. */
  .alarm, .onboard, .help, .tip, .upd, .mic, .lock, .gate {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg);
    border: 2px solid var(--ink);
  }
  /* The faint tier is the one that disappears first at low vision. It is used
     for timecodes and secondary labels, which are information, not decoration. */
  :root { --ink-faint: var(--ink-soft); }
  .key, .chip, .mini, .acct-btn, .disc-ctl, .tab { border-color: var(--ink-soft); }
  a, .acct-link { text-decoration: underline; }
}

/* The Microsoft Store badge. Microsoft's own artwork, unaltered, which is why
   there are two files rather than one recoloured: the badge is a trademark and
   the variants exist precisely so nobody has to tint it. The dark one ships by
   default because nineteen of the twenty five colorways are dark. */
.ms-badge{display:inline-block;line-height:0;border-radius:5px;margin-top:2px;
  transition:opacity .15s,transform .1s}
.ms-badge:hover{opacity:.85}
.ms-badge:active{transform:scale(.98)}
.ms-badge:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ms-badge img{display:block;height:38px;width:auto}
.ms-badge > .light{display:none}
:is([data-theme=light],[data-theme=paper],[data-theme=rose],[data-theme=arctic],[data-theme=jade],[data-theme=bone]) .ms-badge > .dark{display:none}
:is([data-theme=light],[data-theme=paper],[data-theme=rose],[data-theme=arctic],[data-theme=jade],[data-theme=bone]) .ms-badge > .light{display:block}
.ms-badge-note{opacity:.8}
@media (prefers-reduced-motion: reduce){.ms-badge{transition:none}.ms-badge:active{transform:none}}