/* RAW v2 — landing page (dark operator-grade redesign, D-120). Standalone, no framework, no build.
 * This is the RAW chassis register: near-black, mono, amber + terminal-green + red accents, hard edges.
 * Honors CLAUDE.md #13 (border-radius: 0) — the earlier editorial relaxation (D-117) is reverted.
 * Palette/fonts mirror frontend/src/design/tokens.css; values inlined (no app CSS vars on the landing). */

:root {
  --bg: #0a0a0a;            /* page — near-black (= app canvas) */
  --panel: #111009;         /* raised panels (= app shell) */
  --text: #e8e4dc;          /* soft white */
  --muted: #7a756b;         /* secondary */
  --faint: #2a2722;         /* hairlines */
  --scroll-thumb: #38332c;  /* scrollbar thumb — one step up from the hairline, never amber */
  --amber: #c8a84b;         /* brand-gold — wordmark, R/A/W, brackets */
  --green: #4ade80;         /* terminal green — live / cluster labels */
  --red: #ef4444;           /* contradiction */
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Win95 bevel palette — replicated from the app's .bevel-raised for exact brand parity */
  --b-light: #ffffff;
  --b-mid: #dfdfdf;
  --b-dark: #808080;
  --b-darker: #404040;
}

* { box-sizing: border-box; border-radius: 0; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--amber); color: #0a0a0a; }

/* RAW-themed scrollbar. Square (the `border-radius: 0` canon applies to chrome too), hairline
   framing, and deliberately NOT amber: amber means "do this" and is the only breathing thing on
   screen (D-554), so spending it on chrome that is permanently visible would blow the 10% accent
   ceiling on every screen at once. The thumb sits in the neutral register and only brightens on
   hover, where it IS momentarily the thing you are touching. */
html {
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: var(--scroll-thumb) var(--bg);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 1px solid var(--faint);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid var(--bg);                            /* inset the bar, keep the edge hard */
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: var(--bg); }

/* faint terminal scanlines over the whole page (chassis IO texture, not a blueprint grid) */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  opacity: 0.35;
}

/* --- NAV -------------------------------------------------------------------- */
.nav {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.34em;
  color: var(--amber);
}
.request-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.request-link:hover { color: var(--amber); }

/* --- layout ----------------------------------------------------------------- */
.page { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; padding: 0 32px; }

/* --- HERO ------------------------------------------------------------------- */
/* The bottom padding sits BELOW the cta row, so growing it cannot push the action off the fold —
   the canvas clamp above owns that. It only widens the gap into the first section. */
