/* ---------------------------------------------------------------------------
   Walkout

   Two themes from one set of tokens. Light is the default because a retention
   analyst reads this next to a spreadsheet in an office; dark is for the room
   where the film is actually being cut.

   Cause colours are semantic and never decorative; the whole product is the
   difference between a story problem and a delivery one, so those two must
   never be mistaken for each other at a glance.
--------------------------------------------------------------------------- */

:root {
  --ground:        #FBFBFA;
  --surface:       #FFFFFF;
  --surface-sunk:  #F4F4F2;
  --line:          #E6E5E1;
  --line-strong:   #D4D3CE;
  --ink:           #12120F;
  --ink-soft:      #4A4A44;
  --ink-faint:     #6E6E66;

  --brand:         #12120F;
  --on-brand:      #FBFBFA;

  --cause-technical:    #2563EB;
  --cause-localization: #B45309;
  --cause-pacing:       #7C3AED;
  --cause-story:        #DB2777;
  --cause-unknown:      #6B7280;
  --danger:             #DC2626;
  --live:               #16A34A;

  --tint: 8%;

  --radius:      14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 18, 15, .05);
  --shadow:    0 4px 24px -8px rgba(18, 18, 15, .12);
  --shadow-lg: 0 24px 70px -24px rgba(18, 18, 15, .22);

  /* Two faces, because one was doing a job it is bad at. Inter Tight is a
     condensed display face: excellent at 40px, cramped and hard to read at 12.
     It now sets headlines only, and plain Inter, drawn for exactly this,
     carries the body text, the captions and the notes. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --ground:        #08080A;
  --surface:       #101013;
  --surface-sunk:  #0B0B0E;
  --line:          #1F1F25;
  --line-strong:   #2E2E36;
  --ink:           #F4F4F2;
  --ink-soft:      #ADADB8;
  --ink-faint:     #8E8E99;

  --brand:         #F4F4F2;
  --on-brand:      #08080A;

  --cause-technical:    #60A5FA;
  --cause-localization: #FBBF24;
  --cause-pacing:       #C084FC;
  --cause-story:        #F472B6;
  --cause-unknown:      #9CA3AF;
  --danger:             #F87171;
  --live:               #4ADE80;

  --tint: 14%;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 4px 24px -8px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 70px -24px rgba(0, 0, 0, .9);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .5s var(--ease-soft), color .5s var(--ease-soft);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
}

p { margin: 0; }
a { color: inherit; }

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

/* --- shared atoms ------------------------------------------------------- */

.shell {
  width: min(1220px, 100% - 48px);
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent);
  animation: pulse 2.6s var(--ease-soft) infinite;
}

.eyebrow.static::before { animation: none; background: var(--ink-faint); box-shadow: none; }

@keyframes pulse {
  0%          { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  70%, 100%   { box-shadow: 0 0 0 8px transparent; }
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  appearance: none;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 550;
  letter-spacing: -.01em;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .3s var(--ease-soft), opacity .2s linear;
  will-change: transform;
}

.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover:not(:disabled) .arrow { transform: translateX(4px); }

.btn.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn.ghost:hover:not(:disabled) { background: var(--surface-sunk); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* --- nav ---------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 18px 0;
  backdrop-filter: blur(18px) saturate(180%);
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-soft), padding .4s var(--ease-soft);
}

.nav.stuck { border-bottom-color: var(--line); padding: 12px 0; }

.nav .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -.035em;
  font-size: 19px;
}

.brand .mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .5s var(--ease);
}

.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
.brand .sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  display: block;
  margin-top: 1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: color .25s, background .25s;
}

.nav-links a:hover { color: var(--ink); background: var(--surface-sunk); }

.nav-right { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, transform .4s var(--ease), border-color .25s;
}

.icon-btn:hover { background: var(--surface-sunk); transform: rotate(18deg); }
.icon-btn svg { width: 17px; height: 17px; }
:root[data-theme="dark"] .sun { display: none; }
:root:not([data-theme="dark"]) .moon { display: none; }

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(44px, 6.5vw, 88px) 0 clamp(36px, 5vw, 64px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 620px;
  background:
    radial-gradient(60% 60% at 22% 18%, color-mix(in srgb, var(--cause-technical) var(--tint), transparent), transparent 68%),
    radial-gradient(48% 52% at 82% 8%,  color-mix(in srgb, var(--cause-story)     var(--tint), transparent), transparent 66%);
  filter: blur(46px);
  pointer-events: none;
  opacity: .85;
  animation: drift 22s var(--ease-soft) infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.08); }
}

