/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg: #08090b;
  --bg-raised: #0f1114;
  --line: #1e2126;
  --line-soft: #16181c;
  --text: #e8eaed;
  --text-dim: #8b929c;
  --text-faint: #5b626c;
  --marker: #ff2f3a;
  --marker-soft: rgba(255, 47, 58, 0.14);
  --radius: 12px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* Class selectors outrank the UA's [hidden] rule, so restate it with weight. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body { overflow: hidden; }

h1, h2 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }

/* ── Launcher ───────────────────────────────────────────────── */
.launcher {
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: center;
  /* `safe` keeps the top reachable when the content is taller than the window. */
  align-content: safe center;
  padding: 32px 24px;
  overflow: auto;
  background:
    radial-gradient(760px 420px at 50% -10%, rgba(255, 47, 58, 0.10), transparent 70%),
    var(--bg);
  animation: fade-in 240ms var(--ease) both;
}

.launcher-inner { width: min(980px, 100%); }

.launcher-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  animation: rise 280ms var(--ease) both;
}

.mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--marker), #a3121a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 26px rgba(255, 47, 58, 0.28);
}

.launcher-head h1 { font-size: 21px; }
.sub { margin: 3px 0 0; color: var(--text-dim); font-size: 13.5px; }

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
}

@media (max-width: 820px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  animation: rise 320ms var(--ease) both;
  animation-delay: 40ms;
}

.keys { animation-delay: 90ms; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel-head h2 {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ghost {
  background: none;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.ghost:hover { color: var(--text); background: var(--line-soft); }

.video-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  min-height: 88px;
  overflow: auto;
  outline: none;
  scrollbar-width: thin;
}

.video-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 130ms var(--ease), border-color 130ms var(--ease);
  animation: rise 260ms var(--ease) both;
}

.video-list li:hover { background: var(--line-soft); }

.video-list li[aria-selected="true"] {
  background: var(--marker-soft);
  border-color: rgba(255, 47, 58, 0.4);
}

.video-list .dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background 130ms var(--ease), box-shadow 130ms var(--ease);
}

.video-list li[aria-selected="true"] .dot {
  background: var(--marker);
  box-shadow: 0 0 0 4px var(--marker-soft);
}