.hero { padding: 56px 0 clamp(100px, 12vh, 156px); }
.hero-title {
  display: flex;
  flex-direction: column;
  margin: 0 0 48px;
  color: var(--text);
}
.hero-title .lead {
  font-family: var(--mono);
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.hero-title .name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(18px, 5.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hero-title .hl { color: var(--amber); }

/* the canvas "instrument" — a framed, signed window into the system */
.instrument {
  position: relative;
  margin: 0 0 28px;
  background: #000;
  border: 1px solid var(--faint);
  box-shadow:
    inset -1px -1px var(--b-dark),
    inset  1px  1px #1c1a16,
    0 24px 80px rgba(0, 0, 0, 0.6);
}
.fig-label {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  pointer-events: none;
}
.live-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 1.4s steps(2, start) infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
/* THE CTA MUST CLEAR THE FOLD. At a fixed 540px the hero needed ~916px of viewport before
   [ Enter RAW ] appeared (nav 73 + hero pad 56 + title 141 + canvas 540 + counter 30 + figure
   margin 28 + cta 48), so on any normal laptop the only call to action was the small nav link —
   the whole page read as a poster with nothing to do. The canvas now takes whatever the first
   screen has left and never more than 540, so the action is always visible on open.
   `svh` (not `vh`) so mobile browser chrome cannot re-hide it; the vh line is the fallback. */
#hero-canvas {
  display: block;
  width: 100%;
  height: clamp(200px, calc(100vh - 400px), 540px);
  height: clamp(200px, calc(100svh - 400px), 540px);
}

.counter {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  min-height: 18px;
  padding: 12px 14px 0;
}

/* --- CTA -------------------------------------------------------------------- */
.cta-row { display: flex; align-items: center; gap: 22px; margin-top: 12px; }
.cta-secondary {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.cta-secondary:hover { color: var(--green); }
.desktop-note { display: none; font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 14px 0 0; }

/* --- Win95 bevel button (exact app .bevel-raised idiom) --------------------- */
.bevel-button {
  background: var(--panel);
  color: var(--amber);
  border: none;
  box-shadow:
    inset -1px -1px var(--b-dark),
    inset  1px  1px var(--b-light),
    inset -2px -2px var(--b-darker),
    inset  2px  2px var(--b-mid);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 22px;
  cursor: pointer;
}
.bevel-button:active {
  box-shadow:
    inset  1px  1px var(--b-dark),
    inset -1px -1px var(--b-light),
    inset  2px  2px var(--b-darker),
    inset -2px -2px var(--b-mid);
}

/* --- content blocks (whitespace separation, hairline rule) ------------------ */
/* SECTION RHYTHM (AP, 2026-07-27: "the different subsections/heros need more space to breathe").
   This is the 60 of DEC-050's 60/30/10 — the field is the number RAW fails, and the fix is spacing
   and removal, not colour. Viewport-scaled so a tall screen gets the full Nagai emptiness while a
   laptop does not end up scrolling through corridors of nothing. */
.block { padding: clamp(92px, 11vh, 156px) 0; border-top: 1px solid var(--faint); }
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin: 0 0 clamp(40px, 5vh, 60px);
}

/* beats — three plain lines, the soul of RAW. Each led by a quiet amber tick (the hairline idiom). */
.beats { list-style: none; margin: 0; padding: 0; }
.beat {
  position: relative;
  font-family: var(--sans);
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--text);
  /* The amber tick HANGS in the page gutter so the beat text shares the one optical left edge
   * every other block on the page sits on (measured: beats used to start 30px right of the
   * wordmark, hero, invite line and access title — the only misaligned text on the page). */
  padding: clamp(30px, 3.6vh, 46px) 0;
  border-top: 1px solid var(--faint);
}
.beat:first-child { border-top: none; }
.beat::before {
  content: '';
  position: absolute;
  left: -30px;
  /* Center the tick on the FIRST LINE's optical middle. A hardcoded top drifted off the text as
   * the responsive font-size scaled (it sat ~8px high at desktop size); deriving it from the
   * padding plus half the line-height keeps it centered at every width. */
  top: calc(26px + 0.75em - 1px);
  width: 12px;
  height: 2px;
  background: var(--amber);
}

/* invite line */
.invite p { font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; color: var(--text); margin: 0; }

/* --- request access -------------------------------------------------------- */
.access-title { font-family: var(--mono); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; margin: 0 0 10px; }
.sub { font-size: 16px; color: var(--muted); margin: 0 0 24px; }
.access-form { display: flex; gap: 12px; margin-top: 8px; max-width: 520px; }
.email-input {
  flex: 1;
  background: #000;
  color: var(--text);
  border: none;
  box-shadow:
    inset  1px  1px var(--b-dark),
    inset -1px -1px #1c1a16,
    inset  2px  2px var(--b-darker);
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 14px;
}
.email-input::placeholder { color: #4a463e; }
.email-input:focus { outline: 1px solid var(--green); outline-offset: 1px; }
.form-message { font-family: var(--mono); font-size: 13px; color: var(--green); min-height: 18px; margin-top: 16px; }

/* --- legal pages (privacy.html / terms.html) ------------------------------- */
.legal {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px 96px;
}
.legal-back {
  display: inline-block;
  margin: 32px 0 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
}
.legal-back:hover { color: var(--amber); }
.legal h1 {
  font-family: var(--mono);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.legal .legal-org {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin: 0;
}
.legal .legal-dates {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 6px 0 0;
}
.legal h2 {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin: 44px 0 12px;
}
.legal h3 {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 24px 0 8px;
}
.legal p, .legal li { font-size: 16px; color: var(--text); }
.legal strong { color: var(--text); font-weight: 600; }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--faint); }
.legal a:hover { border-bottom-color: var(--amber); }
.legal hr { border: none; border-top: 1px solid var(--faint); margin: 36px 0; }
.legal .legal-sep { border: none; border-top: 1px solid var(--faint); margin: 14px 0 36px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0;
}
.legal th, .legal td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--faint);
  vertical-align: top;
}
.legal th {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--amber);
  background: var(--panel);
}
.legal .legal-foot {
  margin-top: 56px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
@media (max-width: 768px) {
  .legal { padding-left: 22px; padding-right: 22px; }
  .legal p, .legal li { font-size: 15px; }
}

/* --- footer ---------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 32px 72px;
  border-top: 1px solid var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.footer-small { margin-top: 8px; opacity: 0.7; }
.footer-links { margin-top: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--faint); }
.footer-links a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* --- the AP maker's mark (no label, no link — a signature) ------------------ */
.ap-mark {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--amber);
  opacity: 0.18;
  padding: 4px 6px;
  user-select: none;
  transition: opacity 0.4s, text-shadow 0.4s;
}
.ap-mark:hover { opacity: 0.5; text-shadow: 0 0 10px rgba(200, 168, 75, 0.6); }