.hero .shell { position: relative; }

.headline {
  /* Each line is its own block, so this is sized to fit the longest line in
     the narrower hero column rather than to the viewport. */
  font-size: clamp(38px, 5.1vw, 70px);
  letter-spacing: -.045em;
  font-weight: 620;
  margin: 20px 0 0;
  text-wrap: balance;
}

.headline .fade {
  background: linear-gradient(96deg, var(--ink) 6%, var(--ink-faint) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin-top: 24px;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 54ch;
  letter-spacing: -.011em;
}

.lede strong { color: var(--ink); font-weight: 550; }

.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }

/* word-by-word reveal */
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em);
  filter: blur(9px);
  animation: word-in .95s var(--ease) forwards;
}

@keyframes word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}

.fade-up.seen { opacity: 1; transform: none; }

/* --- the console -------------------------------------------------------- */

.console { padding: clamp(28px, 4vw, 48px) 0 96px; }

.console-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.console-head h2 {
  font-size: clamp(26px, 3vw, 38px);
  margin-top: 10px;
  letter-spacing: -.04em;
}

.title-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .3s var(--ease);
}

.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.stat {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.stat .k {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stat .v {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.035em;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}

.stat .v small { font-size: 14px; color: var(--ink-faint); font-weight: 500; margin-left: 3px; }

/* --- chart -------------------------------------------------------------- */

.chart-card { padding: 26px 26px 12px; position: relative; overflow: hidden; }

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.chart-head h3 { font-size: 17px; letter-spacing: -.02em; }
.chart-head .note { font-size: 13px; color: var(--ink-faint); max-width: 46ch; }

.chart-wrap { position: relative; width: 100%; }
#curve { display: block; width: 100%; height: auto; overflow: visible; }

.curve-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.curve-area { fill: url(#curveFill); opacity: .5; }

.hazard-bar { fill: var(--ink-faint); opacity: .32; }
.hazard-bar.in-cliff { opacity: .95; }

.cliff-band { opacity: 0; transition: opacity .8s var(--ease); }
.cliff-band.shown { opacity: 1; }
.cliff-band rect { rx: 4; }

.cliff-flag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  fill: var(--ink);
  font-weight: 500;
}

.axis {
  font-family: var(--mono);
  font-size: 9.5px;
  fill: var(--ink-faint);
  letter-spacing: .06em;
}

.grid-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.credits-line { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }

.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.9s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.chart-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 2px 12px;
  font-size: 13px;
  color: var(--ink-faint);
  font-family: var(--mono);
  letter-spacing: .03em;
}

.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 10px; height: 3px; border-radius: 2px; background: currentColor; }

/* --- cliff list --------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }

.cliff-list { display: flex; flex-direction: column; gap: 10px; }

.cliff {
  --tone: var(--ink-faint);
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}

.cliff::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tone);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease);
}

.cliff:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.cliff:hover::before, .cliff.open::before { transform: scaleY(1); }
.cliff.open { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }

.cliff-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cliff-time {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.cliff-lift {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-weight: 500;
}

.cliff-hours { margin-left: auto; text-align: right; }
.cliff-hours b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cliff-hours span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

.cause-tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  color: var(--tone);
  font-weight: 600;
  white-space: nowrap;
}

.cause-technical    { --tone: var(--cause-technical); }
.cause-localization { --tone: var(--cause-localization); }
.cause-pacing       { --tone: var(--cause-pacing); }
.cause-story        { --tone: var(--cause-story); }
.cause-unknown      { --tone: var(--cause-unknown); }

.cliff-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}

.cliff.open .cliff-body { grid-template-rows: 1fr; }
.cliff-body > div { overflow: hidden; }

.evidence {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.evidence li {
  list-style: none;
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
  line-height: 1.5;
}

.evidence li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--tone);
}

.cohort-grid { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }

.cohort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.cohort .label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cohort .label b { color: var(--ink); font-weight: 550; }

.cohort .meter {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-sunk);
  overflow: hidden;
}

.cohort .meter i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--tone);
  width: 0;
  transition: width 1.1s var(--ease);
}

.cohort .x {
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  color: var(--tone);
  font-weight: 600;
}

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-sunk) 25%,
              color-mix(in srgb, var(--line) 60%, var(--surface-sunk)) 50%,
              var(--surface-sunk) 75%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
  color: transparent !important;
}

@keyframes shimmer { to { background-position: -220% 0; } }

/* --- agent panel -------------------------------------------------------- */

.agent {
  position: sticky;
  top: 92px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 112px);
}

