/* Eddy, round 2: the pixel sky world meets the real app.
   The world (sky, clouds, Eddy, buttons, tags) is pixel: one unit (--u), hard edges, shadows down-right, stepped motion.
   The product (every app window) is the real Eddy Studio: its own system font, neutral "ONYX" tokens copied from
   src/renderer/theme-vars.ts, soft radii. The two meet at the window edge, which carries the world's pixel shadow.
   Headlines use the app's heavy system face for reading speed; the pixel face is only for labels and the wordmark. */

@font-face {
  font-family: "Jersey 15";
  src: url("/fonts/jersey-15-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* world palette (round-puff + retro-future kits) */
  --sky: #7cc6f2;
  --sky-light: #d6effb;
  --sky-peak: #a9daf7; /* --sky-light at 50% over --sky: the peak's wash, through which the clouds keep drifting */
  --cloud: #ffffff;
  --charcoal: #2b2b2b;
  --face: #f1f5fa;
  --slate-3: #5f7089;
  --gold: #f9bc32;
  --brown-dark: #452b1a;
  --red: #b8462a;
  --night: #1b2436;
  --night-2: #263249;
  --night-ink: #f1f5fa;
  --night-soft: #c3cfde;

  /* the app's own tokens (Eddy Studio, theme-vars.ts ONYX_LIGHT / ONYX_DARK) */
  --app-surface: #f7f7f8;
  --app-pane: #ededef;
  --app-raised: #e5e5e8;
  --app-border: #dedee0;
  --app-ink: #111113;
  --app-muted: #545459;
  --app-danger: #d30a09;
  --appd-surface: #0b0b0c;
  --appd-pane: #161618;
  --appd-raised: #1d1d20;
  --appd-border: #232326;
  --appd-ink: #f2f2f3;
  --appd-muted: #9a9aa0;
  --appd-danger: #f73c3b;

  --ink: var(--app-ink);
  --ink-soft: #3a4250;

  --u: 4px;
  --scale: 3;
  --eddy: calc(32px * var(--scale));
  --bar-h: 64px;

  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-px: "Jersey 15", ui-rounded, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --sc-canvas: var(--sky);
  --sc-surface: var(--face);
  --sc-ink: var(--app-ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--gold);
  --sc-accent-ink: var(--charcoal);
  --sc-font-display: var(--font-head);
  --sc-font-text: var(--font-text);
}
@media (max-width: 720px) { :root { --u: 3px; --scale: 2; --bar-h: 58px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; background: var(--sky); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.55;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gold); color: var(--charcoal); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 4px; }
.night :focus-visible, .foot :focus-visible { outline-color: var(--gold); }
main { position: relative; z-index: 1; }

/* pixel frame: notched outline + stepped down-right drop, painted with box-shadow */
.px {
  --line: var(--charcoal);
  --drop: rgba(43, 43, 43, 0.28);
  box-shadow:
    calc(var(--u) * -1) 0 0 0 var(--line), var(--u) 0 0 0 var(--line),
    0 calc(var(--u) * -1) 0 0 var(--line), 0 var(--u) 0 0 var(--line),
    calc(var(--u) * 2) var(--u) 0 0 var(--drop), var(--u) calc(var(--u) * 2) 0 0 var(--drop),
    calc(var(--u) * 2) calc(var(--u) * 2) 0 0 var(--drop);
}

/* ---------- type ---------- */
.h {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  color: var(--app-ink);
}
.h--xl { font-size: clamp(2.35rem, 1.1rem + 3.3vw, 4rem); letter-spacing: -0.035em; }
.h--lg { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.1rem); }
.h--md { font-size: clamp(1.6rem, 1rem + 1.7vw, 2.45rem); }
.h--sm { font-size: clamp(1.4rem, 1.05rem + 0.9vw, 1.8rem); }
/* the highlight: a gold band laid down in pixel steps behind the key words */
.hl {
  color: inherit; background-color: transparent;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.42em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.05em;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hl { animation: hl 560ms steps(7, end) 280ms both; }
}
@keyframes hl { from { background-size: 0% 0.42em; } to { background-size: 100% 0.42em; } }
.lede { font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.28rem); line-height: 1.5; max-width: 32em; color: var(--ink-soft); }
.cap { font-family: var(--font-px); font-size: 1.02rem; letter-spacing: 0.05em; color: #1f3a52; }
.fine { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- pixel buttons (the world) ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-px); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: 0.03em;
  white-space: nowrap; color: var(--charcoal); background: var(--gold); text-decoration: none;
  padding: 16px 22px 15px;
  margin: var(--u) calc(var(--u) * 3) calc(var(--u) * 3) var(--u);
  box-shadow:
    calc(var(--u) * -1) 0 0 0 var(--charcoal), var(--u) 0 0 0 var(--charcoal),
    0 calc(var(--u) * -1) 0 0 var(--charcoal), 0 var(--u) 0 0 var(--charcoal),
    calc(var(--u) * 2) var(--u) 0 0 var(--brown-dark), var(--u) calc(var(--u) * 2) 0 0 var(--brown-dark),
    calc(var(--u) * 2) calc(var(--u) * 2) 0 0 var(--brown-dark);
  transition: transform 120ms steps(2, end), box-shadow 120ms steps(2, end);
}
.btn:hover { background: #ffc94d; }
.btn:active {
  transform: translate(var(--u), var(--u));
  box-shadow:
    calc(var(--u) * -1) 0 0 0 var(--charcoal), var(--u) 0 0 0 var(--charcoal),
    0 calc(var(--u) * -1) 0 0 var(--charcoal), 0 var(--u) 0 0 var(--charcoal),
    var(--u) var(--u) 0 0 var(--brown-dark);
}

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 clamp(12px, 4vw, 40px);
  background: var(--face); box-shadow: 0 var(--u) 0 0 var(--charcoal);
}
.bar__mark { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.bar__mark img:first-child { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.bar__wordmark { width: 70px; height: auto; flex: none; }
.bar__tag {
  font-family: var(--font-px); font-size: 1.02rem; line-height: 1; letter-spacing: 0.05em; white-space: nowrap;
  color: var(--charcoal); background: #fff; padding: 5px 8px 4px; box-shadow: 0 0 0 3px var(--charcoal);
  margin-left: 4px;
}
.btn--bar { font-size: 1.15rem; padding: 9px 14px 8px; margin: 0 calc(var(--u) * 2) 0 0; flex: none; }
@media (scripting: enabled) {
  .btn--bar { visibility: hidden; opacity: 0; transition: opacity 160ms steps(3, end), visibility 0s 160ms; }
  .bar.is-cta .btn--bar { visibility: visible; opacity: 1; transition: opacity 160ms steps(3, end); }
}
@media (max-width: 400px) {
  .bar { padding: 0 10px; gap: 6px; }
  .bar__tag { font-size: 0.74rem !important; padding: 2px 4px 1px !important; }
  .btn--bar { font-size: 0.86rem !important; padding: 7px 7px 6px !important; margin-right: 6px !important; }
}
@media (max-width: 560px) {
  .bar__mark { display: grid; grid-template-columns: 32px auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 3px; align-items: center; justify-items: start; }
  .bar__mark img:first-child { grid-row: 1 / 3; }
  .bar__wordmark { width: 52px; }
  .bar__tag { font-size: 0.82rem; padding: 2px 5px 1px; box-shadow: 0 0 0 2px var(--charcoal); margin: 0 0 0 2px; }
  .btn--bar { font-size: 0.98rem; padding: 8px 9px 7px; }
}

/* ---------- the sky: three cloud layers, always drifting (stepped, like the rest of the world) ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky__layer { position: absolute; left: 0; top: 0; width: 100%; height: 200vh; will-change: transform; }
.sky__layer img {
  position: absolute; left: 0; top: var(--y); width: var(--w); height: auto; image-rendering: pixelated;
  animation: drift var(--d) steps(240, end) infinite; animation-delay: calc(var(--d) * var(--p) * -1);
}
.sky__layer--far img { opacity: 0.72; }
@keyframes drift { from { transform: translateX(100vw); } to { transform: translateX(calc(var(--w) * -1)); } }
/* night clouds: two faint, slow layers in the dark sky, so the world keeps drifting through the night scene too */
.night__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.night__sky img {
  position: absolute; left: 0; top: var(--y); width: var(--w); height: auto; image-rendering: pixelated; opacity: 0.07;
  animation: drift var(--d) steps(240, end) infinite; animation-delay: calc(var(--d) * var(--p) * -1);
}
.night__sky img.near { opacity: 0.12; }

/* ---------- Eddy ---------- */
.eddy-static { width: var(--eddy); height: var(--eddy); image-rendering: pixelated; }
.flyer {
  position: fixed; left: 0; top: 0; z-index: 55;
  width: var(--eddy); height: var(--eddy);
  image-rendering: pixelated; pointer-events: none; will-change: transform;
}
.flyer[hidden] { display: none; }
html.has-flight .eddy-static.stop { visibility: hidden; }
.stop { position: absolute; z-index: 3; }

/* ---------- app windows (the product) ---------- */
.win {
  position: relative;
  background: var(--app-surface); color: var(--app-ink);
  font-family: var(--font-text); font-size: 13px; line-height: 1.4;
  border-radius: 12px; border: 1px solid var(--app-border);
  box-shadow: 8px 8px 0 0 rgba(43, 43, 43, 0.22), 4px 4px 0 0 rgba(43, 43, 43, 0.12);
}
.win--dark { background: var(--appd-surface); color: var(--appd-ink); border-color: #2a2a2e; box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.45); }
.win__bar {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px;
  border-bottom: 1px solid var(--app-border); font-size: 12px; color: var(--app-muted);
}
.win--dark .win__bar { border-color: var(--appd-border); color: var(--appd-muted); }
.win__dots { display: flex; gap: 6px; flex: none; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d9d9dc; }
.win__dots i:first-child { background: #ff5f57; } .win__dots i:nth-child(2) { background: #febc2e; } .win__dots i:nth-child(3) { background: #28c840; }
.win__title { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-ink); }
.win--dark .win__title { color: var(--appd-ink); }
.win__pill {
  flex: none; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--app-raised); color: var(--app-ink);
}
.win__pill.is-editing { background: var(--gold); color: var(--charcoal); }
.win__tag { flex: none; font-family: var(--font-px); font-size: 0.86rem; line-height: 1; letter-spacing: 0.05em; padding: 3px 6px 2px; color: var(--charcoal); background: #fff; box-shadow: 0 0 0 2px var(--charcoal); }
.win__tag--dark { color: var(--appd-ink); background: var(--appd-raised); box-shadow: 0 0 0 2px #5a5a60; }
@media (max-width: 430px) { .win__tag { font-size: 0.74rem; padding: 2px 4px 1px; } }
.mcb { position: relative; height: 26px; background: var(--app-raised); border: 1px solid var(--app-border); border-radius: 4px; overflow: visible; }
.mcb__rg { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(211, 10, 9, 0.34) 0 5px, rgba(211, 10, 9, 0.14) 5px 10px); box-shadow: inset 0 0 0 2px var(--app-danger); border-radius: 3px; }
.mcb__rg--pause { background: rgba(211, 10, 9, 0.28); box-shadow: none; }
.mcb { height: 14px; }
.mcb__legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.mcb__legend .chip--rg { font-family: var(--font-px); font-weight: 400; font-size: 0.86rem; letter-spacing: 0.03em; border-radius: 0; padding: 2px 5px 1px; background: var(--app-danger); color: #fff; }
.mcb__legend .chip--dead-air { background: var(--charcoal); }
.pane__h { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--app-ink); }
.script { font-size: 12.5px; line-height: 1.55; color: var(--app-ink); }
.w--cut { text-decoration: line-through; text-decoration-color: var(--app-danger); text-decoration-thickness: 2px; color: #6f6f75; }
.script.is-live .w--cut { text-decoration: none; color: inherit; }
.script.is-live .w--cut.is-struck { text-decoration: line-through; text-decoration-color: var(--app-danger); text-decoration-thickness: 2px; color: #55555b; } /* 5.6:1 even under the gold current-word highlight */
.script.is-live .w--cut.is-gone { display: none; }
.script .w.is-now { background: rgba(249, 188, 50, 0.45); border-radius: 2px; }
/* status badges sit top right: the delivered edit carries its own top-left title chip in its first second */
.badge {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  font-family: var(--font-px); font-size: 0.95rem; line-height: 1; letter-spacing: 0.06em;
  padding: 4px 7px 3px; background: var(--gold); color: var(--charcoal); box-shadow: 0 0 0 2px var(--charcoal);
}
.badge.is-raw, .badge--dark { background: #fff; }
.cc {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 2; max-width: 92%; width: max-content;
  font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; color: #fff;
  background: rgba(11, 11, 12, 0.8); padding: 4px 10px; border-radius: 6px;
}
.cc:empty { display: none; }
.cc s { text-decoration-color: var(--appd-danger); text-decoration-thickness: 2px; color: #c9c9ce; }
.chip {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--app-raised); color: var(--app-ink);
}
.chip--dark { background: var(--appd-raised); color: var(--appd-ink); border: 1px solid #2f2f34; }

/* sound buttons: pixel-world controls laid over the product */
.snd {
  position: absolute; left: 10px; top: 10px; z-index: 3; cursor: pointer;
  font-family: var(--font-px); font-size: 1.02rem; line-height: 1; letter-spacing: 0.04em;
  background: var(--gold); color: var(--charcoal); border: 0; padding: 7px 10px 6px;
  box-shadow: 0 0 0 2px var(--charcoal), 3px 3px 0 2px var(--brown-dark);
}
.snd[aria-pressed="true"] { background: #fff; }
.snd--light { position: static; }

/* ---------- the timeline (shared by hero and peak; mirrors the app's Camera/Voice lanes) ---------- */
.tl {
  --lane-e: calc(var(--eddy) * 29 / 32 + 4px);
  --lane-h: 30px;
  /* room for half of Eddy past each end of the track: he stands exactly on the playhead, even at 0 and at the end */
  --pad-l: 66px; --pad-r: calc(var(--eddy) / 2 + 4px);
  position: relative; background: var(--app-pane); border-top: 1px solid var(--app-border); padding: 4px var(--pad-r) 10px var(--pad-l); border-radius: 0 0 12px 12px;
}
.tl .tl__lane.tl__lane--eddy { height: var(--lane-e); margin-top: 0; }
.tl__lane--eddy .tl__name { top: auto; bottom: 2px; translate: 0 0; color: #6b500c; }
.stop--tl { right: 0; bottom: calc(var(--scale) * -3px); }
.tl__ruler { position: relative; height: 18px; font-size: 10px; color: var(--app-muted); font-family: var(--font-mono); }
.tl__ruler span { position: absolute; top: 2px; translate: -2px 0; }
.tl.is-zooming .tl__ruler { visibility: hidden; }
.tl__ruler span::before { content: ""; position: absolute; left: 0; top: 13px; width: 1px; height: 4px; background: #b9b9be; }
.tl__lane { position: relative; height: var(--lane-h); margin-top: 4px; }
.tl--peak { --lane-h: 42px; }
.tl__name { position: absolute; left: -58px; top: 50%; translate: 0 -50%; font-size: 11px; font-weight: 600; color: var(--app-muted); }
.tl__track { position: relative; height: 100%; }
.seg {
  position: absolute; top: 0; bottom: 0;
  background-image: var(--img); background-repeat: no-repeat;
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.16);
}
.tl__lane--cam .seg { background-color: #2a2a2d; }
/* Camera thumbnails keep 16:9 at the lane height, never stretched. Static: the 14-frame strip at true scale, anchored at
   each segment's place in the clip. Live: app.js lays one thumbnail per slot, each showing the frame at its own moment. */
.tl__lane--cam .seg {
  --fw: calc(var(--lane-h) * 16 / 9);
  background-size: calc(14 * var(--fw)) 100%; background-position: calc(var(--a, 0) * 14 * var(--fw) * -1) 0;
  overflow: hidden; box-shadow: none;
}
.tl__lane--cam .seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.16); pointer-events: none; }
.tl.is-live .tl__lane--cam .seg { background-image: none; }
.tile { position: absolute; top: 0; bottom: 0; left: 0; background-image: var(--frames); background-repeat: no-repeat; }
.tl__lane--voice .seg { background-color: var(--app-raised); }
.tl__regions { position: absolute; left: var(--pad-l); right: var(--pad-r); top: calc(4px + var(--lane-e) + 22px); height: calc(var(--lane-h) * 2 + 4px); pointer-events: none; }
.rg {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, rgba(211, 10, 9, 0.30) 0 6px, rgba(211, 10, 9, 0.12) 6px 12px);
  box-shadow: inset 0 0 0 2px var(--app-danger); border-radius: 3px;
}
.rg--pause { background: rgba(211, 10, 9, 0.22); box-shadow: none; }
.rg b {
  position: absolute; left: 3px; top: 3px; white-space: nowrap; z-index: 1;
  font-family: var(--font-px); font-weight: 400; font-size: 0.92rem; line-height: 1; letter-spacing: 0.04em;
  background: var(--app-danger); color: #fff; padding: 3px 5px 2px;
}
.rg b:empty { display: none; }
.rg--dead-air b { background: var(--charcoal); }
.rg b i { font-style: normal; }
/* static timelines can't measure, so a dead-air label stacks its length under its name and always fits its region */
.tl:not(.is-live) .rg--dead-air b i { display: block; margin-top: 2px; }
.tl__playhead { position: absolute; top: calc(4px + var(--lane-e)); height: calc(var(--lane-h) * 2 + 26px); left: var(--pad-l); width: 2px; margin-left: -1px; background: var(--charcoal); display: none; z-index: 2; }
.tl.is-live .tl__playhead { display: block; }
.tl.is-live .rg { opacity: 0; }
.tl.is-live .rg.is-found { opacity: 1; }
.tl.is-live .rg.is-found b { animation: stamp 240ms steps(3, end) both; }
@keyframes stamp { from { transform: scale(1.6); } to { transform: none; } }
/* live labels hide by visibility only, so app.js can always measure them against their region */
.tl.is-closing .rg b { visibility: hidden; }
.rg--narrow b { display: none; }
.tl.is-live .rg--narrow b { display: block; }
/* static fallback: the finished edit as its own bar (live mode collapses the real lanes instead) */
.tl__done { position: relative; display: grid; grid-template-columns: 54px 1fr; align-items: center; margin-top: 8px; }
.tl__done-name { font-size: 11px; font-weight: 600; color: var(--app-ink); margin-left: -54px; }
.tl__done-track { position: relative; height: 26px; }
.tl__done-track i { position: absolute; top: 0; bottom: 0; background-image: var(--img); background-repeat: no-repeat; background-size: calc(14 * 26px * 16 / 9) 100%; background-position: calc(var(--a, 0) * 14 * 26px * 16 / 9 * -1) 0; background-color: #2a2a2d; box-shadow: inset 0 0 0 2px var(--gold); border-radius: 3px; }
.tl__done-track b { position: absolute; top: 50%; translate: 0 -50%; font-family: var(--font-px); font-weight: 400; font-size: 0.95rem; background: var(--gold); color: var(--charcoal); padding: 3px 6px 2px; box-shadow: 0 0 0 2px var(--charcoal); }
.tl.is-live .tl__done { display: none; }
/* with scripts and motion on, the live timeline collapses itself, so the static bar is never drawn (no layout shift) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .tl__done { display: none; } }
@media (max-width: 720px) { .tl__done { grid-template-columns: 1fr; } .tl__done-name { margin: 0 0 4px; } }

/* ---------- hero ---------- */
.hero { position: relative; padding: calc(var(--bar-h) + clamp(28px, 6vh, 72px)) 0 clamp(36px, 7vh, 80px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero__copy { display: grid; gap: 22px; align-content: start; }
.hero__copy .lede { color: #1d2b3a; }
.cta-row { display: grid; gap: 10px; justify-items: start; }
.cta-note { font-size: 0.95rem; color: #1d2b3a; }
.hero__app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: end; }
.heroapp { width: 100%; max-width: 700px; }
.heroapp__body { display: grid; grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); }
.heroapp__script { padding: 12px 12px 10px 14px; border-right: 1px solid var(--app-border); overflow: hidden; }
.heroapp__preview { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.heroapp__preview img, .heroapp__preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroapp__preview video { opacity: 0; }
.heroapp__preview video.is-on { opacity: 1; }
.win__toast {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 4; white-space: nowrap;
  font-size: 12px; font-weight: 600; background: var(--app-ink); color: #fff; padding: 6px 12px; border-radius: 999px;
  opacity: 0;
}
.win__toast.is-on { opacity: 1; }
.stop--hero { right: 18px; top: calc(var(--eddy) * -1 + 3px * var(--scale)); }

.bank { position: relative; z-index: 1; height: clamp(110px, 16vh, 180px); overflow: hidden; }
.bank--to-night { background: linear-gradient(transparent 0 58%, var(--night) 58% 100%); }
.bank--to-sky { background: linear-gradient(var(--sky-peak) 0 50%, transparent 50% 100%); }
.bank--dawn { height: clamp(200px, 34vh, 380px); background: linear-gradient(var(--night) 0 30%, var(--night-2) 30% 46%, #3d5677 46% 58%, #6f9cc4 58% 70%, var(--sky-peak) 70% 100%); }
.bank img { position: absolute; image-rendering: pixelated; height: auto; }

/* ---------- 2 · night: the problem, in the app's dark theme ---------- */
.night { position: relative; z-index: 1; background: var(--night); color: var(--night-ink); padding: clamp(36px, 7vh, 88px) 0 clamp(44px, 9vh, 110px); }
.night .h { color: var(--night-ink); }
.stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stars::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--u); height: var(--u);
  /* stars live in the outer margins and the top edge only, so none ever sits between the letters of a line */
  box-shadow:
    2vw 7vh 0 0 #f1f5fa, 3vw 31vh 0 0 #9aabc2, 1.5vw 58vh 0 0 #f1f5fa, 2.5vw 84vh 0 0 #9aabc2,
    96.5vw 11vh 0 0 #f1f5fa, 97vw 38vh 0 0 #9aabc2, 96vw 63vh 0 0 #f1f5fa, 97.5vw 90vh 0 0 #9aabc2,
    24vw 1.2vh 0 0 #9aabc2, 47vw 0.8vh 0 0 #f1f5fa, 71vw 1.5vh 0 0 #9aabc2;
}
.night__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.night__app { position: relative; padding-top: calc(var(--eddy) * 0.6); }
.night__copy { display: grid; gap: 22px; }
/* the agitation is its own beat: the line beside the raw take it describes */
.night__grid--agitate { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); margin-top: clamp(56px, 11vh, 128px); }
.night__agitate { font-family: var(--font-head); font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; color: var(--night-ink); max-width: 15em; }
.night__clip { position: relative; }
.night__stat { font-size: 1rem; color: var(--night-soft); max-width: 26em; border-left: var(--u) solid var(--gold); padding-left: 14px; }
.night__stat small { display: block; margin-top: 4px; font-size: 0.82rem; color: #a9b8cc; }
.rawwin__preview { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 0 0 12px 12px; }
.rawwin__preview img, .rawwin__preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rawwin__preview video { opacity: 0; }
.rawwin__preview video.is-on { opacity: 1; }
.deadair {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  font-family: var(--font-px); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); line-height: 1; letter-spacing: 0.04em;
  color: #fff; background: rgba(11, 11, 12, 0.74); padding: 8px 12px 6px; box-shadow: 0 0 0 3px var(--appd-danger);
}
.deadair:empty { display: none; }
.ovwin__body { background: var(--appd-pane); border-top: 1px solid var(--appd-border); padding: 12px 14px 14px; border-radius: 0 0 12px 12px; }
.rawwin__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ov { position: relative; }
.ov__ruler { position: relative; height: 16px; font-size: 10px; color: var(--appd-muted); font-family: var(--font-mono); }
.ov__ruler span { position: absolute; top: 0; translate: -2px 0; }
.ov__ruler span:last-child { translate: -100% 0; }
.ov__svg { width: 100%; height: clamp(76px, 9vw, 120px); }
.ov__wave rect { fill: var(--gold); }
.ov__marks .m--pause { fill: rgba(247, 60, 59, 0.6); }
.ov__marks .m--restart, .ov__marks .m--retake { fill: var(--appd-danger); }
.stop--night { left: 18px; top: calc(var(--eddy) * -1 + 3px * var(--scale)); }

/* ---------- 3 · the cut (peak) ---------- */
.cut { position: relative; z-index: 1; background: rgba(214, 239, 251, 0.5); }
.cut__stage { height: 100vh; height: 100svh; overflow: hidden; }
.cut__inner {
  height: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(0, 8.8fr) minmax(292px, 3fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "h h" "win side" ". .";
  column-gap: clamp(20px, 3vw, 44px); row-gap: clamp(14px, 2.4vh, 26px);
  padding-top: calc(var(--bar-h) + clamp(16px, 4vh, 44px));
  align-content: start;
}
.cut__h { grid-area: h; max-width: 22em; }
.cutwin { grid-area: win; align-self: start; }
.cutwin__body { display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); }
.cutwin__preview { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.cutwin__preview img, .cutwin__preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cutwin__preview video { opacity: 0; }
.cutwin__preview video.is-on { opacity: 1; }
.cutwin__script { padding: 12px 14px; border-left: 1px solid var(--app-border); overflow: hidden; }
.cutwin__script .script { font-size: 13.5px; }
.stop--peak { right: 16px; top: calc(var(--eddy) * -1 + 3px * var(--scale)); }
.cut__side { grid-area: side; display: grid; gap: 18px; align-content: start; }
.cut__swap { display: grid; gap: 18px; align-content: start; }
.cut__result { display: grid; gap: 14px; }
.chg { font-size: 13px; }
.chg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px solid var(--app-border); }
.chg__head b { font-size: 15px; font-weight: 600; }
.chg__head span { font-size: 12px; color: var(--app-muted); white-space: nowrap; }
.chg__head .win__tag { margin-right: auto; align-self: center; font-size: 0.8rem; color: var(--charcoal); }
.chg__list { list-style: none; margin: 0; padding: 6px 8px 10px; display: grid; gap: 4px; }
.chg__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; background: #fff; border: 1px solid var(--app-border); }
.chg__k { white-space: nowrap; }
.chg__row i { width: 8px; height: 8px; border-radius: 2px; background: var(--app-danger); }
.chg__row[data-kind="dead air"] i { background: var(--charcoal); }
.chg__k { font-weight: 600; }
.chg__v { color: var(--app-muted); font-variant-numeric: tabular-nums; }
.chg__sw { width: 26px; height: 15px; border-radius: 999px; background: var(--app-ink); position: relative; }
.chg__sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.cut.is-live .chg__row { visibility: hidden; }
.cut.is-live .chg__row.is-found { visibility: visible; animation: rowin 240ms steps(3, end) both; }
@keyframes rowin { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.chg__total { font-weight: 600; color: var(--app-ink); }
.cut__delta { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 0.9rem + 1vw, 2rem); line-height: 1.3; letter-spacing: -0.02em; }
.cut__delta b, .cut__dl { white-space: nowrap; }
.cut__dl { display: inline-block; } /* wraps only between "raw" and the arrow, never orphaning "finished" */
.cut__delta b { background: var(--gold); padding: 0 6px; box-shadow: 0 0 0 3px var(--charcoal); }
.cut__delta b:first-child { background: #fff; text-decoration: line-through; text-decoration-color: var(--app-danger); text-decoration-thickness: 3px; }
.cut__listen { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.mech { font-size: 1.02rem; font-weight: 600; color: var(--app-ink); }
.proof { font-size: 0.98rem; color: var(--ink-soft); }
.cut.is-live .cut__result > * { visibility: hidden; opacity: 0; transition: opacity 200ms steps(3, end), visibility 0s 200ms; }
.cut.is-live.s-after .cut__result > * { visibility: visible; opacity: 1; transition: opacity 200ms steps(3, end); }
.cut.is-live.s-after .cut__result > :nth-child(2) { transition-delay: 120ms; }
.cut.is-live.s-after .cut__result > :nth-child(3) { transition-delay: 240ms; }

/* ---------- 3b · more real cuts + the real app ---------- */
.more { position: relative; z-index: 1; padding: clamp(64px, 11vh, 130px) 0 clamp(48px, 8vh, 96px); }
.more__h { max-width: 22em; margin-bottom: clamp(20px, 3vh, 32px); }
.more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.mc { display: grid; gap: 10px; align-content: start; }
.mc__screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--app-border); box-shadow: 6px 6px 0 0 rgba(43, 43, 43, 0.22); }
.mc__screen img, .mc__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc__screen video { opacity: 0; }
.mc__screen video.is-on { opacity: 1; }
.mc__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; cursor: pointer;
  width: 64px; height: 56px; border: 0; background: var(--gold);
  box-shadow: 0 0 0 3px var(--charcoal), 5px 5px 0 3px var(--brown-dark);
}
.mc__play span { position: absolute; left: 26px; top: 16px; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 16px; border-color: transparent transparent transparent var(--charcoal); }
.mc.is-playing .mc__play { left: 10px; top: auto; bottom: 10px; translate: none; width: 40px; height: 36px; box-shadow: 0 0 0 2px var(--charcoal), 3px 3px 0 2px var(--brown-dark); }
.mc.is-playing .mc__play span { left: 13px; top: 11px; width: 14px; height: 14px; border: 0; background: var(--charcoal); }
.mc figcaption { display: grid; gap: 6px; font-size: 0.95rem; }
.mc figcaption .chip { justify-self: start; background: var(--app-danger); color: #fff; font-family: var(--font-px); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.04em; border-radius: 0; padding: 3px 7px 2px; }
.mc__dur { font-weight: 700; color: var(--app-ink); }
.mc__dur { font-variant-numeric: tabular-nums; }
.mc__words { font-size: 0.86rem; line-height: 1.45; color: #1d3247; }
.mc__words s { text-decoration-color: var(--app-danger); text-decoration-thickness: 2px; color: #3b4f63; }

.shots { position: relative; display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); grid-template-rows: auto auto; gap: clamp(28px, 3vw, 44px) clamp(20px, 3vw, 44px); margin-top: calc(var(--eddy) + clamp(40px, 6vh, 72px)); align-items: start; }
.shot { position: relative; display: grid; gap: 10px; align-content: start; }
.shot:nth-child(1) { grid-column: 1; grid-row: 1; }
.shot:nth-child(2) { grid-column: 1; grid-row: 2; }
.shot:nth-child(3) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.win--shot { overflow: hidden; border-radius: 10px; }
.win--shot img { width: 100%; height: auto; display: block; }
/* each real screenshot opens full size; phones show a crop of it at a readable 1:1 scale, with a visible cue */
.shot__open { position: relative; display: block; cursor: zoom-in; }
/* the frame clips its contents, so the link's focus ring is drawn inside it, and a second ring outlines the frame */
.shot__open:focus-visible { outline: 3px solid var(--charcoal); outline-offset: -3px; }
.win--shot:has(.shot__open:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.shot__full { position: absolute; right: 8px; bottom: 8px; font-family: var(--font-px); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.04em; background: var(--charcoal); color: #fff; padding: 3px 7px 2px; border-radius: 0; }
/* desktop: the app's own Changes panel from the same screenshot, at 1:1 over its place in the editor, so the rows read */
.shot__zoom { position: absolute; right: -10px; top: 10px; width: clamp(250px, 46%, 303px); border-radius: 8px; overflow: hidden; pointer-events: none; box-shadow: 0 0 0 3px var(--charcoal), 6px 6px 0 3px rgba(43, 43, 43, 0.22); }
.shot__zoom img { display: block; width: 100%; height: auto; }
.shot:has(.shot__zoom) .shot__full { right: auto; left: 8px; } /* the callout covers the right corner */
@media (max-width: 720px) { .shot__zoom { display: none; } .shot:has(.shot__zoom) .shot__full { left: auto; right: 8px; } }
.shot figcaption { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem); letter-spacing: -0.015em; color: var(--app-ink); }
.stop--more { right: 14px; top: calc(var(--eddy) * -1 + 3px * var(--scale)); }
.mc { position: relative; }
.stop--cuts { left: 14px; top: calc(var(--eddy) * -1 + 3px * var(--scale)); }
.more__h { margin-bottom: calc(var(--eddy) + 10px) !important; }
.rg b.is-hidden { visibility: hidden; }
.shots__cap { margin-top: 16px; }

/* ---------- 4+5 · offer + apply ---------- */
.offer { position: relative; z-index: 1; padding: clamp(72px, 12vh, 140px) 0 clamp(48px, 8vh, 96px); }
.card { position: relative; background: var(--face); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.card__offer { padding: clamp(24px, 4vw, 52px); display: grid; gap: 20px; align-content: start; }
.card__form { position: relative; background: #fff; padding: clamp(22px, 3vw, 36px); box-shadow: inset var(--u) 0 0 0 var(--charcoal); display: grid; gap: 12px; align-content: start; }
.note { background: #fff; padding: 14px 16px; max-width: 34em; font-size: 1.02rem; line-height: 1.45; box-shadow: 0 0 0 3px var(--charcoal), 6px 6px 0 3px rgba(43, 43, 43, 0.18); }
.note footer { margin-top: 6px; font-family: var(--font-px); font-size: 1.25rem; }
.terms { list-style: none; padding: 0; display: grid; gap: 10px; }
.terms li { position: relative; padding-left: 26px; }
.terms li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 12px; height: 12px; background: var(--gold); box-shadow: 0 0 0 2px var(--charcoal); }
.limits { font-size: 0.95rem; color: var(--ink-soft); border-left: var(--u) solid var(--charcoal); padding-left: 12px; }
.micro { font-size: 0.9rem; color: var(--ink-soft); }
.fit { margin-top: 22px; font-size: 1rem; color: #0f2c42; }
.fit a { font-weight: 600; }
.offer > .wrap > .fine { margin-top: 6px; color: #1d3247; }
.stop--land { right: 22px; top: calc(var(--eddy) * -1 + 3px * var(--scale)); }
.signup-card { display: grid; gap: 10px; }
.signup-card h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.015em; margin: 0; }
.signup-card .fine { font-size: 0.86rem; }

/* Kit renders this form (embed kept byte-identical); only its look is restyled here */
.kit-embed { min-height: 120px; }
.kit-embed .formkit-form { max-width: none !important; font-family: var(--font-text) !important; background: transparent !important; }
.kit-embed .formkit-form [data-style="clean"] { padding: 0 !important; width: 100% !important; }
.kit-embed .formkit-fields { margin: 0 !important; display: grid !important; gap: 12px !important; }
.kit-embed .formkit-field, .kit-embed .formkit-submit { margin: 0 !important; flex: none !important; }
.kit-embed .formkit-input {
  border-radius: 0 !important; border: 0 !important; background: #fff !important; color: var(--charcoal) !important;
  font-size: 1rem !important; padding: 13px 14px !important; width: 100% !important;
  box-shadow: inset 0 0 0 var(--u) var(--charcoal) !important;
}
.kit-embed .formkit-submit {
  border-radius: 0 !important; background: var(--gold) !important; color: var(--charcoal) !important;
  font-family: var(--font-px) !important; font-weight: 400 !important; font-size: 1.35rem !important;
  box-shadow: inset 0 0 0 var(--u) var(--charcoal) !important; width: 100% !important;
}
.kit-embed .formkit-submit > span { padding: 14px 18px !important; }
.kit-embed .formkit-input:focus, .kit-embed .formkit-input:focus-visible { outline: 3px solid var(--charcoal) !important; outline-offset: 3px !important; box-shadow: inset 0 0 0 var(--u) var(--charcoal), 0 0 0 6px var(--gold) !important; }
.kit-embed .formkit-submit:focus-visible, .kit-embed .formkit-checkboxes input:focus-visible + label, .kit-embed a:focus-visible { outline: 3px solid var(--charcoal) !important; outline-offset: 3px !important; }
.kit-embed .formkit-submit:hover > span { background: rgba(255, 255, 255, 0.18) !important; }
.kit-embed .formkit-checkboxes, .kit-embed .formkit-checkbox { color: var(--charcoal) !important; font-size: 0.95rem !important; }
.kit-embed .formkit-powered-by-convertkit-container { margin-top: 10px !important; }
.kit-fallback { font-size: 0.86rem; }

.faq { margin-top: clamp(56px, 9vh, 100px); display: grid; gap: 12px; max-width: 860px; }
.faq h2 { margin-bottom: 8px; }
.faq details { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 4px 4px 0 0 rgba(43, 43, 43, 0.14); }
.faq summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 600; list-style: none; position: relative; border-radius: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-family: var(--font-px); font-size: 1.6rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 16px 16px; max-width: 46em; color: var(--ink-soft); }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 1; background: var(--charcoal); color: var(--face); padding: 28px 0; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; font-size: 0.92rem; }
.foot__inner img { width: 32px; height: 32px; image-rendering: pixelated; }
.foot nav { display: flex; gap: 18px; margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero__grid, .night__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__app { justify-items: stretch; }
  .heroapp { max-width: none; }
  .night__copy { order: -1; }
  .night__grid--agitate { margin-top: clamp(40px, 8vh, 72px); }
  .cut__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "win" "side"; }
  /* phones: the Changes list and the result share one spot; one swaps for the other without moving anything */
  .cut.is-live .cut__swap > * { grid-area: 1 / 1; align-self: start; }
  .cut.is-live.s-after .chg, .cut.is-live.s-after .chg * { visibility: hidden !important; animation: none; }
  .chg__head { padding: 8px 12px 6px; }
  .chg__list { padding: 4px 8px 8px; grid-template-columns: 1fr 1fr; gap: 4px; }
  .chg__row { padding: 4px 6px; }
  @media (max-width: 400px) { .chg__row { gap: 5px; padding: 4px 5px; } .chg__k, .chg__v { font-size: 12px; } }
  .card { grid-template-columns: minmax(0, 1fr); }
  .card__form { box-shadow: inset 0 var(--u) 0 0 var(--charcoal); }
  .card__offer { padding-bottom: calc(var(--eddy) + 12px); }
}
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .heroapp__body { grid-template-columns: minmax(0, 1fr); }
  .heroapp__script, .cutwin__script { display: none; }
  .cutwin__body { grid-template-columns: minmax(0, 1fr); }
  .tl { --pad-l: calc(var(--eddy) / 2 + 4px); --lane-e: calc(var(--eddy) * 29 / 32 + 2px); }
  .tl__name { display: none; }
  .tl, .tl--peak { --lane-h: 26px; }
  .rg b { font-size: 0.8rem; padding: 2px 4px 1px; }
  .win__title { font-size: 11px; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  /* phones: the three extra cuts are one swipeable row (the next card peeks in), so the peak keeps the most scroll */
  .more__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
    --bleed: clamp(16px, 5vw, 64px); margin: calc(var(--eddy) * -1) calc(var(--bleed) * -1) 0; padding: var(--eddy) var(--bleed) 12px; scroll-padding-inline: var(--bleed);
  }
  .mc { scroll-snap-align: start; }
  .ov__ruler span:nth-child(even) { display: none; }
  .shot:nth-child(n) { grid-column: 1; grid-row: auto; }
  .shots { gap: 28px; margin-top: 44px; }
  .shot:nth-child(3) { margin-top: calc(var(--eddy) - 6px); } /* Eddy perches on the export shot */
  .cut__inner { row-gap: 12px; }
  .cut__h { font-size: clamp(1.6rem, 1rem + 3vw, 2.1rem); }
  .cut__result { gap: 10px; }
  .mech { font-size: 0.95rem; }
  .proof { font-size: 0.9rem; }
  .btn:not(.btn--bar) { font-size: 1.2rem; padding: 14px 16px 13px; }
  .foot nav { margin-left: 0; }
}
@media (max-height: 820px) and (min-width: 1001px) {
  .cut__h { font-size: clamp(1.7rem, 0.9rem + 2vw, 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .formkit-spinner > div { animation: none !important; } /* Kit's hidden submit spinner loops forever; the Kit block itself stays byte-identical */
  .btn, .btn--bar, .snd { transition: none !important; }
  .sky__layer img, .night__sky img { animation: none; transform: translateX(calc((1 - var(--p)) * 100vw)); }
  .cut__stage { height: auto; }
  .cut__inner { padding-bottom: clamp(48px, 8vh, 96px); }
}

/* ======================================================================
   Information pages (/beta/, /privacy/, /requirements/, /request-received/, 404): same world, calmer
   ====================================================================== */
.preview-bar { margin: 0; background: var(--charcoal); color: var(--face); text-align: center; font-family: var(--font-px); font-size: 1rem; letter-spacing: 0.04em; padding: 8px 12px; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 18px; padding-bottom: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-px); font-weight: 700; }
.wordmark-logo { width: 86px; height: auto; }
.wordmark span { background: var(--face); padding: 2px 8px; box-shadow: 0 0 0 3px var(--charcoal); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.98rem; }
.site-header nav a { text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { text-decoration: underline; }
.doc {
  background: var(--face); max-width: 820px; margin: 8px auto 64px;
  padding: clamp(24px, 5vw, 48px) clamp(18px, 5vw, 48px) clamp(28px, 5vw, 52px);
  box-shadow:
    calc(var(--u) * -1) 0 0 0 var(--charcoal), var(--u) 0 0 0 var(--charcoal),
    0 calc(var(--u) * -1) 0 0 var(--charcoal), 0 var(--u) 0 0 var(--charcoal),
    calc(var(--u) * 2) var(--u) 0 0 rgba(43, 43, 43, 0.22), var(--u) calc(var(--u) * 2) 0 0 rgba(43, 43, 43, 0.22),
    calc(var(--u) * 2) calc(var(--u) * 2) 0 0 rgba(43, 43, 43, 0.22);
}
@media (max-width: 860px) { .doc { margin-left: 16px; margin-right: 16px; width: auto; } }
.doc h1 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1.05; margin: 6px 0 14px; }
.doc h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.015em; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem); margin: 34px 0 10px; }
.doc h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin: 26px 0 8px; }
.doc p, .doc li, .doc dd { color: #33414f; }
.doc ul { padding-left: 1.2em; display: grid; gap: 6px; margin: 12px 0 0; }
.doc ul li::marker { color: var(--charcoal); }
.doc p + p { margin-top: 10px; }
.eyebrow { font-family: var(--font-px); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-3); }
.doc-lede { font-size: 1.15rem; }
.terms dt { font-weight: 700; }
dl.terms { display: grid; gap: 10px; margin: 10px 0 18px; }
dl.terms dd { margin: 0; }
.doc .signup-card { margin-top: 24px; background: #fff; padding: 20px; box-shadow: inset 0 0 0 var(--u) var(--charcoal); }
.site-footer { background: var(--charcoal); color: var(--face); padding: 24px 0; }
.site-footer .fine { color: var(--face); }

/* ======================================================================
   Round 3: the four-act montage, the scissors, the tab player, the step cards, the offer for 10.
   Motion (app.js, motion-core's approved middle voice): non-text parts anticipate, overshoot, squash and arc;
   text only fades and rises a few pixels (type never bounces).
   ====================================================================== */

/* ---------- the montage ---------- */
.hero__app.mt { justify-items: stretch; align-content: center; }
.mt .heroapp { max-width: none; }
.mt__title {
  display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.12rem, 0.92rem + 0.6vw, 1.5rem);
  letter-spacing: -0.015em; line-height: 1.15; color: var(--app-ink);
}
.mt__n {
  flex: none; font-family: var(--font-px); font-weight: 400; font-size: 1rem; letter-spacing: 0.05em; line-height: 1;
  background: var(--charcoal); color: #fff; padding: 4px 6px 3px;
}
.mt__title b { font-weight: 800; }
.heroapp__body { position: relative; }
.heroapp__side { position: relative; display: grid; border-right: 1px solid var(--app-border); overflow: hidden; }
.heroapp__side > .pane { grid-area: 1 / 1; padding: 12px 12px 10px 14px; visibility: hidden; min-width: 0; }
.heroapp__side > .pane.is-on { visibility: visible; }
.pane__sub { font-size: 11px; font-weight: 600; color: var(--app-muted); margin: -2px 0 8px; text-transform: none; }
.pane__foot { margin-top: 8px; font-size: 11px; color: var(--app-muted); }
/* AI Tools rows (AiToolsBar.tsx) */
.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tool { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--app-border); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tool span { overflow: hidden; text-overflow: ellipsis; }
.tool__state { position: relative; font-size: 11px; font-weight: 600; padding: 1px 7px 1px 16px; border-radius: 999px; background: var(--app-raised); }
.tool__state::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #1f9d55; transform: scale(var(--k, 1)); }
.tool__btn { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--app-raised); }
.proofline { margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; color: var(--app-ink); background: var(--app-pane); padding: 5px 7px; border-radius: 6px; }
.chgrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; font-weight: 600; }
.chgrow i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--app-ink); transform: scale(var(--k, 1)); }
/* Layouts panel (LayoutsPanel.tsx, layout-presets.ts) */
.presets { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.preset { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 6px 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.preset span { overflow: hidden; text-overflow: ellipsis; }
.presets__hl { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 28px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px var(--app-ink); transform-origin: 50% 50%; }
.preset__ic { flex: none; position: relative; width: 22px; height: 13px; border-radius: 2px; background: var(--app-raised); box-shadow: inset 0 0 0 1px #9a9aa0; }
.preset__ic::after { content: ""; position: absolute; border-radius: 1px; background: #6f6f75; }
.preset__ic--speaker_full::after { left: 8px; top: 3px; width: 6px; height: 7px; border-radius: 3px 3px 1px 1px; }
.preset__ic--source_screen::after { left: 3px; top: 3px; width: 16px; height: 1.5px; box-shadow: 0 3px 0 #6f6f75, 0 6px 0 #6f6f75; }
.preset__ic--pip_bottom_right::after { right: 2px; bottom: 2px; width: 6px; height: 5px; }
.preset__ic--pip_top_right::after { right: 2px; top: 2px; width: 6px; height: 5px; }
/* chat (ChatPanel.tsx, Composer.tsx, ResultLine.tsx) */
.pane--chat { display: grid; grid-template-rows: auto 1fr auto; }
.pane--chat .pane__h { display: flex; align-items: center; gap: 6px; }
.pane--chat .pane__h img { width: 16px; height: 16px; image-rendering: pixelated; }
.chat { display: grid; align-content: start; gap: 6px; }
.bubble { margin: 0; font-size: 11.5px; line-height: 1.4; padding: 6px 9px; border-radius: 12px; max-width: 95%; }
.bubble--me { justify-self: end; background: var(--app-ink); color: #fff; border-bottom-right-radius: 4px; min-height: 2.4em; }
.bubble--bot { justify-self: start; background: #fff; border: 1px solid var(--app-border); border-bottom-left-radius: 4px; }
.card1 { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 8px; font-size: 11px; font-weight: 600; border-radius: 10px; background: #fff; border: 1px solid var(--app-border); }
.card1 i { flex: none; width: 9px; height: 9px; border-radius: 2px; background: #1f9d55; transform: scale(var(--k, 1)); }
.card1 span { flex: 1 1 auto; min-width: 0; }
.card1 b { flex: none; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--app-raised); }
.composer { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 0; padding: 6px 6px 6px 10px; border-radius: 16px; border: 1px solid var(--app-border); background: #fff; font-size: 12px; color: var(--app-muted); }
.composer b { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #6f6f75; color: #fff; font-size: 12px; display: grid; place-items: center; transform: scale(var(--kx, 1), var(--ky, 1)); }
.composer.is-live b { background: var(--app-ink); }
.pane--chat[data-placeholder] .bubble--me { background: #fff3cd; color: var(--app-ink); border: 2px dashed var(--app-danger); }
/* the preview's page-layer badges */
.badge--lufs { right: auto; left: 10px; background: #fff; font-variant-numeric: tabular-nums; }
.badge--lufs:empty { display: none; }
.mt__v { opacity: 0; }
.mt__v.is-on { opacity: 1; }
/* the four timelines share one place: the window never changes size between acts */
.mt__tls { display: grid; }
.mt__tls > .tl { grid-area: 1 / 1; min-width: 0; }
.mt.is-live .mt__tls > .tl { visibility: hidden; }
.mt.is-live .mt__tls > .tl.is-on { visibility: visible; }
.mt.is-live .mt__tls > .tl:not(.is-on) * { visibility: hidden !important; }
/* act 2: the Voice lane, before and after, on one absolute scale */
.vwave { position: absolute; inset: 0; display: flex; align-items: center; gap: 1px; }
.vwave i { flex: 1 1 0; min-width: 0; height: calc(var(--h, var(--h0)) * 100%); background: var(--gold); border-radius: 1px; }
.tl--sound .tl__lane--voice .tl__track { background: var(--app-raised); border-radius: 3px; }
.tl__lane--sfx .tl__track, .tl__lane--screen .tl__track { border-radius: 3px; background: rgba(17, 17, 19, 0.04); }
.sfxclip { position: absolute; top: 3px; bottom: 3px; min-width: 34px; }
.sfxclip__k { position: absolute; inset: 0; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 2px var(--app-ink); transform-origin: 50% 100%; }
.sfxclip b { position: absolute; left: 5px; top: 50%; translate: 0 -50%; z-index: 1; font-family: var(--font-px); font-weight: 400; font-size: 0.82rem; letter-spacing: 0.04em; }
.mt.is-live .sfxclip { visibility: hidden; }
.mt.is-live .sfxclip.is-on { visibility: visible; }
/* act 3: Screen and Camera lanes, with the zoom badge (SceneStrip.tsx: "Zooms to part of the screen") */
.lclip { position: absolute; top: 0; bottom: 0; border-radius: 3px; background-color: #2a2a2d; background-image: var(--img); background-size: auto 100%; background-repeat: repeat-x; box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.2); transform-origin: 0 50%; }
.zoombadge { position: absolute; top: -3px; bottom: -3px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 1px var(--charcoal); transform-origin: 50% 100%; }
.zoombadge i { position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; background: var(--gold); box-shadow: 0 0 0 2px var(--charcoal); }
.zoombadge i::before { content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; border: 2px solid var(--charcoal); border-radius: 50%; }
.zoombadge i::after { content: ""; position: absolute; left: 9px; top: 9px; width: 4px; height: 2px; background: var(--charcoal); rotate: 45deg; }
.mt.is-live .zoombadge { visibility: hidden; }
.mt.is-live .zoombadge.is-on { visibility: visible; }
/* controls: pixel-world, under the window */
.mt__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.mt__pause, .mt__dots button {
  cursor: pointer; border: 0; font-family: var(--font-px); font-size: 1rem; line-height: 1; letter-spacing: 0.04em;
  color: var(--charcoal); background: #fff; box-shadow: 0 0 0 2px var(--charcoal), 3px 3px 0 2px rgba(43, 43, 43, 0.25);
}
.mt__pause { padding: 7px 10px 6px; min-width: 64px; }
.mt__pause[aria-pressed="true"] { background: var(--gold); }
.mt__dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex: 1 1 auto; }
.mt__dots li { flex: 1 1 0; min-width: 0; }
.mt__dots button { position: relative; display: block; width: 100%; padding: 7px 6px 9px; overflow: hidden; text-align: center; }
.mt__dots button[aria-current="step"] { background: var(--sky-light); }
.mt__dots button i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--charcoal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.mt__hear { flex: none; }
.mt__hear[aria-pressed="true"] { background: #fff; }
.mt__next { font-size: 0.95rem; color: #1d2b3a; }
.mt__next b { font-weight: 700; }
/* the storyboard: what each act did, as a still, for no-JS and reduced motion */
.mt__board { display: none; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.board__i { display: grid; gap: 6px; align-content: start; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; padding: 8px; box-shadow: 4px 4px 0 0 rgba(43, 43, 43, 0.16); }
.board__i img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.board__i p { font-size: 0.86rem; line-height: 1.4; color: var(--ink-soft); }
.board__i b { color: var(--app-ink); }
@media (prefers-reduced-motion: reduce) {
  .mt .heroapp, .mt__title, .mt__pause, .mt__dots { display: none; }
  .mt__board { display: grid; }
}

/* ---------- the scissors and the "of nothing" counter ---------- */
.scis, .nothing { display: none; }
.tl.is-live .scis {
  display: block; position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  --c: calc(var(--eddy) / 32 * 1.25);
  width: calc(20 * var(--c)); height: calc(13 * var(--c)); visibility: hidden;
  background: url(/assets/scissors.svg) 0 0 / 300% 100% no-repeat; image-rendering: pixelated;
  transform-origin: 45% 50%;
}
.tl.is-live .scis.is-on { visibility: visible; }
.scis[data-f="1"] { background-position: 50% 0; }
.scis[data-f="2"] { background-position: 100% 0; }
.scis i { display: none; }
.tl.is-live .nothing {
  display: block; position: absolute; left: 0; top: calc(4px + var(--lane-e) - 2px); z-index: 5; visibility: hidden; white-space: nowrap;
  font-family: var(--font-px); font-size: 0.95rem; line-height: 1; letter-spacing: 0.04em;
  background: var(--charcoal); color: #fff; padding: 3px 6px 2px; font-variant-numeric: tabular-nums;
}
.tl.is-live .nothing.is-on { visibility: visible; }
.nothing b { font-weight: 400; color: var(--gold); }

/* ---------- 3b · the tab player ---------- */
.more { padding-bottom: clamp(40px, 6vh, 72px); }
.more__h { margin-bottom: clamp(18px, 3vh, 28px) !important; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 18px; }
.tabs__list [role="tab"] {
  cursor: pointer; border: 0; font: 600 1.02rem/1.2 var(--font-text); color: var(--app-ink); background: #fff;
  padding: 10px 14px; box-shadow: 0 0 0 3px var(--charcoal), 4px 4px 0 3px rgba(43, 43, 43, 0.2);
}
.tabs__list [role="tab"] b { font-weight: 800; }
.tabs__list [role="tab"][aria-selected="true"] { background: var(--gold); }
.tabp { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tabp[hidden] { display: none; }
.tabwin__preview { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 12px 12px 0 0; }
.tabwin__preview img, .tabwin__preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tabwin__preview video { opacity: 0; }
.tabwin__preview video.is-on { opacity: 1; }
.tl--tab { border-radius: 0 0 12px 12px; }
.tabp__side { position: relative; display: grid; gap: 14px; align-content: start; }
.tabp__lead { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.45rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--app-ink); }
.tabp__lead b { font-weight: 800; background: linear-gradient(transparent 62%, rgba(249, 188, 50, 0.85) 62% 92%, transparent 92%); }
.tabp__dur { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); line-height: 1.4; }
.tabp__dur b { white-space: nowrap; background: var(--gold); padding: 0 6px; box-shadow: 0 0 0 3px var(--charcoal); }
.tabp__dur .cut__dl:first-child b { background: #fff; text-decoration: line-through; text-decoration-color: var(--app-danger); text-decoration-thickness: 3px; }
.tabp__words { font-size: 0.92rem; line-height: 1.5; color: #1d3247; }
.tabp__words s { text-decoration-color: var(--app-danger); text-decoration-thickness: 2px; color: #3b4f63; }
.tabp__listen { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.tabp__src { font-size: 0.86rem; color: #1d3247; }
.more__stats { margin-top: clamp(22px, 3.4vh, 34px); font-size: 1.05rem; color: var(--app-ink); max-width: 46em; }
.more__stats b { font-weight: 800; }

/* ---------- 3c · the real app in three steps ---------- */
.steps { position: relative; z-index: 1; padding: clamp(40px, 7vh, 88px) 0 clamp(48px, 8vh, 96px); }
.steps__h { max-width: 22em; margin-bottom: calc(var(--eddy) + 18px); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.step {
  position: relative; display: grid; gap: 12px; align-content: start; background: var(--face); padding: 16px 16px 18px;
  box-shadow:
    calc(var(--u) * -1) 0 0 0 var(--charcoal), var(--u) 0 0 0 var(--charcoal),
    0 calc(var(--u) * -1) 0 0 var(--charcoal), 0 var(--u) 0 0 var(--charcoal),
    calc(var(--u) * 2) var(--u) 0 0 rgba(43, 43, 43, 0.22), var(--u) calc(var(--u) * 2) 0 0 rgba(43, 43, 43, 0.22),
    calc(var(--u) * 2) calc(var(--u) * 2) 0 0 rgba(43, 43, 43, 0.22);
}
.step__k { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.45rem); line-height: 1.25; letter-spacing: -0.012em; color: var(--app-ink); }
.step__k b { font-weight: 800; }
.step__n { flex: none; font-family: var(--font-px); font-weight: 400; font-size: 1.25rem; line-height: 1; background: var(--gold); color: var(--charcoal); padding: 5px 8px 3px; box-shadow: 0 0 0 3px var(--charcoal); }
.step__shot { justify-self: center; position: relative; width: min(100%, var(--w)); overflow: hidden; border-radius: 10px; }
.step__shot img { width: 100%; height: auto; display: block; }
.callout {
  position: absolute; z-index: 2; pointer-events: none; border-radius: 6px;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--charcoal); transform-origin: 50% 50%;
}
.step__sub { font-size: 0.98rem; line-height: 1.45; color: #1d3247; }
.step__sub b { color: var(--app-ink); }
.stop--step { right: 12px; top: calc(var(--eddy) * -1 + 3px * var(--scale)); }
.steps__cap { margin-top: 18px; }

/* ---------- 4+5 · the offer for 10 ---------- */
.spots span { display: inline-block; font-family: var(--font-px); font-size: 1.05rem; line-height: 1; letter-spacing: 0.05em; background: var(--charcoal); color: #fff; padding: 5px 8px 4px; }
.give { font-size: 1.02rem; line-height: 1.5; }
.give b { font-weight: 800; }
.give .terms { margin-top: 8px; }
.ladder { font-size: 1.02rem; }
.ladder b { font-weight: 800; background: var(--gold); padding: 0 5px; box-shadow: 0 0 0 2px var(--charcoal); }
.msg { font-size: 0.9rem; color: var(--ink-soft); }
.msg a { font-weight: 600; }
.terms li b { font-weight: 800; }

@media (max-width: 1000px) {
  .tabp { grid-template-columns: minmax(0, 1fr); }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: calc(var(--eddy) + 10px); max-width: 560px; }
}
@media (max-width: 720px) {
  .heroapp__body { grid-template-columns: minmax(0, 1fr); }
  .heroapp__side { order: 2; display: grid; height: 116px; border-right: 0; border-top: 1px solid var(--app-border); }
  .heroapp__side > .pane { padding: 8px 10px; }
  .pane__h { font-size: 13px; margin-bottom: 2px; }
  .pane--script .script { font-size: 11.5px; }
  .pane__sub, .pane__foot, .tool:nth-child(n + 2) { display: none; }
  .presets { grid-template-columns: 1fr 1fr; }
  .preset { font-size: 11px; padding: 5px 6px; }
  .presets__hl { height: 26px; }
  .pane--chat { grid-template-rows: auto auto; }
  .pane--chat .pane__h { display: none; }
  .chat { gap: 4px; }
  .bubble, .card1 { font-size: 11px; padding: 4px 7px; }
  .composer { display: none; }
  .mt__dots { order: -1; flex-basis: 100%; gap: 8px; }
  .mt__dots button { font-size: 0.9rem; padding: 7px 4px 9px; }
  .mt__hear { margin-left: auto; }
  .mt__board { grid-template-columns: 1fr 1fr; gap: 8px; }
  .board__i p { font-size: 0.8rem; }
  .tl--mt .tl__name { display: none; }
  .tabs__list { gap: 10px; }
  .tabs__list [role="tab"] { font-size: 0.95rem; padding: 8px 10px; }
}
.steps.is-live .callout { opacity: 0; }
.tl.is-live .rg.rg--big b { display: none; } /* the longest dead air is labelled by its "of nothing" counter instead */
/* the preview sets the window body's height; the side pane fills it and never grows it */
@media (min-width: 721px) { .mt .heroapp__side { contain: size; } .mt .heroapp__side > .pane { overflow: hidden; } }
.tool { padding: 5px 8px; }
/* the Changes rows now use the app's own wording: one column, wrapping inside the panel at every width */
.chg__row { grid-template-columns: auto minmax(0, 1fr) auto; }
.chg__k { white-space: normal; font-weight: 400; line-height: 1.3; }
.chg__k b { font-weight: 600; }
@media (max-width: 1000px) {
  .chg__list { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .chg__row { padding: 3px 6px; }
  .chg__k { font-size: 11.5px; }
}
.step:first-child .stop--step { right: auto; left: 12px; } /* he works the cards left to right: in from the left edge */
/* the counter sits inside its dead air (where the region's own label was), clear of Eddy's lane */
.tl.is-live .nothing { top: calc(4px + var(--lane-e) + 22px + 3px); margin-left: 3px; }
.tl--ask .rg.is-closing b { visibility: hidden; }
.lclip--voice { background: var(--app-raised); box-shadow: inset 0 0 0 1px var(--app-border); }
/* critique fixes (17 Oct): the tab player is a recreation too, so it carries the same window bar and tag */
.tabwin > .win__bar + .tabwin__preview { border-radius: 0; }
/* critique fix (17 Oct): on phones the montage's working half (the timeline, the cut, Eddy) shares the first screen
   with the headline. The timeline sits right under the preview, as in the app; the side pane follows it. */
@media (max-width: 720px) {
  .hero { padding-top: calc(var(--bar-h) + 14px); }
  .hero__copy { gap: 16px; }
  .hero__grid { gap: 14px; }
  .hero__app { gap: 6px; }
  .cta-row { gap: 6px; }
  .mt__title { min-height: 28px; }
  .mt .heroapp { display: flex; flex-direction: column; }
  .mt .heroapp__body { display: contents; }
  .mt .heroapp__preview { order: 1; }
  .mt .mt__tls { order: 2; }
  .mt .heroapp__side { order: 3; border-radius: 0 0 12px 12px; }
  .mt .mt__tls > .tl { border-radius: 0; --lane-h: 24px; padding-bottom: 6px; }
  .mt .mt__tls .tl__ruler { height: 14px; }
}
.badge__n { font-family: var(--font-text); font-weight: 800; font-size: 0.82em; letter-spacing: 0; }
/* phones: the real preset names wrap instead of truncating (critique P10) */
@media (max-width: 720px) { .preset { white-space: normal; line-height: 1.2; } .preset span { overflow: visible; text-overflow: clip; } }
/* phones: the hero's ruler is shorter, so the counter rides the top of its dead air, clear of the scissors below */
@media (max-width: 720px) { .mt .tl.is-live .nothing { top: calc(4px + var(--lane-e) + 14px + 1px); } }
/* critique fix (17 Oct): every act's pane fits its window at every desktop width, like a tighter crop of the real
   panel: act 2 shows the two tools that matter so the proof line and both Changes rows fit; act 3's real preset names
   wrap instead of truncating, and the panel shows its first three presets */
@media (min-width: 721px) {
  .pane--sound .pane__sub, .pane--sound .tool:nth-child(3) { display: none; }
  .preset { white-space: normal; line-height: 1.2; }
  .preset span { overflow: visible; text-overflow: clip; }
  .presets .preset:nth-child(n + 5) { display: none; }
}
@media (min-width: 721px) { .pane--layouts .pane__sub { display: none; } }
@media (min-width: 721px) and (max-width: 1100px) {
  .presets .preset:nth-child(n + 4) { display: none; }
  .pane--sound .tool:nth-child(2) { display: none; }
}
.step__k > span:last-child { text-wrap: balance; } /* no lone last word ("one.") under a step title */
/* critique fix (17 Oct): each tab's transcript shows three lines at most; the struck words always sit in the first
   three (restart: chars 0-79, stutter: 91-102), and the full text stays in the page for screen readers */
.tabp__words { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* act 2 now holds long enough for its second Changes row, so its pane needs room for both rows: narrow desktops drop
   the proof line (the preview's loudness badge shows the same change), phones give the pane (now below the timeline)
   a little more height */
@media (min-width: 721px) and (max-width: 1100px) { .pane--sound .proofline { display: none; } }
@media (max-width: 720px) { .mt .heroapp__side { height: 144px; } }
/* ---------- round 4 (owner, 17 Oct): the sound and layout acts say what each layer is and why it matters ----------
   Act 2's panel lists the sound layers by their lane names (the chips match the lanes: gold waveform, white whoosh),
   each with what Eddy did and why it matters. Act 3's lanes say what the camera and the screen are doing in the
   picture before and after Eddy's switch; its panel says when Eddy picks each preset. */
.layers { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 10px; }
.layer { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: start; }
.layer__ck { grid-row: 1 / span 3; position: relative; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; background: #1f9d55; transform: scale(var(--k, 1)); }
.layer__ck::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.layer__lane { justify-self: start; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 6px 3px; border-radius: 4px; }
.layer__lane--voice { background: var(--gold); color: var(--charcoal); }
.layer__lane--sfx { background: #fff; color: var(--app-ink); box-shadow: inset 0 0 0 1.5px var(--app-ink); }
.layer b { margin-top: 2px; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--app-ink); }
.layer__why { font-size: 11.5px; line-height: 1.3; color: var(--app-muted); }
/* the quiet word on the Voice lane: a dashed box round its bars, its tag beside it ("quiet", then "lifted") */
.ltag { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--app-danger); pointer-events: none; }
.ltag.is-lifted { box-shadow: inset 0 0 0 1.5px #1f9d55; }
.ltag b { grid-area: 1 / 1; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 3px; background: #fff; white-space: nowrap; }
.ltag__a { color: var(--app-danger); box-shadow: inset 0 0 0 1px var(--app-danger); }
.ltag__b { color: #146c3a; box-shadow: inset 0 0 0 1px #1f9d55; }
.ltag::after { content: none; }
.ltag > b:first-child { margin: 0; }
.ltag { display: grid; justify-content: start; align-content: start; }
.ltag > b { translate: calc(-100% - 4px) 50%; }
.mt:not(.is-live) .ltag__a { visibility: hidden; }
/* a marker across the lanes where the picture switches, named in the ruler row */
.tl__mark { position: absolute; z-index: 2; top: calc(4px + var(--lane-e)); bottom: 8px; left: calc(var(--pad-l) + (100% - var(--pad-l) - var(--pad-r)) * var(--x)); width: 0; pointer-events: none; }
.tl__mark::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--app-ink); transform: scaleY(var(--k, 1)); transform-origin: 50% 0; }
.tl__mark b { position: absolute; left: 4px; top: 0; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 3px; background: var(--app-ink); color: #fff; white-space: nowrap; }
.mt.is-live .tl__mark { visibility: hidden; }
.mt.is-live .tl__mark.is-on { visibility: visible; }
/* the Camera and Screen lanes: the real frames, and what each layer is doing in the picture */
.lclip--strip { background-size: 100% 100%; background-repeat: no-repeat; }
.role { position: absolute; top: 0; bottom: 0; border-radius: 3px; display: flex; align-items: center; padding-left: 4px; pointer-events: none; }
.role b { font-size: 10.5px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 3px; background: rgba(17, 17, 19, 0.82); color: #fff; white-space: nowrap; }
.role--hidden { background: repeating-linear-gradient(135deg, rgba(237, 237, 239, 0.94) 0 5px, rgba(237, 237, 239, 0.78) 5px 10px); box-shadow: inset 0 0 0 1.5px #9a9aa0; }
.role--hidden b { background: #fff; color: var(--app-ink); box-shadow: inset 0 0 0 1px #9a9aa0; }
.mt.is-live [data-role="cam1"], .mt.is-live [data-role="scr1"] { visibility: hidden; }
.mt.is-live [data-role="cam1"].is-on, .mt.is-live [data-role="scr1"].is-on { visibility: visible; }
/* act 3's panel: the real preset names, each with when Eddy picks it */
.preset > span { display: grid; gap: 1px; min-width: 0; }
.preset b { font-weight: 600; }
.preset em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--app-muted); }
@media (max-width: 720px) {
  .layers { gap: 6px; }
  .layer { grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; }
  .layer__ck { width: 14px; height: 14px; }
  .layer__ck::after { left: 4px; top: 1.5px; }
  .layer b { font-size: 12px; }
  .layer__why { font-size: 11px; }
  .role b, .ltag b, .tl__mark b { font-size: 9.5px; padding: 2px 3px; }
}
.tl--sound .sfxclip { min-width: 54px; } /* the whoosh's label sits inside its clip at every width */
/* act 2's rows (round 4b): the layer's name, its colour swatch matching its lane, then what Eddy did and why; the box
   is empty until Eddy has done it, then a green tick pops in */
.layer { grid-template-columns: 16px minmax(0, 1fr); row-gap: 1px; }
.layer__ck { grid-row: 1 / span 2; background: #fff; box-shadow: inset 0 0 0 1.5px #9a9aa0; }
.layer__ck::after { opacity: 0; }
.mt:not(.is-live) .layer__ck, .layer.is-done .layer__ck { background: #1f9d55; box-shadow: none; }
.mt:not(.is-live) .layer__ck::after, .layer.is-done .layer__ck::after { opacity: 1; }
.layer__name { display: flex; align-items: center; gap: 6px; margin-top: 0; font-size: 12.5px; }
.layer__name::before { content: ""; flex: none; width: 14px; height: 10px; border-radius: 2px; }
.layer__name--voice::before { background: var(--gold); }
.layer__name--sfx::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--app-ink); }
/* pane fit (panefit.mjs): act 3's preset rows carry a "when" line now, so the count line shows only where it fits; on
   narrow desktops act 2 drops its panel heading (the act title above says the same) */
@media (min-width: 721px) {
  .pane--layouts .preset { padding-top: 5px; padding-bottom: 5px; }
  .pane--layouts .pane__foot { margin-top: 4px; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .pane--layouts .pane__foot { display: none; }
  .pane--sound .pane__h { display: none; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .pane--layouts .pane__h { margin-bottom: 3px; }
  .pane--layouts .preset { padding-top: 4px; padding-bottom: 4px; gap: 6px; }
  .pane--layouts .preset em { line-height: 1.2; }
}
.layer__ck { transform: none; }
.layer__ck::after { scale: var(--k, 1); }
/* act 4 as a conversation (round 4): the chat fills from the bottom like the app's, older turns scroll off the top;
   "Working" shows while Eddy replies; the header says the chat is sped up when Eddy's real replies took longer */
.mt.is-live .pane--chat .chat { display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; min-height: 0; } /* fills from the top, as the app's does (round 6) */
.mt.is-live .pane--chat .bubble--me { align-self: flex-end; }
.mt.is-live .pane--chat .bubble--bot, .mt.is-live .pane--chat .card1, .mt.is-live .pane--chat .chat__status { align-self: flex-start; }
.mt.is-live .pane--chat [data-turn]:not(.is-on), .mt.is-live .pane--chat .card1:not(.is-on) { display: none; }
.chat__status { display: none; margin: 0; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--charcoal); }
.mt.is-live .chat__status.is-on { display: block; }
.pane__tag { margin-left: auto; font-family: var(--font-px); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.04em; padding: 1px 6px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--app-ink); }
/* blind check fixes (17 Oct): the quiet stretch's tag names its words and sits under its box, in the empty end of the
   Sound effects lane (clear of the switch marker); solid chips for contrast. The whoosh's link to the switch. Phones
   name the lanes (inside each lane, clear of the role chips) and show act 3's count line. */
.ltag { display: block; box-shadow: inset 0 0 0 2px var(--app-danger); }
.ltag.is-lifted { box-shadow: inset 0 0 0 2px #1f9d55; }
.ltag > b { position: absolute; right: 0; top: calc(100% + 5px + (var(--lane-h) - 16px) / 2); translate: none; margin: 0; font-size: 10.5px; line-height: 12px; padding: 2px 6px; color: #fff; box-shadow: none; }
.ltag__a { background: #b00807; }
.ltag__b { background: #17663a; }
.sfxlink { position: absolute; top: 50%; height: 0; border-top: 2px dashed var(--app-ink); }
.mt.is-live .sfxlink { visibility: hidden; }
.mt.is-live .sfxclip.is-on ~ .sfxlink { visibility: visible; }
@media (max-width: 720px) {
  .ltag > b { font-size: 9.5px; line-height: 11px; padding: 2px 4px; top: calc(100% + 5px + (var(--lane-h) - 15px) / 2); }
  .tl--sound .tl__name, .tl--layout .tl__name { display: block; left: 3px; right: auto; z-index: 3; font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.92); color: var(--app-ink); box-shadow: inset 0 0 0 1px var(--app-border); pointer-events: none; }
  .tl--layout .tl__name { left: auto; right: 3px; }
  .mt .pane--layouts .pane__foot { display: block; margin-top: 4px; font-size: 10.5px; }
}
.ltag > .ltag__a { background: #b00807; color: #fff; }
.ltag > .ltag__b { background: #17663a; color: #fff; }
.ltag { z-index: 3; } /* at 360 px the label meets the switch line: the chip sits on top of it */
.ltag__ws { display: none; }
@media (max-width: 420px) {
  .ltag__w { display: none; }
  .ltag__ws { display: inline; }
  .tl--sound .sfxclip { min-width: 46px; }
  .tl--sound .sfxclip b { left: 3px; font-size: 0.74rem; }
}
/* narrow desktops: the four chapter names fit their buttons (1024: "Layouts" ran 2 px over) */
@media (min-width: 721px) and (max-width: 1100px) {
  .mt__ctl { column-gap: 8px; }
  .mt__dots { gap: 6px; }
  .mt__dots button { padding-left: 3px; padding-right: 3px; }
}
/* fresh blind check (17 Oct): the panels say Eddy did the work (the rows are not settings to tick); the switch marker
   is dashed so it never reads as a second playhead; the layout count carries weight */
.pane__by { font-size: 11px; font-weight: 600; color: var(--app-muted); margin-left: 4px; }
.tl__mark::before { background: none; width: 0; left: -1px; border-left: 2px dashed var(--app-ink); }
.pane--layouts .pane__foot { color: var(--app-ink); font-weight: 700; }
@media (min-width: 721px) and (max-width: 1100px) { .pane--layouts .pane__by { display: none; } }
/* act 4 (round 5): the zoom the chat changes, on the Screen lane, and what each layer does before and after. While the
   screen is hidden the zoom is a dashed outline over the hatch (it is there, nobody sees it); once the screen fills the
   frame it is solid. */
.zchip { position: absolute; top: 3px; bottom: 3px; z-index: 3; border-radius: 3px; display: flex; align-items: center; justify-content: flex-end; padding-right: 3px; background: rgba(41, 98, 255, 0.18); box-shadow: inset 0 0 0 2px #2962ff; transform-origin: 0 50%; pointer-events: none; }
.zchip b { font-size: 10.5px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 3px; background: #2962ff; color: #fff; white-space: nowrap; }
.zchip.is-hidden { background: transparent; box-shadow: none; outline: 2px dashed #2962ff; outline-offset: -2px; }
.zchip.is-hidden b { background: #fff; color: #1d44b8; box-shadow: inset 0 0 0 1px #2962ff; }
.tl--ask .role { z-index: 2; }
.mt.is-live .tl--ask [data-a4="cam1"], .mt.is-live .tl--ask [data-a4="scr1"] { visibility: hidden; }
.mt.is-live .tl--ask [data-a4="cam1"].is-on, .mt.is-live .tl--ask [data-a4="scr1"].is-on { visibility: visible; }
.mt.is-live .tl--ask [data-a4].is-off { visibility: hidden; }
.mt:not(.is-live) .tl--ask [data-a4="cam0"], .mt:not(.is-live) .tl--ask [data-a4="scr0"] { display: none; }
.bubble--bot u { font-weight: 600; text-decoration: underline; color: var(--app-muted); white-space: nowrap; }
@media (max-width: 720px) { .zchip b { font-size: 9.5px; padding: 2px 3px; } }
/* act 4 (round 5b): your ask and Eddy's answer fit in view together. The result card flows as text with its Undo
   inline (it wrapped to seven lines as a flex row), and on phones the chat fills the panel's fixed height and fills
   from the bottom, as the app's does, so the newest message is never below the fold of the panel. */
.card1 { display: block; font-size: 10.5px; line-height: 1.35; padding: 5px 8px; }
.card1 i { display: inline-block; vertical-align: -1px; margin-right: 5px; }
.card1 b { display: inline-block; margin-left: 6px; font-size: 10px; line-height: 1.5; padding: 0 6px; }
.mt.is-live .pane--chat .bubble { font-size: 11px; line-height: 1.35; padding: 5px 8px; }
@media (max-width: 720px) {
  .mt .heroapp__side { grid-template-rows: minmax(0, 100%); } /* the row is the panel's own 144 px, not its tallest pane */
  .mt.is-live .pane--chat { grid-template-rows: minmax(0, 1fr); }
  .mt.is-live .pane--chat .chat { min-height: 0; }
  .mt.is-live .pane--chat .bubble, .card1 { font-size: 10.5px; padding: 4px 7px; }
}
/* act 4 (round 5b): bubbles keep their height (the bottom-anchored chat squeezed two-line bubbles and clipped them), the
   chat's top edge fades so a scrolled-off bubble reads as scrolled, the note over the BEFORE picture, and on phones each
   lane's name inside its role label (the Screen lane's right end holds the zoom's label) */
.mt.is-live .pane--chat .chat > * { flex-shrink: 0; }
.mt.is-live .pane--chat .chat { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
.mt__note { position: absolute; left: 50%; bottom: 10px; z-index: 4; translate: -50% 0; max-width: calc(100% - 20px); white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1.2; padding: 6px 10px; border-radius: 8px; background: rgba(17, 17, 19, 0.86); color: #fff; visibility: hidden; pointer-events: none; }
.mt__note.is-on { visibility: visible; }
@media (max-width: 720px) {
  .mt__note { font-size: 10.5px; padding: 4px 8px; bottom: 8px; }
  .tl--ask [data-a4^="cam"] b::before { content: "Camera: "; font-weight: 600; }
  .tl--ask [data-a4^="scr"] b::before { content: "Screen: "; font-weight: 600; }
}
/* act 4 (round 5c, strict critic): the follow-ups' "Replying to Editor" (they were sent through Revise), and on phones
   the chat keeps its "Eddy" header with the "sped up · shortened" tag and a one-line "Message Eddy" box */
.composer { flex-wrap: wrap; }
.composer__reply { flex: 1 0 100%; font-style: normal; font-size: 10px; font-weight: 600; color: var(--app-muted); margin-bottom: 2px; }
.composer__reply[hidden] { display: none; }
@media (max-width: 720px) {
  .mt.is-live .pane--chat { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .mt.is-live .pane--chat .pane__h { display: flex; font-size: 11px; line-height: 1; }
  .mt.is-live .pane--chat .pane__h img { width: 12px; height: 12px; }
  .mt.is-live .pane--chat .pane__tag { font-size: 9.5px; padding: 2px 5px; }
  .mt.is-live .pane--chat .composer { display: flex; flex-wrap: nowrap; margin: 0; padding: 3px 3px 3px 8px; font-size: 10.5px; }
  .mt.is-live .pane--chat .composer span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mt.is-live .pane--chat .composer b { width: 18px; height: 18px; font-size: 10px; }
  .mt.is-live .pane--chat .composer__reply { flex: none; margin: 0 6px 0 0; font-size: 9.5px; }
}
.pane--chat .pane__tag { white-space: nowrap; font-size: 0.72rem; padding: 1px 5px; }
@media (min-width: 721px) { .mt.is-live .pane--chat .pane__h { margin-bottom: 4px; } }
.pane--chat { grid-template-columns: minmax(0, 1fr); } /* the chat's column never grows past its panel */
@media (min-width: 721px) and (max-width: 1100px) { .pane--chat .pane__tag { white-space: normal; text-align: center; line-height: 1.1; } }
.tl--ask .tl__playhead { z-index: 1; } /* round 5c: the playhead passes behind the lane labels, never through their words */
.tl--ask .role { z-index: 3; } .tl--ask .zchip { z-index: 4; }
/* act 4 (round 5d, strict critic 2, checked against the app's chat.css and chat-theme.ts, light theme): Eddy's bubbles
   are yellow (#ffd60a) with black text; a result line is the summary in the secondary colour and an outlined Undo,
   with no box and no tick; while a turn runs only Eddy's avatar sits in the reply slot, breathing (opacity 0.45 to 1,
   scale 0.94 to 1, 1.6 s), and the send button is a stop button. The page's own note reads as the page talking (the
   BEFORE badge's vocabulary), not as an app toast. Phones get larger chat type. */
.mt .pane--chat .bubble--bot { background: #ffd60a; color: #111; border: 0; }
.bubble--bot u { color: #111; }
.card1 { background: none; border: 0; border-radius: 0; padding: 2px 2px 2px 0; font-weight: 400; color: var(--app-muted); }
.card1 b { font-weight: 500; background: none; color: var(--app-ink); border: 1px solid var(--app-border); border-radius: 999px; padding: 0 8px; }
.chat__status { background: none; padding: 0; border-radius: 0; }
.chat__status img { display: block; width: 22px; height: 22px; image-rendering: pixelated; animation: a4breath 1.6s ease-in-out infinite; }
@keyframes a4breath { 0%, 100% { opacity: 0.45; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .chat__status img { animation: none; opacity: 0.7; } }
.mt__note { font-family: var(--font-px); font-weight: 400; letter-spacing: 0.04em; font-size: 0.95rem; background: #fff; color: var(--charcoal); border-radius: 0; box-shadow: 0 0 0 2px var(--charcoal), 3px 3px 0 0 rgba(43, 43, 43, 0.35); }
@media (max-width: 720px) {
  .mt__note { font-size: 0.8rem; }
  .mt.is-live .pane--chat .bubble, .card1 { font-size: 11.5px; }
  .mt.is-live .pane--chat .pane__tag { font-size: 10.5px; }
  .mt.is-live .pane--chat .composer__reply { font-size: 10.5px; }
  .chat__status img { width: 16px; height: 16px; }
}
.mt [data-mt-still] { object-fit: cover; } /* act 4 opens on the frame the first request was typed against */
@media (max-width: 720px) { .mt.is-live .pane--chat .pane__tag { font-size: 11px; } }

/* Round 6 (19 Oct): act 4's card is the app's "Sub-editor" card, opened by selecting your words in the script and
   pressing Ask. Its scope line (a grey pill, then the quoted words, one line, cut with an ellipsis) and each answer's
   centred "Message from Sub-editor" row follow the app: chat.css .chat-quoted-scope and .botcard-attribution
   (muted caption text), cards.ts (every non-editor card). */
.chat__scope { display: grid; gap: 3px; justify-items: start; margin: 0 0 2px; font-size: 10.5px; line-height: 1.35; color: var(--app-muted); }
.chat__pill { display: block; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 8px; border-radius: 6px; background: var(--app-raised); }
.chat__quote { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-ink); }
.chat__quote i { font-style: normal; color: var(--app-muted); margin-right: 4px; }
.chat__attr { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; font-size: 10.5px; color: var(--app-muted); }
.chat__attr img { width: 12px; height: 12px; image-rendering: pixelated; }
.mt.is-live .pane--chat .chat__attr { align-self: center; }
.mt.is-live .pane--chat .chat__attr:not(.is-on) { display: none; }
.mt.is-live .pane--chat .chat__scope { flex: none; }

/* Round 6 critic (19 Oct), the app's own chat parts, checked against BotCard.tsx, Composer.tsx and chat.css:
   - Eddy's avatar sits to the left of each of his bubbles (.botcard-agent-row / .botcard-avatar);
   - "Show more" is its own line under the clamped text;
   - the card's footer "Revise" is an outlined pill in muted caption text (.botcard-revise);
   - "Replying to Editor ×" is its own grey pill ABOVE the composer (.chat-bound), so the chat makes room for it;
   - while a turn runs the send button is the stop button: the raised grey with a dark square (.chat-stop). */
.mt .pane--chat .bubble--bot { position: relative; margin-left: 18px; overflow: visible; }
.mt .pane--chat .bubble--bot::before { content: ""; position: absolute; left: -18px; top: 1px; width: 14px; height: 14px; background: url(/assets/master.svg) no-repeat center / contain; image-rendering: pixelated; }
.bubble--bot u { display: block; margin-top: 3px; }
.chat__revise { margin: 0; justify-self: start; }
.mt.is-live .pane--chat .chat__revise { align-self: flex-start; flex: none; }
.mt.is-live .pane--chat .chat__revise:not(.is-on) { display: none; }
.chat__revise b { display: inline-block; padding: 1px 10px; border: 1px solid var(--app-border); border-radius: 999px; font-weight: 400; font-size: 10.5px; line-height: 1.5; color: var(--app-muted); transform: scale(var(--kx, 1), var(--ky, 1)); }
.composer { position: relative; }
.mt.is-live .pane--chat .composer__reply, .composer__reply { position: absolute; left: 0; bottom: calc(100% + 4px); flex: none; margin: 0; padding: 1px 8px; border-radius: 999px; background: var(--app-raised); color: var(--app-muted); font-size: 10px; font-weight: 400; line-height: 1.5; white-space: nowrap; }
.composer__x { font-style: normal; margin-left: 6px; }
.mt.is-live .pane--chat.is-bound .chat { padding-bottom: 22px; }
.composer b.is-stop { background: var(--app-raised); color: var(--app-ink); }
@media (max-width: 720px) {
  .mt .pane--chat .bubble--bot { margin-left: 15px; }
  .mt .pane--chat .bubble--bot::before { left: -15px; width: 12px; height: 12px; }
}

/* Round 6 critic recheck (19 Oct), against the app's source: the chat fills from the top and follows the newest line
   (chat.css .chat-cards has no bottom alignment; app.js keeps scrollTop at the end); the send/stop button stays at the
   right end of the box (Composer.tsx); bubbles round every corner alike; the avatars keep the app's proportion to the
   text (the bubble's about two-thirds of a line, the working one a little over a line); on phones a typed follow-up
   wraps to two lines, as the app's box grows, instead of being cut with "…". */
.mt.is-live .pane--chat .chat { justify-content: flex-start; }
.composer b { margin-left: auto; }
.mt .pane--chat .bubble--me, .mt .pane--chat .bubble--bot { border-radius: 10px; }
.mt .pane--chat .bubble--bot { margin-left: 14px; }
.mt .pane--chat .bubble--bot::before { left: -14px; width: 10px; height: 10px; }
.chat__status img { width: 17px; height: 17px; }
@media (max-width: 720px) {
  .mt .pane--chat .bubble--bot { margin-left: 12px; }
  .mt .pane--chat .bubble--bot::before { left: -12px; width: 9px; height: 9px; }
  .chat__status img { width: 15px; height: 15px; }
  .mt.is-live .pane--chat .composer span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}