/* --- mobile (≤768px) ------------------------------------------------------- */
@media (max-width: 768px) {
  .nav, .page, .footer { padding-left: 22px; padding-right: 22px; }
  .hero { padding: 32px 0 56px; }
  #hero-canvas { height: 280px; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .cta-row .bevel-button { width: 100%; }
  .cta-secondary { text-align: center; }
  .desktop-note { display: block; text-align: center; }
  .beat { padding: 22px 0 22px 26px; }
  .beat::before { top: 30px; width: 10px; }
  .access-form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}


/* --- beats on narrow screens: no gutter to hang the tick into, so indent conventionally ----- */
@media (max-width: 768px) {
  .beat { padding-left: 22px; }
  .beat::before { left: 0; }
}

/* --- nav sign-in (WEB.LOGIN-BRIDGE v1: a routing bridge, not a shared session) -------------- */
.nav-right { display: flex; align-items: center; gap: 20px; }
.signin-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.signin-link:hover { color: var(--green); }

/* --- RAW Universe: the second hero ---------------------------------------------------------- */
.universe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.universe-stat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.universe-stat b { color: var(--amber); font-weight: 600; }
.universe-frame {
  position: relative;
  margin-top: 22px;
  background: #000;
  border: 1px solid var(--faint);
  /* Sized in CSS so the canvas never reflows the page while it loads. */
  height: 420px;
}
#universe-canvas { display: block; width: 100%; height: 100%; }
.universe-tip {
  position: absolute;
  pointer-events: none;
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--amber);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 3;
}
.universe-tip b { color: var(--amber); font-weight: 600; }
.universe-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted);
}
.universe-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-top: 14px; }

@media (max-width: 768px) {
  .universe-frame { height: 300px; }
}


/* ============================================================================
 * THE WORK — the six-step walkthrough (landing register: dark, mono, hard edges).
 * Everything is namespaced under .walk so it can never collide with .block/.beat
 * rules above. Figures carry the argument; CSS animations run only while a panel
 * holds .is-active, and are disabled wholesale under reduced motion.
 * ========================================================================= */

.walk {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 40px;
  align-items: start;
}

/* --- the rail: six real steps, in the order the work happens ---------------- */
.walk-rail { list-style: none; margin: 0; padding: 0; }
.walk-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 0 13px 14px;
  background: none;
  border: none;
  border-left: 2px solid var(--faint);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.walk-tab:hover { color: var(--text); }
.walk-tab:focus-visible { outline: 1px solid var(--green); outline-offset: -1px; }
.walk-tab.is-active { color: var(--text); border-left-color: var(--amber); }
.walk-num { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.walk-tab.is-active .walk-num { color: var(--amber); }
.walk-name { flex: 1; }
/* the auto-advance progress hairline, drawn only on the active step */
.walk-prog {
  position: absolute;
  left: -2px;
  bottom: -1px;
  width: 2px;
  height: 0;
  background: var(--amber);
  opacity: 0.55;
}
.walk-tab.is-active .walk-prog { animation: walkProg var(--walk-dwell, 7600ms) linear forwards; }
@keyframes walkProg { from { height: 0; } to { height: 100%; } }

/* --- the stage ------------------------------------------------------------- */
.walk-stage { position: relative; min-height: 430px; }
.walk-panel {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.walk-panel.is-active { opacity: 1; visibility: visible; }
.walk-cap h3 {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 8px;
}
.walk-cap p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 56ch;
}
.walk-fig {
  display: block;
  width: 100%;
  max-width: 560px;
  background: var(--panel);
  box-shadow: inset -1px -1px var(--b-dark), inset 1px 1px #1c1a16;
  padding: 4px;
}
.walk-fig text {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--muted);
}