@media (max-width: 1000px) { .agent { position: static; max-height: none; } }

.agent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agent-head h3 { font-size: 16px; letter-spacing: -.02em; }

.agent-sub { font-size: 13px; color: var(--ink-faint); line-height: 1.5; }

.trace {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1;
  margin: 0 -6px;
  padding: 0 6px;
}

.trace::-webkit-scrollbar { width: 5px; }
.trace::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  opacity: 0;
  transform: translateY(8px);
  animation: step-in .55s var(--ease) forwards;
}

@keyframes step-in { to { opacity: 1; transform: none; } }

.step .rail { position: relative; display: grid; place-items: start center; }

.step .rail::before {
  content: "";
  position: absolute;
  top: 16px; bottom: -18px;
  width: 1px;
  background: var(--line);
}

.step:last-child .rail::before { display: none; }

.step .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  margin-top: 5px;
  z-index: 1;
  transition: all .4s var(--ease);
}

.step.running .dot {
  border-color: var(--live);
  background: var(--live);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent);
  animation: pulse 1.6s var(--ease-soft) infinite;
}

.step.done .dot { border-color: var(--ink-faint); background: var(--ink-faint); }

.step .what { font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.step .detail { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; word-break: break-word; }

.verdict {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-soft);
  overflow-y: auto;
  max-height: 40vh;
}

.verdict h1, .verdict h2, .verdict h3 { font-size: 15px; margin: 16px 0 6px; color: var(--ink); letter-spacing: -.02em; }
.verdict strong { color: var(--ink); font-weight: 600; }
.verdict p { margin: 0 0 10px; }
.verdict ul { margin: 0 0 10px; padding-left: 18px; }
.verdict li { margin-bottom: 5px; }
.verdict hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.verdict code { font-family: var(--mono); font-size: 13.5px; background: var(--surface-sunk); padding: 1px 5px; border-radius: 5px; }

.banner {
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid;
}

.banner.err { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); }
.banner.info { border-color: var(--line); background: var(--surface-sunk); color: var(--ink-soft); }

/* --- how it works ------------------------------------------------------- */

/* Layout only. Everything about how this section looks is at the bottom of
   the file, under "Method: the panel that turns over". */
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.how-card {
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.how-card h4 { letter-spacing: -.025em; }
.how-card p { color: var(--ink-soft); line-height: 1.6; }

.stack {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack span {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--surface);
}

/* --- footer ------------------------------------------------------------- */

.foot {
  padding: 44px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-faint);
}

.foot a { text-decoration: none; transition: color .25s; }
.foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-word, .fade-up { opacity: 1; transform: none; filter: none; }
}

/* --- hero preview ------------------------------------------------------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }
  .preview { margin-top: 8px; }
}

.preview {
  padding: 22px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(22px) scale(.985);
  animation: preview-in 1.1s var(--ease) .45s forwards;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

@keyframes preview-in { to { opacity: 1; transform: none; } }

.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.preview-head h3 { font-size: 16px; margin-top: 8px; letter-spacing: -.025em; }
.preview-count { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; padding-top: 4px; }

.preview-rows { display: flex; flex-direction: column; }

.preview-row {
  --tone: var(--ink-faint);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(-8px);
  animation: row-in .6s var(--ease) forwards;
}

@keyframes row-in { to { opacity: 1; transform: none; } }

.preview-row:last-child { border-bottom: 0; }
.preview-row .tc { font-family: var(--mono); font-size: 13px; font-weight: 500; }

.preview-row .verdictline {
  font-size: 13.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-row .hrs {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.preview-row .cause-tag { font-size: 9px; padding: 3px 8px; }

.preview-foot {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* The replayed-run note. Deliberately quiet: it is provenance, not a warning.
   Someone opening the page should read the findings first and only then notice
   that they were produced a few minutes ago rather than a few seconds ago. */