.video-list .name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-list .meta { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.video-list .kind {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.video-list li[aria-selected="true"] .kind { color: var(--marker); }

.empty { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 4px 2px 0; }
.empty code { font-family: var(--mono); color: var(--text); font-size: 12px; }

.panel-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.file-btn { flex: 1; }
.file-btn span {
  display: inline-block;
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.file-btn span:hover { color: var(--text); border-color: #2c3037; }

.start {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: #fff;
  background: var(--marker);
  border: 0;
  border-radius: 9px;
  padding: 9px 22px;
  cursor: pointer;
  transition: transform 110ms var(--ease), opacity 140ms var(--ease), filter 140ms var(--ease);
}
.start:hover:not(:disabled) { filter: brightness(1.1); }
.start:active:not(:disabled) { transform: scale(0.97); }
.start:disabled { opacity: 0.35; cursor: default; }

.keymap { margin: 0; }
.kgroup { break-inside: avoid; }

.keymap .row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 2px;
  font-size: 12.5px;
}

.kgroup + .kgroup .group { margin-top: 10px; }

.keymap .group {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 6px 2px 2px;
}

.keymap kbd {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: #191c21;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}

.keymap .desc { color: var(--text-dim); flex: 1; }

.footnote { margin: 18px 2px 0; font-size: 11.5px; color: var(--text-faint); }

.dropzone {
  position: fixed;
  inset: 14px;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255, 47, 58, 0.55);
  border-radius: 18px;
  background: rgba(8, 9, 11, 0.86);
  backdrop-filter: blur(6px);
  font-size: 15px;
  color: var(--text);
  z-index: 40;
  animation: fade-in 140ms var(--ease) both;
}

/* ── Stage ──────────────────────────────────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  animation: fade-in 200ms var(--ease) both;
}

.stage[data-mode="draw"] { cursor: none; }
.stage[data-mode="pointer"][data-zoomed="true"] { cursor: grab; }
.stage[data-mode="pointer"][data-zoomed="true"][data-panning="true"] { cursor: grabbing; }
.stage[data-idle="true"][data-mode="pointer"]:not([data-zoomed="true"]) { cursor: none; }

.frame {
  position: absolute;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  /* A hairline so the export bounds are visible against a black stage.
     It is CSS, so it is never part of the recording. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.frame[data-animate="true"] { transition: transform 170ms var(--ease); }

/* The frame is the EXPORT frame, not the video. The source letterboxes inside
   it, so what you see is exactly what lands in the file. */
/* Media layers: the visible source and, during a transition, the incoming one
   crossfading on top of it. Opacity is driven from JS (media.js), never CSS,
   so the recorder can composite the exact same fade. */
.media-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.media-layer video,
.media-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wm-stage {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  pointer-events: none;
}

.brush-cursor {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 1.5px solid var(--marker);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 30;
  will-change: transform;
}

/* ── HUD ────────────────────────────────────────────────────── */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The chip groups fade on idle, the badges do not: losing the "you are
   recording" cue mid-take would be a trap. They share one flex row so they
   can never overlap each other, however narrow the window is. */
.hud-chips,
.hud-bottom,
.hud-top::before {
  transition: opacity 200ms var(--ease);
}

.stage[data-idle="true"] .hud-chips,
.stage[data-idle="true"] .hud-bottom,
.stage[data-idle="true"] .hud-top::before {
  opacity: 0;
}

.hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
}

.hud-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
  pointer-events: none;
}

.hud-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.hud-chips.end { justify-content: flex-end; }

.badges {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.chip {
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(20, 22, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 4px 11px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chip.muted { color: var(--text-dim); font-weight: 450; }

.chip.button {
  pointer-events: auto;
  cursor: pointer;
  font-family: inherit;
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
.chip.button:hover { background: rgba(60, 64, 72, 0.85); color: #fff; }

#modeChip[data-mode="draw"] {
  background: var(--marker);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 18px rgba(255, 47, 58, 0.35);
}

.hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 16px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.hud-bottom[data-off="true"] {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.scrub { pointer-events: auto; cursor: pointer; padding: 6px 0; }

.scrub-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: height 130ms var(--ease);
}

.scrub:hover .scrub-track { height: 6px; }

.scrub-fill {
  height: 100%;
  width: 0;
  background: var(--marker);
  border-radius: 3px;
  transform-origin: left center;
}

.hud-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.hud-times > span:first-child,
.hud-times > span:last-child { flex: 1 1 0; }
.hud-times > span:last-child { text-align: right; }

/* ── Icon toolbar, in the seek row ──────────────────────────── */
.hud-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  pointer-events: auto;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 130ms var(--ease), background 130ms var(--ease), transform 110ms var(--ease);
}

.icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.icon-btn:active { transform: scale(0.92); }

.icon-btn[aria-pressed="true"] { color: #fff; background: rgba(255, 47, 58, 0.85); }
.icon-btn[data-state="warn"] { color: #ffb020; }
.icon-btn[data-state="danger"] { color: #ff8b92; }
.icon-btn[data-state="live"] { color: #3ddc84; }

.icon-btn[aria-pressed="true"][data-icon="record"] {
  background: var(--marker);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.icon-sep {
  width: 1px;
  height: 15px;
  margin: 0 5px;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
}

@media (max-width: 720px) {
  .hud-toolbar { flex-wrap: wrap; justify-content: center; }
  .icon-sep { display: none; }
}

/* ── Audio level readouts, in the seek row ──────────────────── */
.levels {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.level {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.82);
  transition: color 140ms var(--ease), opacity 140ms var(--ease);
}

.level .slash { display: none; }

.level[data-muted="true"] { color: #ff8b92; }
.level[data-muted="true"] .slash { display: block; }
.level[data-muted="true"] .wave { display: none; }

/* A video with no audio track gets a dimmed, obviously inert control. */
.level[data-silent="true"] { opacity: 0.32; }

.level-bar {
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.level-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: currentColor;
  transition: width 120ms var(--ease);
}

.level-value {
  min-width: 30px;
  font-size: 10.5px;
  color: inherit;
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translate(-50%, -6px);
  font-size: 12.5px;
  font-weight: 550;
  color: #fff;
  background: rgba(20, 22, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
  z-index: 35;
}

.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* ── Help overlay ───────────────────────────────────────────── */
.help {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 5, 6, 0.78);
  backdrop-filter: blur(8px);
  z-index: 45;
  animation: fade-in 150ms var(--ease) both;
}

.help[data-closing="true"] { animation: fade-out 130ms var(--ease) both; }

.help-card {
  width: min(760px, calc(100% - 40px));
  max-height: min(78vh, 720px);
  overflow: auto;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  animation: rise 200ms var(--ease) both;
}

.help-card h2 { font-size: 15px; margin-bottom: 12px; }
.help-card .keymap { columns: 2; column-gap: 26px; }
.help-card .keymap .kgroup:first-child .group { margin-top: 0; }
.help-card .start { margin-top: 18px; width: 100%; }

@media (max-width: 620px), (max-height: 560px) {
  .help-card .keymap { columns: 1; }
}

/* ── Form controls ──────────────────────────────────────────── */
.stack { display: grid; gap: 16px; align-content: start; }

.field { margin-top: 12px; }
.field:first-child { margin-top: 0; }

.filter-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.filter-label .meta { text-transform: none; letter-spacing: 0; color: var(--text-dim); }

.as-input,
.as-select {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: #14171b;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 11px;
  outline: none;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.as-input::placeholder { color: var(--text-faint); }

.as-input:focus,
.as-select:focus {
  border-color: rgba(255, 47, 58, 0.55);
  box-shadow: 0 0 0 3px var(--marker-soft);
}

.as-select {
  appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.as-select option { background: #14171b; color: var(--text); }

.as-range {
  width: 100%;
  appearance: none;
  height: 3px;
  border-radius: 3px;
  background: #24282e;
  outline: none;
  cursor: pointer;
}

.as-range::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--marker);
  border: 2px solid var(--bg-raised);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  transition: transform 120ms var(--ease);
}
.as-range:active::-webkit-slider-thumb { transform: scale(1.15); }

.segmented { display: flex; gap: 6px; }

.segmented button,
.corner-grid button {
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  background: #14171b;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 130ms var(--ease), border-color 130ms var(--ease), background 130ms var(--ease);
}

.segmented button:hover,
.corner-grid button:hover { color: var(--text); border-color: #2c3037; }

.segmented button[aria-pressed="true"],
.corner-grid button[aria-pressed="true"] {
  color: #fff;
  background: var(--marker-soft);
  border-color: rgba(255, 47, 58, 0.5);
}

.corner-grid {
  display: grid;
  grid-template-columns: 34px 34px;
  gap: 6px;
}

.corner-grid button {
  padding: 0;
  height: 28px;
  display: grid;
  place-items: center;
}

.corner-grid .glyph {
  width: 13px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  position: relative;
  opacity: 0.65;
}

.corner-grid .glyph::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 3px;
  background: currentColor;
  border-radius: 1px;
}
.corner-grid [data-corner="tl"] .glyph::after { top: 1px; left: 1px; }
.corner-grid [data-corner="tr"] .glyph::after { top: 1px; right: 1px; }
.corner-grid [data-corner="bl"] .glyph::after { bottom: 1px; left: 1px; }
.corner-grid [data-corner="br"] .glyph::after { bottom: 1px; right: 1px; }

.btn-secondary {
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: #1c2026;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 130ms var(--ease), transform 110ms var(--ease);
}
.btn-secondary:hover { background: #252a31; }
.btn-secondary:active { transform: scale(0.97); }

.tag {
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--marker);
  background: var(--marker-soft);
  border-radius: 999px;
  padding: 3px 9px;
}
.tag.muted { color: var(--text-faint); background: var(--line-soft); font-weight: 450; }

.note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
}
.note.error { color: #ff7b83; }
.note.ok { color: #3ddc84; }
.note.error,
.note.ok { white-space: pre-line; }

/* ── Prompter clock ─────────────────────────────────────────── */
.prompter-clock {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}

.prompter-clock b {
  font-size: 17px;
  font-weight: 650;
  color: #fff;
}

.clock-left {
  font-size: 11px;
  color: #ffb020;
}

/* ── Per-card sparkline ─────────────────────────────────────── */
.bm-progress {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  margin: -2px 0 8px;
}

.bm-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: #ffb020;
  transition: width 240ms linear;
}

.bm-progress span {
  position: absolute;
  right: 0;
  top: -13px;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.bm-item[data-active="true"] .bm-progress span { color: #ffb020; }

/* The segments list folds away like the Media section. */
.bm-list-wrap summary { margin-bottom: 0; }
.bm-list-wrap .bm-list { margin-top: 10px; }

/* ── Audio name card ────────────────────────────────────────── */
.media-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.media-card span {
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 550;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(20, 22, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 10px 22px;
}

/* A pinned bottom bar ignores the idle fade. */
.stage[data-idle="true"][data-pinned="true"] .hud-bottom {
  opacity: 1;
  transform: none;
}

/* ── About / first-run guide ────────────────────────────────── */
.about-btn { margin-left: auto; }

.about-card { width: min(680px, calc(100% - 40px)); }

.about-card h3 {
  margin: 18px 0 6px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.about-lede { font-size: 14px; line-height: 1.6; color: var(--text); }

.about-steps {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-dim);
}

.about-steps li { margin-bottom: 6px; }
.about-steps b { color: var(--text); }

.about-code {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0b0d10;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-dim);
  overflow-x: auto;
  white-space: pre;
}

.about-note { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }

.about-card kbd,
.about-card code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: #191c21;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

.about-card .start { margin-top: 20px; width: 100%; }

/* ── Watermark controls ─────────────────────────────────────── */
.wm-load { display: flex; gap: 8px; }
.wm-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.wm-config {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.wm-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: repeating-conic-gradient(#1a1d21 0% 25%, #121417 0% 50%) 50% / 12px 12px;
  margin-bottom: 4px;
}

.wm-preview img {
  width: 46px;
  height: 30px;
  object-fit: contain;
  flex: none;
}

.wm-preview .meta {
  font-size: 11.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Recording indicator ────────────────────────────────────── */
/* These are DOM, never composited, so they cannot end up in the file. */
.rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--marker);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 18px rgba(255, 47, 58, 0.4);
  animation: rise 200ms var(--ease) both;
}

.rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: rec-pulse 1.4s var(--ease) infinite;
}

@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Audio ──────────────────────────────────────────────────── */
.meter {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: #24282e;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(to right, #3ddc84 0%, #3ddc84 62%, #ffb020 82%, var(--marker) 100%);
  background-size: 240px 100%;
  transform-origin: left center;
  transition: width 60ms linear;
}

.tag.live { color: #3ddc84; background: rgba(61, 220, 132, 0.14); }

.mic-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  animation: rise 200ms var(--ease) both;
}

.mic-badge[data-muted="true"] { color: #ff8b92; }
.mic-badge[data-muted="false"] #micSlash { display: none; }

.mic-meter {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.mic-meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #3ddc84;
  transition: width 60ms linear;
}

.mic-badge[data-muted="true"] .mic-meter i { background: #ff8b92; }

/* ── Saved panel ────────────────────────────────────────────── */
.help-card.narrow { width: min(420px, calc(100% - 40px)); }

.summary { margin: 0; display: grid; gap: 7px; }

.summary .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}

.summary .row span:first-child { color: var(--text-dim); }
.summary .row span:last-child { font-variant-numeric: tabular-nums; }

.saved-actions { display: flex; gap: 10px; margin-top: 18px; }
.saved-actions .start { flex: 1; margin-top: 0; }

/* ── Bookmarks on the seek bar ──────────────────────────────── */
.scrub-track { position: relative; }

/* Chapter strip: one block per segment, width ∝ play time, live countdown on
   the active one. DOM inside the HUD, so like the prompter it is visible while
   recording yet never composited into the export. */
.chapter-strip {
  display: flex;
  gap: 3px;
  margin-bottom: 7px;
  pointer-events: auto;
}

.chapter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(20, 22, 26, 0.6);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 130ms var(--ease), background 130ms var(--ease);
}

.chapter:hover { background: rgba(60, 64, 72, 0.7); }

/* Stills and zero-length pause points have no play time: a fixed marker. */
.chapter.still {
  flex: none;
  width: 32px;
  padding: 0;
  justify-content: center;
}

.chapter .ch-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: rgba(255, 176, 32, 0.22);
  pointer-events: none;
}

.chapter[data-active="true"] {
  border-color: rgba(255, 176, 32, 0.6);
  color: #fff;
}

.chapter .ch-kind {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
}

.chapter[data-active="true"] .ch-kind { color: #ffb020; }

.chapter .ch-label {
  position: relative;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.chapter.still .ch-label { display: none; }

.chapter .ch-left {
  position: relative;
  flex: none;
  font-variant-numeric: tabular-nums;
  color: #ffb020;
}

.scrub-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scrub-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
  transition: background 140ms var(--ease);
}

.scrub-mark[data-active="true"] { background: #ffb020; }

/* ── Prompter ───────────────────────────────────────────────── */
/* Deliberately outside the HUD's idle fade: notes are the reason the narrator
   is looking at the screen. It is DOM, so it is never composited. */
.prompter {
  position: absolute;
  /* Centred with auto margins, not a transform: the rise animation sets
     `transform` and would overwrite a translateX used for centring. */
  left: 0;
  right: 0;
  bottom: 86px;
  margin-inline: auto;
  width: min(760px, calc(100% - 48px));
  height: auto;
  max-height: 38vh;
  overflow: auto;
  /* Native grip in the bottom-right corner. */
  resize: both;
  min-width: 260px;
  min-height: 96px;
  z-index: 33;
  padding: 14px 18px 16px;
  border-radius: 14px;
  background: rgba(10, 12, 15, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: rise 180ms var(--ease) both;
}

/* Once dragged it is pinned by left/top, so the auto-margin centring and the
   max-height cap have to give way to the explicit geometry. */
.prompter[data-placed="true"] {
  right: auto;
  bottom: auto;
  margin-inline: 0;
  max-height: none;
}

.prompter-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.prompter[data-dragging="true"] { user-select: none; }
.prompter[data-dragging="true"] .prompter-head { cursor: grabbing; }

.prompter-grip {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 18px;
  color: var(--text-faint);
  transition: color 130ms var(--ease);
}

.prompter-head:hover .prompter-grip { color: var(--text-dim); }

.prompter-reset {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
  transition: color 130ms var(--ease), background 130ms var(--ease), opacity 130ms var(--ease);
}

.prompter:hover .prompter-reset { opacity: 1; }
.prompter-reset:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }

.prompter-index {
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: var(--marker);
  border-radius: 999px;
  padding: 2px 8px;
  flex: none;
}

.prompter-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  min-width: 0;
}

.prompter-range {
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.prompter-note {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  white-space: pre-wrap;
}

.prompter-note:empty::before {
  content: 'No note for this segment. Add one in the bookmark panel (B).';
  color: var(--text-faint);
  font-size: 13px;
}

.prompter-next {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11.5px;
  color: var(--text-dim);
}

.prompter-next:empty { display: none; }

/* ── Triggered-mode wait badge ──────────────────────────────── */
.wait-badge {
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 32px);
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 550;
  color: #08090b;
  background: #ffb020;
  box-shadow: 0 6px 24px rgba(255, 176, 32, 0.4);
  animation: rise 180ms var(--ease) both;
}

.wait-badge kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 5px;
  padding: 2px 6px;
}

.wait-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #08090b;
  animation: rec-pulse 1.2s var(--ease) infinite;
}

/* ── Bookmark panel ─────────────────────────────────────────── */
.bookmark-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  z-index: 36;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: auto;
  background: rgba(9, 10, 13, 0.94);
  border-left: 1px solid var(--line);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  animation: slide-in-right 200ms var(--ease) both;
}

.bookmark-panel[data-closing="true"] { animation: slide-out-right 160ms var(--ease) both; }

@keyframes slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes slide-out-right { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }

.bm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.bm-head h2 { font-size: 14px; }

.bm-head-actions { display: flex; align-items: center; gap: 2px; }

.ghost:disabled { opacity: 0.35; cursor: default; }
.ghost[data-confirm="true"] { color: #ff7b83; }

/* Marks a collapsed row that plays on another source. */
.bm-kind {
  flex: none;
  display: grid;
  place-items: center;
  color: #ffb020;
}

.bm-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.bm-controls .segmented { flex: 1; }
.bm-controls .segmented button { flex: 1; padding: 7px 8px; }

.bm-pending {
  margin: 0 0 12px;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 12px;
  color: #ffb020;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.3);
}

/* Flex and grid children default to min-width:auto, so they refuse to shrink
   below their content and punch out of the panel. Opt every level out. */
.bookmark-panel > * { min-width: 0; }

.bm-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.bm-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101318;
  padding: 9px 10px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
  animation: rise 200ms var(--ease) both;
}

.bm-item[data-active="true"] {
  border-color: rgba(255, 176, 32, 0.5);
  background: rgba(255, 176, 32, 0.09);
}

.bm-row { display: flex; align-items: center; gap: 7px; min-width: 0; }

.bm-num {
  flex: none;
  width: 20px;
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.bm-label {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  outline: none;
}

.bm-label:hover { border-color: var(--line); }
.bm-label:focus { border-color: rgba(255, 47, 58, 0.5); background: #14171b; }

.bm-time {
  flex: none;
  width: 54px;
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 2px;
  outline: none;
}

.bm-time:hover { border-color: var(--line); }
.bm-time:focus { border-color: rgba(255, 47, 58, 0.5); background: #14171b; color: var(--text); }

.bm-btn {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 12px;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 130ms var(--ease), background 130ms var(--ease);
}

.bm-btn:hover { color: var(--text); background: var(--line-soft); }
.bm-btn.danger:hover { color: #ff7b83; background: rgba(255, 47, 58, 0.12); }
.bm-btn[aria-pressed="true"] { color: #ffb020; }

.bm-note {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 7px;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: #14171b;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  resize: vertical;
  outline: none;
}

.bm-note:focus { border-color: rgba(255, 47, 58, 0.5); }

.bm-io { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }

.bm-io summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  list-style: none;
}

.bm-io summary::-webkit-details-marker { display: none; }
.bm-io summary::before { content: '▸ '; }
.bm-io[open] summary::before { content: '▾ '; }
.bm-io summary:hover { color: var(--text-dim); }

.bm-text {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  resize: vertical;
}

.bm-io-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.bm-io-actions .spacer { flex: 1; }
.bm-io-actions .file-btn { flex: none; }
.bm-io-actions .file-btn span { padding: 7px 11px; font-size: 12px; }

/* ── Session media, in the bookmark panel ───────────────────── */
#bmMediaCount { color: var(--text-faint); letter-spacing: 0; text-transform: none; }

.media-list {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.media-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101318;
}

.media-item[data-current="true"] {
  border-color: rgba(255, 176, 32, 0.5);
  background: rgba(255, 176, 32, 0.09);
}

.media-kind {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.media-item[data-current="true"] .media-kind { color: #ffb020; }

.media-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-lib {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
}

/* Source + fade for one segment, tucked under its row. */
.bm-media-row {
  display: flex;
  gap: 7px;
  margin-top: 6px;
  padding-left: 27px;
}

.bm-mediaref,
.bm-fade {
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 6px;
  outline: none;
  min-width: 0;
}

.bm-mediaref { flex: 1; }
.bm-fade { flex: none; width: 52px; text-align: center; font-family: var(--mono); }

.bm-mediaref:hover,
.bm-fade:hover { border-color: var(--line); }

.bm-mediaref:focus,
.bm-fade:focus {
  border-color: rgba(255, 47, 58, 0.5);
  background: #14171b;
  color: var(--text);
}

.empty kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text);
  background: #191c21;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ── Motion primitives ──────────────────────────────────────── */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}