/* --- figure 01: documents drawn into research areas ------------------------ */
.f1-docs rect { fill: none; stroke: var(--muted); stroke-width: 1; opacity: 0; }
.f1-links path { fill: none; stroke: var(--faint); stroke-width: 1; stroke-dasharray: 200; stroke-dashoffset: 200; }
.f1-area rect { fill: none; stroke: var(--faint); stroke-width: 1; }
.f1-area text { fill: var(--muted); }
.is-active .f1-docs rect { animation: fadeIn 0.5s ease forwards; }
.is-active .f1-docs rect:nth-child(2) { animation-delay: 0.07s; }
.is-active .f1-docs rect:nth-child(3) { animation-delay: 0.14s; }
.is-active .f1-docs rect:nth-child(4) { animation-delay: 0.21s; }
.is-active .f1-docs rect:nth-child(5) { animation-delay: 0.28s; }
.is-active .f1-docs rect:nth-child(6) { animation-delay: 0.35s; }
.is-active .f1-docs rect:nth-child(7) { animation-delay: 0.42s; }
.is-active .f1-docs rect:nth-child(8) { animation-delay: 0.49s; }
.is-active .f1-links path { animation: draw 0.7s ease forwards 0.6s; }
.is-active .f1-area rect { animation: liftStroke 0.6s ease forwards 1.1s; }
.is-active .f1-area:nth-child(2) rect { animation-delay: 1.25s; }
.is-active .f1-area:nth-child(3) rect { animation-delay: 1.4s; }

/* --- figure 02: a vague question sharpened, then checked -------------------- */
.walk-fig .f2-vague { fill: var(--muted); opacity: 0; }
.f2-arrow { fill: none; stroke: var(--faint); stroke-width: 1; opacity: 0; }
.f2-sharp rect { fill: none; stroke: var(--amber); stroke-width: 1; opacity: 0; }
.f2-sharp text { fill: var(--text); opacity: 0; }
.walk-fig .f2-label { fill: var(--muted); letter-spacing: 0.14em; font-size: 9.5px; opacity: 0; }
.f2-marks rect { fill: var(--faint); opacity: 0; }
.f2-scan { stroke: var(--green); stroke-width: 1.5; opacity: 0; }
.is-active .f2-vague { animation: fadeIn 0.5s ease forwards; }
.is-active .f2-arrow { animation: fadeIn 0.4s ease forwards 0.5s; }
.is-active .f2-sharp rect { animation: fadeIn 0.5s ease forwards 0.8s; }
.is-active .f2-sharp text { animation: fadeIn 0.5s ease forwards 1s; }
.is-active .f2-label { animation: fadeIn 0.4s ease forwards 1.5s; }
.is-active .f2-marks rect { animation: fadeIn 0.3s ease forwards 1.7s; }
.is-active .f2-scan { animation: scanSweep 1.4s ease-in-out forwards 1.9s; }
.is-active .f2-verdict { animation: fadeInGreen 0.5s ease forwards 3.2s; }
.walk-fig .f2-verdict { fill: var(--green); letter-spacing: .14em; font-size: 9.5px; opacity: 0; }
@keyframes scanSweep {
  0% { opacity: 1; transform: translateX(0); }
  90% { opacity: 1; transform: translateX(254px); }
  100% { opacity: 0; transform: translateX(254px); }
}

/* --- figure 03: the field read, traced into a brief ------------------------ */
.f3-field circle { fill: var(--muted); opacity: 0; }
.f3-field circle.on { fill: var(--amber); }
.f3-traces path { fill: none; stroke: var(--amber); stroke-width: 1; opacity: 0.5;
  stroke-dasharray: 200; stroke-dashoffset: 200; }
.f3-brief > rect { fill: none; stroke: var(--faint); stroke-width: 1; }
.f3-brief rect + rect, .f3-brief rect ~ rect { fill: var(--faint); stroke: none; }
.f3-brief > rect:first-child { fill: none; }
.walk-fig .f3-h { fill: var(--amber); letter-spacing: 0.14em; font-size: 9.5px; }
.walk-fig .f3-n { fill: var(--muted); font-size: 9.5px; }
.walk-fig .f3-count { fill: var(--green); font-size: 11px; letter-spacing: 0.06em; opacity: 0; }
.is-active .f3-traces path { animation: draw 0.8s ease forwards 1.4s; }
.is-active .f3-count { animation: fadeIn 0.5s ease forwards 1.9s; }