.replay {
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* A run that stopped early. Warmer than the neutral note, quieter than an
   error. The findings above it are real, there are just fewer of them. */
.replay.cut {
  color: var(--cause-localization);
  border-color: color-mix(in srgb, var(--cause-localization) 35%, var(--line));
  background: color-mix(in srgb, var(--cause-localization) var(--tint), var(--surface));
}

/* ===========================================================================
   The console, told as three steps
   =========================================================================== */

.console-lede {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.console-lede b { color: var(--ink); font-weight: 600; }

.stage { margin-top: 56px; }

.stage-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.stage-head h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -.02em;
}
.stage-head p {
  margin: 6px 0 0;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The number is the spine of the page: it is what tells someone scrolling
   that these three blocks are one sequence and not three separate widgets. */
.stage-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  font: 600 15px/1 var(--mono);
  margin-top: 2px;
}

/* --- the film ------------------------------------------------------------ */

.film {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 940px) { .film { grid-template-columns: 1fr; } }

.film-player { padding: 14px; }

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: #000;
}
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.player-bar > .mono { font-size: 13px; color: var(--ink-faint); }

.jumps { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* One button per cliff. Labelled with the timecode rather than "cliff 2",
   because the timecode is the thing someone can act on. */
.jump-chip {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font: 500 13px/1 var(--mono);
  cursor: pointer;
  transition: background .18s var(--ease-soft), color .18s var(--ease-soft),
              border-color .18s var(--ease-soft), transform .18s var(--ease);
}
.jump-chip:hover { transform: translateY(-1px); border-color: var(--ink); color: var(--ink); }
.jump-chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.jump-chip i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 7px;
  background: currentColor;
  vertical-align: middle;
}

/* --- what Gemini saw ----------------------------------------------------- */

.film-read { display: flex; flex-direction: column; min-height: 300px; }

.read-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.read-head h4 { margin: 0; font-size: 16px; }

.read-window { margin: 10px 0 14px; font-size: 13.5px; color: var(--ink-faint); }
.read-window .mono { color: var(--ink-soft); }

.read-body { flex: 1; overflow-y: auto; max-height: 380px; }
.read-idle { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-faint); }

.read-synopsis {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.read-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.read-tag {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  font: 500 12.5px/1 var(--sans);
  color: var(--ink-soft);
}
.read-tag b { color: var(--ink); font-weight: 600; }

.read-section { margin-bottom: 15px; }
.read-section h5 {
  margin: 0 0 7px;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.read-section ul { margin: 0; padding-left: 17px; }
.read-section li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

/* Beats are the model showing its working: a timecode next to what it saw
   there. Monospaced so the times line up and read as evidence. */
.beat { display: flex; gap: 11px; margin-bottom: 7px; align-items: baseline; }
.beat time { flex: none; font: 500 12.5px/1.5 var(--mono); color: var(--ink-faint); }
.beat span { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

.btn.ghost {
  padding: 9px 15px;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn.ghost:hover:not(:disabled) { border-color: var(--ink); background: var(--surface-sunk); }

/* --- how it works -------------------------------------------------------- */

.how-lede {
  margin: 16px 0 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.how-foot {
  margin: 34px 0 0;
  max-width: 76ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-faint);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.how-foot b { color: var(--ink-soft); font-weight: 600; }

/* ===========================================================================
   Waiting for the model
   ===========================================================================
   Reading video takes ten to twenty seconds. A line of text saying so leaves
   the panel looking broken for all of it, so the panel instead shows the shape
   of the answer it is about to hold: a synopsis block, some tags, a few
   beats. The wait then reads as the thing filling in rather than as nothing
   happening, and there is no layout jump when it does. */

/* row-in is a to-only keyframe and assumes the element starts hidden, so this
   gets its own pair rather than borrowing one that would quietly do nothing. */
.watching { animation: watch-in .32s var(--ease) both; }
@keyframes watch-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.watching-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* A frame of film advancing: four sprockets, lit in sequence. */
.reel { display: flex; gap: 4px; }
.reel i {
  width: 7px;
  height: 12px;
  border-radius: 2px;
  background: var(--line-strong);
  animation: reel 1.1s var(--ease-soft) infinite;
}
.reel i:nth-child(2) { animation-delay: .13s; }
.reel i:nth-child(3) { animation-delay: .26s; }
.reel i:nth-child(4) { animation-delay: .39s; }

@keyframes reel {
  0%, 65%, 100% { background: var(--line-strong); transform: scaleY(.72); }
  30%           { background: var(--ink);         transform: scaleY(1); }
}

.ghost-line {
  height: 11px;
  border-radius: 5px;
  margin-bottom: 9px;
  background: linear-gradient(
    90deg,
    var(--surface-sunk) 0%,
    color-mix(in srgb, var(--ink) 9%, var(--surface-sunk)) 50%,
    var(--surface-sunk) 100%);
  background-size: 220% 100%;
  animation: sweep 1.5s linear infinite;
}
.ghost-line.short { width: 58%; }
.ghost-line.tag   { display: inline-block; width: 84px; height: 24px; border-radius: 999px; margin-right: 7px; }

@keyframes sweep {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* The counter is the honest part: it says the wait is real and how long it has
   been, which is far less unnerving than an indicator that could mean anything. */
.watching-secs {
  margin-left: auto;
  font: 500 12.5px/1 var(--mono);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .reel i, .ghost-line { animation: none; }
  .reel i:nth-child(odd) { background: var(--ink); }
}

/* The way out of the summary and into the long version, placed where someone
   has just finished the summary and is deciding whether they want more. */
.how-more {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}
.how-more a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color .18s var(--ease-soft);
}
.how-more a:hover { border-bottom-color: var(--ink); }
.how-more span { max-width: 56ch; }

/* Headlines and big figures get the display face; everything else keeps Inter,
   which is legible at the sizes the rest of the page actually uses. */
h1, h2, h3, h4, h5,
.headline, .brand, .stat .v, .cliff-time, .preview-count {
  font-family: var(--display);
}

/* ===========================================================================
   Method: the panel that turns over
   ===========================================================================
   Everything above this point is the product. This is the explanation, and
   flipping the ground is how a reader knows they have crossed from one to the
   other without being told so. It works because every colour on the page comes
   from a token: redefining them here turns the whole section over at once,
   children included, with no per-element overrides to keep in sync.

   It inverts in both directions. A light page gets a dark panel, a dark page
   gets a light one, so the section is deliberately the odd one out either way
   rather than only looking considered in the theme it was designed in.

   Deliberately monochrome. Colour on this site means something specific: blue
   is a delivery fault, amber is localization, pink is the edit. Spending one
   of those on decoration here would teach the reader the wrong thing on the
   way to the console, where the same colours carry a verdict.
   =========================================================================== */

.how {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 9vw, 122px) 0;
  border-top: 0;

  --ground:       #0B0B0D;
  --surface:      #141418;
  --surface-sunk: #0F0F13;
  --line:         #24242C;
  --line-strong:  #3A3A45;
  --ink:          #FBFBFA;
  --ink-soft:     #B7B7C2;
  --ink-faint:    #8C8C99;
  --brand:        #FBFBFA;
  --on-brand:     #0B0B0D;
  --shadow:    0 4px 30px -10px rgba(0, 0, 0, .8);
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .95);

  background: var(--ground);
  color: var(--ink);
}

:root[data-theme="dark"] .how {
  --ground:       #FAFAF8;
  --surface:      #FFFFFF;
  --surface-sunk: #F1F1EE;
  --line:         #E3E2DD;
  --line-strong:  #CDCCC6;
  --ink:          #101013;
  --ink-soft:     #494950;
  --ink-faint:    #6D6D76;
  --brand:        #101013;
  --on-brand:     #FAFAF8;
  --shadow:    0 4px 24px -8px rgba(18, 18, 15, .14);
  --shadow-lg: 0 24px 70px -24px rgba(18, 18, 15, .2);
}

/* A wash thrown from above the section, and a faint rule grid beneath it, both
   drawn in the section's own ink so nothing new enters the palette. */
.how::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 80%;
  background: radial-gradient(52% 62% at 50% 0%,
              color-mix(in srgb, var(--ink) 7%, transparent), transparent 72%);
  pointer-events: none;
}

.how::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000, transparent 78%);
  mask-image: radial-gradient(70% 55% at 50% 30%, #000, transparent 78%);
  pointer-events: none;
}

.how > .shell { position: relative; z-index: 1; }

.how .how-lede { font-size: 17px; max-width: 54ch; }

/* --- the four steps ------------------------------------------------------
   Read as a pipeline, not as four essays. Each card is one sentence about
   what happens and one line naming what comes out of it, so the four outputs
   chain into the answer without the reader having to assemble them. */

.how-grid { gap: 14px; margin-top: 40px; }

.how-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              border-color .3s var(--ease-soft);
}

.how-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.how-card .n {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}

/* A rule that runs out from under the numeral and completes on hover, which
   is the only motion in the section and costs one pseudo-element. */