/* --- figure 04: concerns strike, then sort -------------------------------- */
.f4-core rect { fill: none; stroke: var(--text); stroke-width: 1.5; }
.f4-core text { fill: var(--text); letter-spacing: 0.12em; font-size: 10px; }
.f4-strikes path { fill: none; stroke: var(--red); stroke-width: 1; opacity: 0;
  stroke-dasharray: 220; stroke-dashoffset: 220; }
.f4-settled rect { fill: var(--amber); opacity: 0; }
.f4-record rect { fill: var(--muted); opacity: 0; }
.walk-fig .f4-lbl { letter-spacing: 0.14em; font-size: 9.5px; opacity: 0; }
.is-active .f4-strikes path { animation: strike 0.5s ease forwards; }
.is-active .f4-strikes path:nth-child(2) { animation-delay: 0.1s; }
.is-active .f4-strikes path:nth-child(3) { animation-delay: 0.2s; }
.is-active .f4-strikes path:nth-child(4) { animation-delay: 0.3s; }
.is-active .f4-strikes path:nth-child(5) { animation-delay: 0.4s; }
.is-active .f4-strikes path:nth-child(6) { animation-delay: 0.5s; }
.is-active .f4-strikes path:nth-child(7) { animation-delay: 0.6s; }
.is-active .f4-settled rect { animation: fadeIn 0.35s ease forwards 1.3s; }
.is-active .f4-settled rect:nth-child(2) { animation-delay: 1.4s; }
.is-active .f4-settled rect:nth-child(3) { animation-delay: 1.5s; }
.is-active .f4-settled rect:nth-child(4) { animation-delay: 1.6s; }
.is-active .f4-settled rect:nth-child(5) { animation-delay: 1.7s; }
.is-active .f4-record rect { animation: fadeIn 0.35s ease forwards 1.85s; }
.is-active .f4-record rect:nth-child(2) { animation-delay: 1.95s; }
.is-active .f4-lbl { animation: fadeIn 0.4s ease forwards 2.1s; }
@keyframes strike {
  from { opacity: 0; stroke-dashoffset: 220; }
  60% { opacity: 0.9; }
  to { opacity: 0.35; stroke-dashoffset: 0; }
}

/* --- figure 05: methods compose into one locked plan ---------------------- */
.f5-blocks rect { fill: none; stroke: var(--faint); stroke-width: 1; opacity: 0; }
.f5-blocks text { fill: var(--muted); opacity: 0; }
.f5-funnel { fill: none; stroke: var(--faint); stroke-width: 1;
  stroke-dasharray: 260; stroke-dashoffset: 260; }
.f5-plan rect { fill: none; stroke: var(--amber); stroke-width: 1; opacity: 0; }
.f5-plan text { fill: var(--text); font-size: 13px; opacity: 0; }
.walk-fig .f5-sub { fill: var(--muted); font-size: 10.5px; }
.f5-lock rect, .f5-lock path { fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0; }
.walk-fig .f5-note { fill: var(--green); font-size: 10px; letter-spacing: 0.04em; opacity: 0; }
.is-active .f5-blocks rect, .is-active .f5-blocks text { animation: fadeIn 0.4s ease forwards; }
.is-active .f5-blocks g:nth-child(2) rect, .is-active .f5-blocks g:nth-child(2) text { animation-delay: 0.08s; }
.is-active .f5-blocks g:nth-child(3) rect, .is-active .f5-blocks g:nth-child(3) text { animation-delay: 0.16s; }
.is-active .f5-blocks g:nth-child(4) rect, .is-active .f5-blocks g:nth-child(4) text { animation-delay: 0.24s; }
.is-active .f5-blocks g:nth-child(5) rect, .is-active .f5-blocks g:nth-child(5) text { animation-delay: 0.32s; }
.is-active .f5-blocks g:nth-child(6) rect, .is-active .f5-blocks g:nth-child(6) text { animation-delay: 0.4s; }
.is-active .f5-funnel { animation: draw 0.6s ease forwards 0.7s; }
.is-active .f5-plan rect { animation: fadeIn 0.5s ease forwards 1.2s; }
.is-active .f5-plan text { animation: fadeIn 0.5s ease forwards 1.4s; }
.is-active .f5-lock rect, .is-active .f5-lock path { animation: fadeIn 0.5s ease forwards 1.7s; }
.is-active .f5-note { animation: fadeIn 0.5s ease forwards 2.1s; }