.how-card .n::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 68px;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(.16);
  transform-origin: left;
  transition: transform .55s var(--ease), background-color .3s var(--ease-soft);
}
.how-card:hover .n::before { transform: scaleX(1); background: var(--ink); }

/* The same numeral again, oversized and nearly invisible, so the card has
   depth without another element in the markup. */
.how-card .n::after {
  content: attr(data-ghost);
  position: absolute;
  right: 10px;
  bottom: -26px;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.06em;
  color: color-mix(in srgb, var(--ink) 4%, transparent);
  pointer-events: none;
}

.how-card h4 { font-size: 18px; margin: 28px 0 9px; }
.how-card p { font-size: 14.5px; margin: 0 0 20px; }

/* What this step hands to the next one. */
.how-out {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 500 12px/1.45 var(--mono);
  color: var(--ink-faint);
}
.how-out::before { content: "\2192  "; }

@media (prefers-reduced-motion: reduce) {
  .how-card, .how-card .n::before { transition: none; }
  .how-card:hover { transform: none; }
}

/* ===========================================================================
   Failures, described
   ===========================================================================
   The most likely failure here is not a bug: it is the free-tier quota running
   out because several people pressed the same button on the same day. A raw
   `429 RESOURCE_EXHAUSTED` reads as a broken product; the same condition, told
   as a sentence with a way forward, reads as a product with a known limit.
   Every error path on the page renders through this one card.
   =========================================================================== */

.failure {
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--tone) 34%, var(--line));
  background: color-mix(in srgb, var(--tone) var(--tint), var(--surface));
  --tone: var(--ink-faint);
  animation: watch-in .4s var(--ease) both;
}

.failure[data-kind="quota"]     { --tone: var(--cause-localization); }
.failure[data-kind="blocked"]   { --tone: var(--cause-pacing); }
.failure[data-kind="timeout"],
.failure[data-kind="upstream"]  { --tone: var(--cause-technical); }
.failure[data-kind="warehouse"],
.failure[data-kind="config"],
.failure[data-kind="offline"],
.failure[data-kind="unknown"]   { --tone: var(--danger); }
.failure[data-kind="window"]    { --tone: var(--cause-unknown); }

.failure-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 15px;
  letter-spacing: -.012em;
  color: var(--ink);
}
.failure-head b { font-weight: 600; }

.failure-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tone) 20%, transparent);
  color: var(--tone);
  font-size: 13px;
  line-height: 1;
}

.failure p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.failure p:last-of-type { margin-bottom: 0; }
.failure-hint { color: var(--ink-faint) !important; }

.failure-detail { margin-top: 12px; }
.failure-detail summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-faint);
  list-style: none;
}
.failure-detail summary::-webkit-details-marker { display: none; }
.failure-detail summary::before { content: "▸ "; }
.failure-detail[open] summary::before { content: "▾ "; }
.failure-detail code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-sunk);
  font: 500 11.5px/1.55 var(--mono);
  color: var(--ink-faint);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* A step the run never got to finish reads differently from one that passed. */
.step.stopped .dot { background: var(--ink-faint); opacity: .45; }

.verdict-cut {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 13px;
  color: var(--cause-localization);
}

/* ===========================================================================
   Waiting, everywhere it happens
   =========================================================================== */

.film-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--surface-sunk);
  font-size: 13px;
  color: var(--ink-faint);
}

.agent-wait,
.agent-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
}
.agent-empty { display: block; padding: 14px 2px; }
.agent-empty b { color: var(--ink); font-weight: 600; }

/* ===========================================================================
   Reading a window you chose yourself
   ===========================================================================
   The three chips are the cliffs the analysis found, which is the right
   default. Custom exists because the claim is that the model reads *any*
   thirty seconds of this film, and a demo that only ever reads three prepared
   windows invites the obvious suspicion about those three.
   =========================================================================== */

.jump-chip.custom { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

.manual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
  animation: watch-in .3s var(--ease) both;
}

.manual-label {
  margin-right: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.manual-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.manual-field input,
.manual-field select {
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 500 13px/1 var(--mono);
}
.manual-field input { width: 68px; text-align: center; }
.manual-field select { font-family: var(--sans); }
.manual-field input:focus-visible,
.manual-field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.btn.tiny { padding: 7px 13px; font-size: 12.5px; }

.manual-note { font-size: 12.5px; color: var(--danger); }