/* --- figure 06: the closed loop, and the map that accretes ---------------- */
.f6-ring { fill: none; stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 5; }
.f6-nodes circle { fill: var(--amber); opacity: 0; }
.walk-fig .f6-labels text, .walk-fig .f6-cap { fill: var(--muted); font-size: 10px; opacity: 0; }
.walk-fig .f6-mid { fill: var(--text); font-size: 11px; opacity: 0; }
.f6-map circle { fill: var(--muted); opacity: 0; }
.f6-map path { fill: none; stroke: var(--faint); stroke-width: 1;
  stroke-dasharray: 400; stroke-dashoffset: 400; }
.is-active .f6-ring { animation: spin 22s linear infinite; transform-origin: 132px 125px; }
.is-active .f6-nodes circle { animation: fadeIn 0.4s ease forwards 0.3s; }
.is-active .f6-nodes circle:nth-child(2) { animation-delay: 0.55s; }
.is-active .f6-nodes circle:nth-child(3) { animation-delay: 0.8s; }
.is-active .f6-nodes circle:nth-child(4) { animation-delay: 1.05s; }
.is-active .f6-mid { animation: fadeIn 0.6s ease forwards 1.3s; }
.is-active .f6-labels text { animation: fadeIn 0.5s ease forwards 1.5s; }
.is-active .f6-map circle { animation: fadeIn 0.4s ease forwards 1.6s; }
.is-active .f6-map circle:nth-child(3n) { animation-delay: 1.8s; }
.is-active .f6-map circle:nth-child(3n+1) { animation-delay: 2s; }
.is-active .f6-map path { animation: draw 1.2s ease forwards 2.1s; }
.is-active .f6-cap { animation: fadeIn 0.5s ease forwards 2.5s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- shared keyframes ----------------------------------------------------- */
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeInGreen { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes liftStroke { to { stroke: var(--amber); } }

/* --- narrow screens: the rail becomes a scrolling chip row ---------------- */
@media (max-width: 860px) {
  .walk { grid-template-columns: 1fr; gap: 26px; }
  .walk-rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
  .walk-rail li { flex: 0 0 auto; }
  .walk-tab {
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-left: none;
    border-top: 2px solid var(--faint);
    white-space: nowrap;
  }
  .walk-tab.is-active { border-top-color: var(--amber); border-left-color: transparent; }
  .walk-prog { left: 0; top: -2px; bottom: auto; width: 0; height: 2px; }
  .walk-tab.is-active .walk-prog { animation-name: walkProgX; }
  @keyframes walkProgX { from { width: 0; } to { width: 100%; } }
  .walk-stage { min-height: 480px; }
}

/* --- reduced motion: no auto-advance, no figure animation — everything that
 *     would have animated in simply renders in its resolved state. ---------- */
@media (prefers-reduced-motion: reduce) {
  .walk-tab.is-active .walk-prog { animation: none; }
  .walk-panel, .walk-panel * { animation: none !important; transition: none !important; }
  .is-active .f1-docs rect, .is-active .f2-vague, .is-active .f2-arrow,
  .is-active .f2-sharp rect, .is-active .f2-sharp text, .is-active .f2-label,
  .is-active .f2-marks rect, .is-active .f2-verdict, .is-active .f3-count,
  .is-active .f4-settled rect, .is-active .f4-record rect, .is-active .f4-lbl,
  .is-active .f5-blocks rect, .is-active .f5-blocks text, .is-active .f5-plan rect,
  .is-active .f5-plan text, .is-active .f5-lock rect, .is-active .f5-lock path,
  .is-active .f5-note, .is-active .f6-nodes circle, .is-active .f6-labels text,
  .is-active .f6-mid, .is-active .f6-map circle, .is-active .f6-cap { opacity: 1; }
  .is-active .f1-links path, .is-active .f3-traces path, .is-active .f4-strikes path,
  .is-active .f5-funnel, .is-active .f6-map path { stroke-dashoffset: 0; opacity: 0.4; }
  .is-active .f1-area rect { stroke: var(--amber); }
}