/* Yaan landing page.
   One loud element, the same as in the product: the highlighter. A quote copied word for word
   from a source is marked like a highlighter on paper, and it only ever marks verified quotes.
   Everything else stays quiet: cool paper, ink, petrol blue for graph structure, brick for stale. */

:root {
  --paper: #f1f3f5;
  --paper-2: #e9edf1;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #131a23;
  --ink-2: #2b3542;
  --muted: #586473;
  --faint: #8794a3;
  --rule: #dce1e7;
  --rule-2: #c9d0d8;
  --petrol: #1d6a86;
  --petrol-2: #2b86a6;
  --petrol-soft: #dcebf1;
  --mark: #f5da4a;
  --mark-ink: #131a23;
  --brick: #a5412d;
  --brick-soft: #f7e4df;
  --ok: #2c7a55;
  --night: #17181a;
  --night-2: #1e2023;
  --night-rule: #2c2f33;
  --night-ink: #ecedee;
  --night-muted: #a0a5ab;
  --mx-bg: #fafafa;
  --mx-ctx: #e1e3e6;
  --mx-yaan: #11698c;
  --shade: 120, 126, 134;
  --shade-a: .42;
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(19, 40, 56, .06), 0 12px 32px -12px rgba(19, 40, 56, .18), 0 40px 80px -40px rgba(19, 60, 86, .25);
  --shadow-sm: 0 1px 2px rgba(19, 40, 56, .06), 0 6px 16px -8px rgba(19, 40, 56, .16);
  --bar-ctx: #7d8896;  /* context bars beside the highlighted one */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1180px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bar-ctx: #7a8798;
  --paper: #111214;
  --paper-2: #141517;
  --surface: #18191c;
  --surface-2: #1f2125;
  --ink: #ecedee;
  --ink-2: #c9ccd0;
  --muted: #9a9fa6;
  --faint: #6e737a;
  --rule: #2a2d32;
  --rule-2: #363a40;
  --petrol: #5fb3c9;
  --petrol-2: #84c6d8;
  --petrol-soft: #1b2e35;
  --mark: #f2d24b;
  --mark-ink: #111214;
  --brick: #e8907a;
  --brick-soft: #3a2621;
  --ok: #6fc59a;
  --night: #0b0c0d;
  --night-2: #141517;
  --night-rule: #26292d;
  --mx-bg: #18191c;
  --mx-ctx: #2e3136;
  --mx-yaan: #4fa9c4;
  --shade: 74, 79, 86;
  --shade-a: .72;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -12px rgba(0, 0, 0, .55), 0 40px 80px -40px rgba(0, 0, 0, .6);
  --shadow-sm: 0 6px 16px -8px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* text links that leave the site open in a new tab and say so; buttons and icons carry their own cue */
a[target="_blank"]:not(.btn):not(.icon-btn)::after {
  content: "\2197" / " (opens in a new tab)";
  display: inline-block; margin-left: .15em; font-size: .8em; line-height: 1; text-decoration: none; opacity: .7;
}
/* footer links end their line, so the arrow hangs into the column gap instead of wrapping on its own */
.foot-col a[target="_blank"]::after { margin-right: -1.2em; }
button { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--mark); color: var(--mark-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* icons drawn from the monochrome SVGs, in the current text color */
.glyph {
  display: inline-block; width: 1em; height: 1em; flex: none;
  background: var(--icon) center / contain no-repeat;
}
:root[data-theme="dark"] .glyph, .falkor .glyph, .mx-side .glyph, .cw .glyph, .nav.on-dark .glyph { background-image: var(--icon-d, var(--icon)); }

/* the brand mark: two nodes, one edge, one cited (yellow) node */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 500 23px/1 var(--serif); letter-spacing: -.01em; }
.brand-mark, .mini-mark { width: 28px; height: 28px; }
.mini-mark { width: 18px; height: 18px; }
.bm-edge { fill: none; stroke: var(--petrol); stroke-width: 1.6; stroke-linejoin: round; }
.bm-node { fill: var(--petrol); }
.bm-cite { fill: var(--mark); stroke: var(--ink); stroke-width: 1.3; }

/* buttons */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 22px; border-radius: 10px;
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --h: 38px; padding: 0 15px; font-size: 14.5px; border-radius: 8px; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 18px -8px rgba(19, 26, 35, .6); }
.btn-ink:hover { background: var(--ink-2); }
.btn-line { background: var(--surface); border-color: var(--rule-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn .play { width: 20px; height: 20px; }
.btn .play circle { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; }
.btn .play path { fill: var(--mark); }
.btn .glyph { width: 18px; height: 18px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; font-size: 22px; line-height: 1;
}
.icon-btn:hover { border-color: var(--rule-2); background: var(--surface); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.icon-btn .glyph { width: 18px; height: 18px; }
.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: none; }
  :root:not([data-theme="light"]) .i-moon { display: block; }
}
.link-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--petrol); font: 500 16px/1.4 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link-btn:hover { text-decoration-thickness: 2px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rule);
}
.nav.on-dark { background: color-mix(in srgb, var(--night) 88%, transparent); border-bottom-color: var(--night-rule); color: var(--night-ink); }
.nav.on-dark .nav-links a { color: var(--night-muted); }
.nav.on-dark .nav-links a:hover, .nav.on-dark .nav-links a.is-current { color: var(--night-ink); }
.nav.on-dark .icon-btn { color: var(--night-ink); }
.nav.on-dark .icon-btn:hover { background: var(--night-2); border-color: var(--night-rule); }
.nav.on-dark .btn-ink { background: var(--night-ink); color: var(--night); }
.nav.on-dark .btn-line { background: transparent; color: var(--night-ink); border-color: var(--night-rule); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; gap: 26px; margin-left: 12px; }
.nav-links a { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.is-current { color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-actions .btn { margin-left: 8px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 52px 20px 40px; isolation: isolate; }
.hero::before { /* graph paper, faded toward the edges */
  content: ""; position: absolute; inset: -80px 0 0; z-index: -2;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 38%, #000 10%, transparent 75%);
  mask: radial-gradient(ellipse 70% 60% at 50% 38%, #000 10%, transparent 75%);
  opacity: .55;
}
.hero-graph { position: absolute; inset: -80px 0 0; width: 100%; height: calc(100% + 80px); z-index: -1; opacity: 0; transition: opacity 1s ease; }
.hero-graph.on { opacity: 1; }
/* one screen tall, not hero tall: the console growing (question 3) must never resize or restretch the smoke */
.hero-shade { position: absolute; inset: -80px 0 auto; width: 100%; height: calc(100svh + 80px); z-index: -3; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.hero-shade.on { opacity: 1; }
.hero-fade { /* keeps the headline on clean paper while the graph runs in the margins */
  position: absolute; z-index: -1; left: 50%; top: calc(var(--fold-x, 0px) * .72); width: min(880px, 92vw); height: 420px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--paper) 40%, transparent 72%);
  pointer-events: none;
}
.hero-copy { max-width: 940px; margin: 0 auto; text-align: center; }
/* --fold-x (set by the fit script at the end of index.html, desktop only) is the window height left
   over once the console's suggested questions are in view: most of it goes above the copy, the rest
   between the buttons and the console, so the first screen ends just under the suggestions. */
.hero-copy { padding: calc(var(--fold-x, 0px) * .72) 0 calc(var(--fold-x, 0px) * .28); }
/* Hero depth: over the first 400px of scroll the background moves at half speed and the copy drifts up
   slower and fades, so the console, scrolling normally, rises over it. Scroll-driven animations run in
   step with the scroll (no frame of lag); browsers without them get the same motion from main.js.
   Never under reduced motion, and not on phones: with no margins the layers would slide over each other
   (the console over the buttons, the graph across the text). The hero clips at its bottom edge, where a
   paper fade hides the cut. */
.hero { clip-path: inset(-100px 0 0 0); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, var(--paper) 78%); }
@keyframes hd-bg { to { translate: 0 200px; } }
@keyframes hd-copy { to { translate: 0 120px; opacity: .13; } }
@keyframes hd-fade { to { translate: 0 120px; } }
@supports (animation-timeline: scroll()) { @media (min-width: 721px) {
  :root:not(.calm) .hero-graph, :root:not(.calm) .hero-shade, :root:not(.calm) .hero::before {
    animation: hd-bg linear both; animation-timeline: scroll(root); animation-range: 0 400px; will-change: translate; }
  :root:not(.calm) .hero-copy { animation: hd-copy linear both; animation-timeline: scroll(root); animation-range: 0 400px; will-change: translate, opacity; }
  :root:not(.calm) .hero-fade { animation: hd-fade linear both; animation-timeline: scroll(root); animation-range: 0 400px; }
} }
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 86px);
  line-height: .98;
  letter-spacing: -.028em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.hero-sub {
  max-width: 680px; margin: 22px auto 0;
  font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.58; color: var(--muted);
  text-wrap: pretty;
}
.nowrap { white-space: nowrap; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.link-note { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: var(--shadow-sm); transition: opacity .2s, transform .2s; }
.link-note.on { opacity: 1; transform: translate(-50%, 0); }
.hero-built { margin-top: 18px; font-size: 13.5px; color: var(--faint); letter-spacing: .01em; }
.hero-built span { margin: 0 6px; opacity: .6; }

/* load sequence: one orchestrated entrance */
.powered, .hero-title, .hero-sub, .hero-ctas, .console { animation: rise .9s var(--ease) both; }
/* held at their first frame until the fonts are in (fonts-wait is set before first paint) */
.fonts-wait .powered, .fonts-wait .hero-title, .fonts-wait .hero-sub, .fonts-wait .hero-ctas, .fonts-wait .console { animation-play-state: paused; }
.nav-inner { transition: opacity .3s ease; }
.fonts-wait .nav-inner { opacity: 0; }
.hero-sub { animation-delay: .08s; }
.hero-ctas { animation-delay: .16s; }
.hero-built { animation-delay: .22s; }
.console { animation-delay: .32s; animation-duration: 1.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- the console ---------- */
.console {
  position: relative; max-width: 1080px; margin: 44px auto 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: var(--shadow);
  text-align: left;
  overflow: hidden;
}
.c-top {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 18px;
  border-bottom: 1px solid var(--rule); background: var(--surface-2);
}
.c-scope { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.scope {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.scope-k { color: var(--faint); font-size: 12px; }
#cAsOf { transition: background-color .4s; border-radius: 3px; padding: 0 2px; }
#cAsOf.flash { background: var(--mark); color: var(--mark-ink); }
.c-pause {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--surface); font-size: 13px; color: var(--muted); cursor: pointer;
}
.c-pause:hover { color: var(--ink); border-color: var(--rule-2); }
.c-pause svg { width: 12px; height: 12px; fill: currentColor; }
.c-pause .pl { display: none; }
.c-pause[aria-pressed="true"] .pz { display: none; }
.c-pause[aria-pressed="true"] .pl { display: block; }

/* the query instrument */
.c-query {
  position: relative; margin: 18px 18px 0; padding: 18px 20px 12px 56px;
  border: 1px solid var(--rule-2); border-radius: 12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, var(--rule-2), var(--rule)) border-box;
  box-shadow: 0 1px 0 var(--surface) inset, 0 2px 0 var(--paper-2);
  transition: border-color .3s, box-shadow .3s;
}
.c-query.is-typing { box-shadow: 0 0 0 4px color-mix(in srgb, var(--petrol) 13%, transparent), 0 2px 0 var(--paper-2); border-color: color-mix(in srgb, var(--petrol) 55%, var(--rule-2)); }
.c-query::before { /* viewfinder corners while the question is live */
  content: ""; position: absolute; inset: -7px; pointer-events: none; opacity: 0; transform: scale(1.01);
  transition: opacity .3s, transform .4s var(--ease);
  --c: var(--petrol); --l: 11px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l) no-repeat;
}
.c-query.is-typing::before, .c-query.is-running::before { opacity: 1; transform: none; }
.q-glyph { position: absolute; left: 19px; top: 21px; width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; }
.q-field {
  min-height: 38px; padding-right: 92px;
  font: 400 clamp(19px, 2.1vw, 25px)/1.35 var(--serif); letter-spacing: -.005em; color: var(--ink);
  font-variation-settings: "opsz" 24;
}
.q-typed { white-space: pre-wrap; }
.q-caret {
  display: inline-block; width: 2px; height: 1.08em; margin-left: 1px; vertical-align: -.17em;
  background: var(--petrol); border-radius: 1px; animation: blink 1.05s steps(1) infinite;
}
.c-query.is-typing .q-caret { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.q-ask {
  position: absolute; right: 14px; top: 16px; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--rule); background: var(--surface-2); transition: all .2s;
}
.q-ask kbd { font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--muted); font-weight: 500; }
.q-ask.is-pressed { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(.97); }
.q-ask.is-pressed kbd { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.q-entities { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-top: 8px; }
.ent {
  display: inline-flex; align-items: center; gap: 7px; padding: 2px 9px 2px 7px; border-radius: 6px;
  font-size: 12.5px; color: var(--ink-2); background: var(--petrol-soft);
  animation: pop .35s var(--ease) both;
}
.ent .ek { color: var(--petrol); font-weight: 600; }
.ent code { font-size: 11px; color: var(--muted); }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
.q-progress {
  position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--petrol); transform-origin: left; transform: scaleX(0); opacity: 0;
}
.q-progress.run { opacity: 1; animation: prog 1.6s var(--ease) forwards; }
.q-progress.done { opacity: 1; transform: scaleX(1); background: var(--mark); transition: background-color .4s; }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(.92); } }

.c-suggest { display: flex; gap: 6px; padding: 12px 18px 0; overflow-x: auto; scrollbar-width: none; }
.c-suggest::-webkit-scrollbar { display: none; }
.sugg {
  flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: transparent;
  font-size: 13.5px; color: var(--muted); cursor: pointer; transition: all .2s;
}
.sugg:hover { color: var(--ink); border-color: var(--rule-2); }
.sugg[aria-selected="true"] { color: var(--ink); background: var(--surface-2); border-color: var(--rule-2); }

.c-body {
  display: grid; grid-template-columns: 236px minmax(0, 1fr) 312px;
  min-height: 356px; margin-top: 14px; border-top: 1px solid var(--rule);
}
.c-body > div { padding: 16px 18px 18px; min-width: 0; }
.c-trace { border-right: 1px solid var(--rule); background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.c-sources { border-left: 1px solid var(--rule); }
.c-h { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; letter-spacing: .01em; }

.trace { list-style: none; margin: 0; padding: 0; position: relative; }
.trace::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 1px; background: var(--rule); }
.tr { position: relative; padding: 0 0 14px 32px; animation: pop .35s var(--ease) both; }
.tr-n {
  position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--rule-2); color: var(--muted);
}
.tr.is-run .tr-n { border-color: var(--petrol); color: var(--petrol); }
.tr.is-run .tr-n::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--petrol); border-right-color: transparent; animation: spin .8s linear infinite; }
.tr.is-done .tr-n { background: var(--petrol); border-color: var(--petrol); color: var(--surface); }
@keyframes spin { to { transform: rotate(360deg); } }
.tr-tool { font: 500 13px/1.3 var(--mono); color: var(--ink); }
.tr-arg { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.tr-meta { display: flex; gap: 10px; align-items: baseline; margin-top: 4px; font-size: 12px; }
.tr-ms { font: 500 12px var(--mono); color: var(--petrol); }
.tr-cy { font: 11.5px var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.answer { font: 400 18.5px/1.62 var(--serif); color: var(--ink); font-variation-settings: "opsz" 18; }
.answer .sent { animation: fadein .3s both; }
.answer .w { animation: fadein .28s both; }
@keyframes fadein { from { opacity: 0; } }
.cite {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; margin-left: 3px; vertical-align: 2px;
  border-radius: 4px; font: 600 11px/1 var(--sans); background: var(--petrol-soft); color: var(--petrol);
  transition: background-color .4s, color .4s;
}
.cite.ok { background: var(--mark); color: var(--mark-ink); }
.ans-state { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font: 13px/1.3 var(--sans); color: var(--ink-2); border: 1px solid var(--rule); background: var(--surface-2); animation: pop .4s var(--ease) both; }
.ans-state b { font-weight: 600; }
.ans-state .sd { width: 7px; height: 7px; border-radius: 50%; background: var(--brick); box-shadow: 0 0 0 3px var(--brick-soft); }
.ans-state.good .sd { background: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-soft); }

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.src { position: relative; padding-left: 28px; min-width: 0; animation: pop .35s var(--ease) both; }
.src-n { position: absolute; left: 0; top: 2px; min-width: 19px; height: 19px; border-radius: 4px; display: grid; place-items: center; font: 600 11px/1 var(--sans); background: var(--petrol-soft); color: var(--petrol); transition: all .4s; }
.src.ok .src-n { background: var(--mark); color: var(--mark-ink); }
.src-q { font: 400 15px/1.5 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.src-q .hl {
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 1px 2px; border-radius: 2px;
  transition: background-size .9s var(--ease);
}
.src.ok .src-q .hl { background-size: 100% 100%; color: var(--mark-ink); transition: background-size .9s var(--ease), color .25s .6s; }
.src-m { margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.src-m code { display: block; font-size: 11px; color: var(--faint); white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.src-chk { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; color: var(--faint); }
.src-chk::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.src.ok .src-chk { color: var(--ok); }
.src.ok .src-chk::before { border: 0; width: 11px; height: 11px; animation: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.c-foot { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); background: var(--surface-2); }
.meter { display: flex; align-items: center; gap: 10px; padding: 11px 18px; font-size: 13px; border-right: 1px solid var(--rule); }
.meter:last-child { border-right: 0; margin-left: auto; }
.m-k { color: var(--muted); }
.m-v { font-variant-ligatures: none; font: 500 13px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.m-bar { width: 64px; height: 4px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.m-bar i { display: block; height: 100%; width: 0; background: var(--mark); transition: width .6s var(--ease); }
#mState.ok { color: var(--ok); }
.console-note { max-width: 1080px; margin: 14px auto 0; text-align: center; font-size: 13px; color: var(--faint); }

/* ---------- sections ---------- */
.section { padding: 128px 0; position: relative; }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -.022em;
  font-variation-settings: "opsz" 60; text-wrap: balance;
}
.sec-lede { margin-top: 20px; max-width: 640px; font-size: 18.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* quotes look like Yaan's citations: a left rule and the source id in small monospace */
.q { margin: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--mark); }
.q p { font: 400 15.5px/1.55 var(--serif); }
.q mark { background: var(--mark); color: var(--mark-ink); padding: 1px 2px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.q footer { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.q footer code { font-size: 11.5px; color: var(--faint); margin-right: 8px; }
.q-plain { border-left-color: var(--rule-2); }

/* ---------- problem / drift ---------- */
.problem { border-top: 1px solid var(--rule); }
.drift { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 30px 32px 32px; box-shadow: var(--shadow-sm); }
.drift-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; }
.drift-q { font: 400 clamp(19px, 2vw, 23px)/1.35 var(--serif); }
.dq-k { display: block; font: 500 13px/1.4 var(--sans); color: var(--muted); margin-bottom: 4px; }
.drift-asof { font-size: 14px; color: var(--muted); }
.drift-asof strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.dtl { position: relative; margin: 30px 0 0; }
.dtl-track { position: relative; height: 44px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / 33)); background-color: var(--surface-2); border: 1px solid var(--rule); }
.dtl-win {
  position: absolute; top: 9px; bottom: 9px; left: var(--a); width: calc(var(--b) - var(--a));
  border-radius: 5px; display: flex; align-items: center; padding-left: 8px; overflow: hidden;
  font-size: 12px; white-space: nowrap; transition: box-shadow .3s, opacity .3s;
}
.dtl-win b { font-weight: 600; }
.w-rep { background: color-mix(in srgb, var(--petrol) 16%, transparent); color: var(--petrol); }
.w-res { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); padding-left: 0; justify-content: center; font-size: 11px; }
.w-reo { background: color-mix(in srgb, var(--brick) 16%, transparent); color: var(--brick); }
.dtl-win.in { box-shadow: 0 0 0 2px currentColor inset; }
.dtl-msg { position: absolute; left: var(--x); top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 2px; background: var(--mark); border: 1.3px solid var(--ink); }
.dtl-now { position: absolute; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; left: 100%; transition: left .15s; }
.dtl-now::after { content: ""; position: absolute; left: -5px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--surface); }
.dtl-axis { position: relative; height: 22px; margin-top: 8px; font-size: 12px; color: var(--faint); }
.dtl-axis span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.dtl-axis span:first-child { transform: none; }
.dtl-axis .ax-end { transform: translateX(-100%); }
.dtl-axis .ax-r { transform: none; margin-left: 4px; }
.dtl-range { display: block; margin-top: -60px; position: relative; height: 60px; }
.dtl-range input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.dtl-range:focus-within + .dtl-hint { color: var(--petrol); }
.dtl-range:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 4px; border-radius: 8px; }
.dtl-hint { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.ans { border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px 18px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; transition: border-color .3s, background-color .3s; }
.ans-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ans-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.stamp { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; color: var(--brick); background: var(--brick-soft); transition: all .3s; }
.stamp-ok { color: var(--petrol); background: var(--petrol-soft); }
.ans-rag.is-right .stamp { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.ans-rag:not(.is-right) { border-color: color-mix(in srgb, var(--brick) 45%, var(--rule)); }
.ans-rag:not(.is-right) .ans-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--brick) 70%, transparent); text-decoration-thickness: 1.5px; }
.ans-text { font: 400 21px/1.42 var(--serif); min-height: 60px; }
.ans-yaan { border-color: color-mix(in srgb, var(--petrol) 40%, var(--rule)); }
.ans-ev { display: grid; gap: 12px; }
.ev-k { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ans-note { margin-top: auto; font-size: 13.5px; color: var(--muted); padding-top: 12px; border-top: 1px dashed var(--rule); }
.drift-stat { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule); }
.ds-cap { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.ds-row { display: flex; flex-wrap: wrap; gap: 14px 56px; }
.ds { display: flex; align-items: baseline; gap: 14px; }
.ds-n { font: 400 44px/1 var(--serif); letter-spacing: -.02em; color: var(--brick); font-variant-numeric: tabular-nums; }
.ds-yaan .ds-n { color: var(--petrol); }
.ds-l { font-size: 14.5px; color: var(--ink-2); max-width: 230px; line-height: 1.4; }

/* ---------- how it works ---------- */
.how { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.how-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 64px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding: 0 0 0 58px; min-height: 52vh; display: flex; flex-direction: column; justify-content: center; opacity: .38; transition: opacity .5s; }
.step.is-active { opacity: 1; }
.step:last-child { margin-bottom: 42vh; }
.step-n {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-top: -46px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font: 500 17px/1 var(--serif); border: 1px solid var(--rule-2); background: var(--surface); color: var(--muted); transition: all .4s;
}
.step.is-active .step-n { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step > h3 { font: 400 34px/1.1 var(--serif); letter-spacing: -.015em; margin-bottom: 12px; }
.step > p { color: var(--ink-2); font-size: 17px; }
.stage-inline { display: none; }
.stage { position: sticky; top: max(84px, calc(50vh - 300px)); height: 600px; }
.scene {
  position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow);
  padding: 28px; opacity: 0; transform: translateY(12px) scale(.99); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease);
  overflow: hidden;
}
.scene.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* scene 1 */
.lanes { display: grid; gap: 10px; }
.lane { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.lane-src { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.lane-src .glyph { width: 17px; height: 17px; color: var(--ink-2); }
.lane-line { position: relative; height: 30px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--petrol) 10%, var(--surface-2))); border: 1px solid var(--rule); overflow: hidden; }
.lane-line::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--petrol); opacity: .6; }
.pk {
  position: absolute; top: 4px; left: 0; height: 20px; padding: 0 8px; border-radius: 4px; display: inline-flex; align-items: center;
  font: normal 500 11px/1 var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-2); white-space: nowrap;
  animation: flow 4.4s linear infinite; animation-delay: var(--d); opacity: 0;
}
@keyframes flow { 0% { transform: translateX(-110%); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(min(560px, 46vw)); opacity: 0; } }
.pipe { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); }
.pipe-k { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pipe-stages { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; counter-reset: s; }
.pipe-stages li {
  counter-increment: s; position: relative; font-size: 13px; padding: 8px 10px 8px 30px; border-radius: 6px; background: var(--surface); border: 1px solid var(--rule);
  animation: stageglow 7s infinite; animation-delay: calc(var(--i, 0) * 1s);
}
.pipe-stages li:last-child { grid-column: 1 / -1; }
.pipe-stages li em { display: block; margin: 1px 0 0 !important; font-size: 12px; }
.pipe-stages li::before { content: counter(s); position: absolute; left: 10px; top: 8px; font: 600 11px/1.5 var(--mono); color: var(--petrol); }
.pipe-stages li em { font-style: normal; color: var(--muted); margin-left: 4px; }
.pipe-stages li:nth-child(2) { --i: 1; } .pipe-stages li:nth-child(3) { --i: 2; } .pipe-stages li:nth-child(4) { --i: 3; } .pipe-stages li:nth-child(5) { --i: 4; } .pipe-stages li:nth-child(6) { --i: 5; } .pipe-stages li:nth-child(7) { --i: 6; }
@keyframes stageglow { 0%, 14%, 100% { border-color: var(--rule); } 4% { border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-soft); } }
.graphcount { font-size: 13.5px; color: var(--muted); }
.gc-n { font: 500 15px var(--mono); color: var(--ink); }

/* scene 2 */
.sc-title { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.sc-title strong { color: var(--ink); font-weight: 600; }
.chain { list-style: none; margin: 0; padding: 0; }
.dec { display: grid; gap: 6px; }
.dec-win { display: flex; align-items: center; gap: 10px; }
.win-bar { width: var(--w, 54px); height: 8px; border-radius: 4px; background: var(--rule-2); position: relative; }
.win-bar::after { content: ""; position: absolute; right: -1px; top: -3px; width: 2px; height: 14px; background: var(--muted); border-radius: 1px; }
.dec-now .win-bar { background: linear-gradient(90deg, var(--petrol), color-mix(in srgb, var(--petrol) 10%, transparent)); }
.dec-now .win-bar::after { display: none; }
.dec-win { display: grid; grid-template-columns: 132px auto; }
.win-t { font: 12px var(--mono); color: var(--muted); }
.win-t .to { font-family: var(--sans); }
.win-t b { color: var(--petrol); font-weight: 600; font-family: var(--sans); }
.dec-v { font: 500 18px/1.2 var(--serif); }
.dec-v span { font: 13px var(--sans); color: var(--muted); margin-left: 6px; }
.dec .q p { font-size: 14.5px; }
.sup { font: 600 10.5px/1 var(--mono); color: var(--faint); letter-spacing: .04em; padding: 8px 0 8px 22px; position: relative; }
.sup::before { content: ""; position: absolute; left: 6px; top: 2px; bottom: 2px; width: 1px; background: var(--rule-2); }
.sup::after { content: ""; position: absolute; left: 3px; top: 0; border: 3.5px solid transparent; border-bottom-color: var(--faint); border-top: 0; }
.sup::before { background: var(--faint); }
.scene-remember.is-active .dec { animation: pop .5s var(--ease) both; }
.scene-remember.is-active .dec:nth-child(3) { animation-delay: .25s; }
.scene-remember.is-active .dec:nth-child(5) { animation-delay: .5s; }

/* scene 3 */
.alert { display: grid; gap: 16px; }
.alert-k { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brick); }
.dot-warn { width: 8px; height: 8px; border-radius: 50%; background: var(--brick); box-shadow: 0 0 0 3px var(--brick-soft); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.alert h4 { font: 400 22px/1.3 var(--serif); letter-spacing: -.01em; }
.radius-k { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.radius ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.radius li { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 6px; border: 1px solid var(--rule); font-size: 13.5px; background: var(--surface-2); }
.radius li em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.shape { display: inline-block; width: 11px; height: 11px; flex: none; background: var(--petrol); }
.s-person { border-radius: 50%; }
.s-pr { background: transparent; border: 1.5px solid var(--petrol); border-radius: 3px; }
.s-cust { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.s-co { border-radius: 2px; }
.s-area { border-radius: 50%; background: transparent; border: 1.5px solid var(--petrol); }
.s-dec { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.draft { border-left: 2px solid var(--rule-2); padding-left: 14px; }
.draft-t { font-size: 14.5px; color: var(--ink-2); }
.alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.replay-note { font-size: 12.5px; color: var(--faint); margin-left: 6px; }
.alert-actions .is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.delivery { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.delivery li { display: none; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); }
.delivery li .glyph, .delivery li .shape { width: 15px; height: 15px; }
.delivery li::after { content: "✓"; color: var(--ok); font-weight: 700; margin-left: 2px; }
.delivery.go li { display: flex; animation: pop .4s var(--ease) both; }
.delivery.go li:nth-child(2) { animation-delay: .35s; }
.delivery.go li:nth-child(3) { animation-delay: .7s; }
.how .link-btn { margin-top: 40px; }

/* ---------- features tour ---------- */
.tour { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
.tour-list { display: grid; gap: 2px; border-left: 1px solid var(--rule); }
.tour-tab {
  position: relative; display: grid; gap: 4px; text-align: left; padding: 14px 18px 14px 22px; border: 0; background: none; cursor: pointer;
  border-radius: 0 10px 10px 0; transition: background-color .25s;
}
.tour-tab:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.tt-title { font: 400 21px/1.2 var(--serif); color: var(--muted); transition: color .25s; }
.tt-line { font-size: 14.5px; line-height: 1.5; color: var(--muted); overflow: hidden; opacity: 0; max-height: 0; transition: max-height .45s var(--ease), opacity .3s; }
.tour-tab[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
.tour-tab[aria-selected="true"] .tt-title { color: var(--ink); }
.tour-tab[aria-selected="true"] .tt-line { opacity: 1; }
.tour-tab[aria-selected="true"] .tt-line { max-height: 90px; }
.tt-progress { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: transparent; }
.tt-progress i { display: block; width: 100%; height: 0; background: var(--ink); }
.tour-tab[aria-selected="true"] .tt-progress i { height: 100%; }
.tour.autoplay .tour-tab[aria-selected="true"] .tt-progress i { animation: fill var(--dur, 6s) linear both; }
.tour.paused .tour-tab[aria-selected="true"] .tt-progress i { animation-play-state: paused; }
@keyframes fill { from { height: 0; } to { height: 100%; } }
.tour-frame { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.frame-bar { display: flex; align-items: center; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.fb-path { font: 12px var(--mono); color: var(--muted); }
.frame-view { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #f3f5f7; }
.tour-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.015); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.tour-img.is-on { opacity: 1; transform: none; }

/* ---------- results ---------- */
.results { border-top: 1px solid var(--rule); }
.ablate {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: 34px 36px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.ab-k { font: 400 22px/1.25 var(--serif); margin-bottom: 18px; }
.switch { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 15px; }
.sw-track { position: relative; width: 52px; height: 30px; border-radius: 15px; background: var(--petrol); transition: background-color .3s; }
.sw-thumb { position: absolute; top: 3px; left: 25px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .3s var(--ease); }
.switch[aria-checked="false"] .sw-track { background: var(--rule-2); }
.switch[aria-checked="false"] .sw-thumb { left: 3px; }
.ab-hint { margin-top: 14px; font-size: 14px; color: var(--muted); }
.ab-figs { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.ab-fig { display: grid; gap: 6px; align-content: end; }
.ab-n { font: 400 clamp(40px, 5vw, 64px)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ab-main .ab-n { font-size: clamp(64px, 9vw, 120px); }
.ab-l { font-size: 14px; color: var(--muted); }
.ab-bar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; margin-top: 6px; }
.ab-bar i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--petrol); transition: width .9s var(--ease), background-color .4s; }
.ab-bar-warn i { background: var(--brick); width: calc(var(--v) * 4%); }
.ablate.is-off .ab-main .ab-n, .ablate.is-off #abCust { color: var(--muted); }
.ablate.is-off #abStale { color: var(--brick); }

.table-wrap { margin-top: 40px; overflow-x: auto; }
.rt { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 620px; }
.rt th, .rt td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--rule); }
.rt td { font-variant-numeric: tabular-nums; }
.rt thead th { font-size: 13px; font-weight: 600; color: var(--muted); border-bottom-color: var(--rule-2); }
.rt tbody th { font-weight: 500; }
.rt td { color: var(--ink-2); }
.rt td:nth-child(2) { position: relative; min-width: 150px; }
.cell-bar { display: inline-block; vertical-align: middle; width: calc(var(--v) * .9px); height: 8px; border-radius: 2px; margin-right: 10px; background: var(--rule-2); }
.rt-yaan th, .rt-yaan td { font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--petrol-soft) 55%, transparent); }
.rt-yaan .cell-bar { background: var(--petrol); }
.rt td.dev { color: var(--muted); font-weight: 400; }
.rt-ref th, .rt-ref td { color: var(--muted); font-style: italic; font-weight: 400; }
.rt-ref th span { display: block; font-size: 12.5px; font-style: normal; color: var(--faint); }
.rt-ref .cell-bar { background: repeating-linear-gradient(90deg, var(--rule-2) 0 3px, transparent 3px 5px); }
.table-note { margin-top: 16px; max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.table-note strong { color: var(--ink); font-weight: 600; }
.table-note a { color: var(--petrol); }
.figs3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--ink); }
.f3 { padding: 22px 28px 0 0; display: grid; gap: 8px; align-content: start; }
.f3 + .f3 { padding-left: 28px; border-left: 1px solid var(--rule); }
.f3-n { font: 400 clamp(34px, 3.8vw, 46px)/1 var(--serif); letter-spacing: -.02em; }
.f3-l { font-size: 14.5px; color: var(--muted); max-width: 260px; }

/* ---------- why a graph (night band) ---------- */
.falkor { background: var(--night); color: var(--night-ink); --rule: var(--night-rule); }
.falkor .sec-lede { color: var(--night-muted); }
.gw-links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 32px; }
.falkor .link-btn { color: #8ccbe0; }

/* ---------- logo strip ---------- */
.strip { padding: 72px 0 48px; }
.strip-cap { text-align: center; font-size: 15px; color: var(--muted); margin: 0 16px 32px; }
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.mq-track { display: flex; width: max-content; animation: mq 40s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-set { display: flex; list-style: none; margin: 0; padding: 0; }
.mq-item { display: flex; align-items: center; gap: 16px; padding: 0 46px; height: 96px; color: var(--ink-2); white-space: nowrap; transition: color .25s, opacity .25s; }
.mq-item .glyph { width: 40px; height: 40px; }
.mq-n { font: 500 28px/1 var(--sans); letter-spacing: -.015em; }
.mq-item:hover { color: var(--petrol); }
.mq-soon { font-size: 11.5px; font-weight: 500; padding: 2px 8px; border: 1px dashed var(--rule-2); border-radius: 999px; color: var(--muted); letter-spacing: .01em; }
@keyframes mq { to { transform: translateX(-50%); } }
.calm .mq-track { animation-duration: 66s; }

/* ---------- results: the split metrics panel ---------- */
.results { padding-top: 0; border-top: 0; }
.mx { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); min-height: 640px; margin-bottom: 88px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mx-side { background: var(--night); color: var(--night-ink); display: flex; justify-content: flex-end; padding: 104px 64px 96px 28px; }
.mx-side-in { width: 100%; max-width: 410px; }
.mx-side h2 { font: 400 clamp(36px, 3.6vw, 48px)/1.04 var(--serif); letter-spacing: -.022em; color: var(--night-ink); }
.mx-lede { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--night-muted); }
.mx-lede a { color: var(--night-ink); text-decoration: underline; text-decoration-color: rgba(236, 237, 238, .4); text-underline-offset: 3px; }
.mx-tabs { display: grid; gap: 6px; margin-top: 56px; }
.mx-tab { display: grid; gap: 6px; text-align: left; padding: 8px 0 8px 20px; border: 0; border-left: 2px solid transparent; background: none; cursor: pointer; color: var(--night-muted); transition: border-color .15s; }
.mx-tab[aria-selected="true"] { border-left-color: var(--night-ink); }
.mx-t { font: 500 18px/1.3 var(--sans); color: #8c9198; transition: color .25s; }
.mx-tab:hover .mx-t { color: var(--night-ink); }
.mx-tab[aria-selected="true"] .mx-t { color: var(--night-ink); }
.mx-d { font-size: 14.5px; line-height: 1.7; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s var(--ease), opacity .18s; }
.mx-tab[aria-selected="true"] .mx-d { max-height: 160px; opacity: 1; }
.mx-d b { color: var(--night-ink); font: 400 26px/1 var(--serif); letter-spacing: -.02em; margin-right: 2px; vertical-align: -2px; font-variant-numeric: lining-nums; }

.mx-chart { margin: 0; background: var(--mx-bg); padding: 64px 64px 44px 48px; display: flex; flex-direction: column; min-width: 0; }
.mx-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; font-size: 13.5px; color: var(--ink-2); min-height: 22px; }
.mx-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mx-legend svg { width: 15px; height: 15px; }
.mx-legend svg { color: var(--muted); }
.mx-legend .lg-yaan svg { color: var(--mx-yaan); }
.mx-legend .lg-yaan { font-weight: 600; color: var(--ink); }
.mx-area { position: relative; flex: 1; display: grid; grid-template-columns: 26px minmax(0, 1fr); margin-top: 28px; }
.mx-ylab { align-self: center; justify-self: center; transform: rotate(-90deg); white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.mx-plot { position: relative; height: 430px; margin-left: 36px; border-bottom: 1px solid var(--rule-2); display: flex; justify-content: space-around; align-items: flex-end; padding: 0 2%; }
.mx-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--rule); pointer-events: none; }
.mx-grid span { position: absolute; right: calc(100% + 10px); top: -8px; font: 11.5px var(--mono); color: var(--muted); white-space: nowrap; }
.mx-group { position: relative; flex: 1; height: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.mx-bar { position: relative; width: clamp(22px, 3.3vw, 54px); height: calc(var(--h) * 1%); background: var(--mx-ctx); transform-origin: bottom; animation: mxgrow .5s var(--ease) both; animation-delay: var(--d, 0s); }
.mx-bar.is-yaan { background: var(--mx-yaan); }
.mx-bar svg { position: absolute; left: 50%; top: 10px; width: 16px; height: 16px; transform: translateX(-50%); }
.mx-bar.is-yaan svg { color: #fff; }
.mx-bar:not(.is-yaan) svg { color: var(--muted); }
.mx-bar.short svg { display: none; }
.mx-v { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); font: 500 12.5px var(--mono); color: var(--ink); white-space: nowrap; animation: fadein .25s both; animation-delay: calc(var(--d, 0s) + .3s); }
.mx-x { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; text-align: center; }
.mx-cap { margin-top: 56px; font-size: 13px; color: var(--muted); max-width: 640px; }
@keyframes mxgrow { from { transform: scaleY(0); } }
.calm .mx-bar { animation-name: fadein; }

/* ---------- why FalkorDB (night band) ---------- */
.falkor h3 { font: 400 clamp(26px, 2.6vw, 32px)/1.15 var(--serif); letter-spacing: -.015em; color: var(--night-ink); }
.rust { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--night-rule); background: var(--night-2); font-size: 14px; color: var(--night-ink); }
.rust-mark { width: 20px; height: 20px; }
.proof { list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--night-rule); border-bottom: 1px solid var(--night-rule); }
.proof li { display: grid; gap: 10px; align-content: start; padding: 28px 24px 26px 0; }
.proof li + li { padding-left: 24px; border-left: 1px solid var(--night-rule); }
.pf-n { font: 400 clamp(44px, 4.6vw, 60px)/1 var(--serif); letter-spacing: -.03em; color: var(--night-ink); }
.pf-l { font-size: 14.5px; color: var(--night-muted); line-height: 1.45; }
.pf-src { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px dashed #3f4349; color: var(--night-muted); }
.pf-src.us { border-style: solid; border-color: #2f6f87; color: #8ccbe0; background: rgba(105, 182, 208, .08); }

.engine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-bottom: 64px; }
.stack, .tail { border: 1px solid var(--night-rule); border-radius: 18px; background: var(--night-2); padding: 26px 26px 22px; }
.stack-k { font-size: 13px; font-weight: 600; color: var(--night-muted); margin-bottom: 18px; }
.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; justify-items: center; }
.layer, .ly-cell {
  display: grid; gap: 3px; text-align: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--night-rule);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)); cursor: default;
  transition: border-color .25s, background-color .25s, transform .25s var(--ease);
}
.layer { width: 100%; }
.layers > li:nth-child(1) { width: 66%; }
.layers > li:nth-child(2) { width: 76%; }
.layers > li:nth-child(3) { width: 88%; }
.layers > li:nth-child(4) { width: 96%; }
.layer-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; border: 0; background: none; }
.ly-t { font: 500 17px/1.2 var(--serif); color: var(--night-ink); }
.ly-d { font-size: 12.5px; color: var(--night-muted); line-height: 1.35; }
.l-yaan { border-color: #4a4a2a; background-color: rgba(232, 205, 69, .06); }
.l-yaan .ly-t { color: #e8cd45; }
.l-core { border-color: #2f6f87; background-color: rgba(105, 182, 208, .1); box-shadow: 0 0 0 4px rgba(105, 182, 208, .05), 0 12px 30px -16px rgba(105, 182, 208, .5); }
.l-core .ly-t { color: #8ccbe0; }
[data-use]:hover, [data-use]:focus-visible, [data-use].is-on { border-color: #69b6d0; background-color: rgba(105, 182, 208, .12); transform: translateY(-1px); outline: none; }
.stack-use { margin-top: 16px; min-height: 66px; font-size: 14px; color: var(--night-ink); line-height: 1.5; border-top: 1px dashed var(--night-rule); padding-top: 14px; }

.tail { margin: 0; display: grid; gap: 14px; align-content: start; }
.tail-t { display: block; font: 400 22px/1.2 var(--serif); color: var(--night-ink); }
.tail-d { display: block; margin-top: 6px; font-size: 14px; color: var(--night-muted); line-height: 1.5; }
.tail-legend { display: flex; gap: 18px; font-size: 13px; color: var(--night-muted); }
.tail-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.lg-f::before { background: #69b6d0; }
.lg-o::before { background: #6b7078; }
.tail-plot { position: relative; display: grid; gap: 4px; padding: 6px 0 26px; }
.tail-axis { position: absolute; left: 44px; right: 62px; top: 0; bottom: 0; pointer-events: none; }
.tail-axis span { position: absolute; left: calc(var(--x) * 1%); top: 0; bottom: 0; border-left: 1px dashed #2c2f33; font-size: 11px; color: #8a8f96; display: flex; align-items: flex-end; white-space: nowrap; }
.tail-axis span:last-child { transform: translateX(-100%); border-left: 0; border-right: 1px dashed #2c2f33; }
.tail-row { position: relative; display: grid; grid-template-columns: 44px 1fr 62px; align-items: center; height: 58px; }
.tr-p { font: 600 13px var(--mono); color: var(--night-muted); }
.tr-track { position: relative; height: 40px; }
.tb { position: absolute; left: 0; height: 13px; border-radius: 0 4px 4px 0; width: 0; transition: width 1.1s var(--ease); }
.tb-o { top: 4px; background: #6b7078; }
.tb-f { top: 23px; background: #69b6d0; }
.tv { position: absolute; left: 0; font: 500 12px var(--sans); color: var(--night-ink); white-space: nowrap; transition: left 1.1s var(--ease); }
.tv-o { top: 2px; }
.tv-f { top: 21px; }
.tr-x { justify-self: end; font: 400 26px/1 var(--serif); color: #e8cd45; letter-spacing: -.02em; }
.tail-src { font-size: 12px; color: #8a8f96; }
.algo { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 4px; }
.algo caption { text-align: left; font-size: 12.5px; color: var(--night-muted); padding-bottom: 8px; }
.algo th, .algo td { text-align: left; padding: 9px 0; border-top: 1px solid var(--night-rule); font-weight: 400; }
.algo thead th { font-size: 12px; color: #8a8f96; border-top: 0; }
.algo tbody th { color: var(--night-ink); }
.algo tbody th span { display: block; font-size: 12px; color: #8a8f96; }
.algo td { color: var(--night-muted); font-variant-numeric: tabular-nums; }
.algo td:nth-child(2) { color: #8ccbe0; font-weight: 600; }


.closing-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 22px; padding: 22px 28px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.closing-alt p { max-width: 620px; color: var(--ink-2); font-size: 16px; }

.mx-v, .pf-n, .tr-x, .f3-n, .ds-n, .ab-n { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- the Yaan mark: two sources converge into one stem, a Y that is also the pipeline ---------- */
.ym-arm { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ym-stem { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; }
.ym-node { fill: var(--ink); stroke: var(--paper); stroke-width: 1.6; }
.ym-cite { fill: var(--mark); stroke: var(--ink); stroke-width: 1.3; }
.ym-src { fill: var(--petrol); }
.falkor .ym-stem, .mx-side .ym-stem { stroke: var(--night-ink); }

/* ---------- FalkorDB, as its logo ---------- */
.fk { display: inline-flex; align-items: center; vertical-align: middle; }
.fk img { height: 1.3em; width: auto; display: block; }
.fk-l { display: none !important; }
:root[data-theme="dark"] .fk-d, .falkor .fk-d, .mx-side .fk-d { display: none !important; }
:root[data-theme="dark"] .fk-l, .falkor .fk-l, .mx-side .fk-l { display: block !important; }
.powered { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 6px 14px 6px 16px; border-radius: 999px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: 13.5px; color: var(--muted); }
.powered .fk img { height: 20px; }
.why-fk { display: flex; align-items: center; gap: .3em; flex-wrap: wrap; }
.why-fk .fk img { height: .95em; }
.ly-t .fk { margin-right: 4px; }
.ly-t .fk img { height: 17px; }
.rust .fk img { height: 15px; }

/* ---------- connect: four sources, a funnel, a neck, one service ---------- */
.scene-connect { padding: 22px 24px 20px; }
.hg { display: flex; flex-direction: column; height: 100%; }
.hg-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hg-col { display: grid; gap: 8px; justify-items: center; }
.hg-src { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.hg-src .glyph { width: 17px; height: 17px; }
.hg-lane { position: relative; width: 100%; height: 112px; border-radius: 10px 10px 4px 4px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--petrol) 10%, var(--surface-2))); border: 1px solid var(--rule); }
.hg-lane::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 26%; height: 3px; transform: translateX(-50%); border-radius: 3px 3px 0 0; background: var(--petrol); opacity: .7; }
.drop { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); padding: 3px 7px; border-radius: 4px; white-space: nowrap;
  font: normal 500 10.5px/1.2 var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-2);
  animation: drop 4.2s linear infinite; animation-delay: var(--d); opacity: 0; }
@keyframes drop { 0% { transform: translate(-50%, -120%); opacity: 0; } 10% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translate(-50%, 120px) scale(.7); opacity: 0; } }
.hg-funnel { display: block; width: 100%; height: auto; overflow: visible; margin-top: -1px; }
.hg-funnel path { fill: none; stroke: color-mix(in srgb, var(--petrol) 35%, var(--rule-2)); stroke-width: 7; stroke-linecap: round; opacity: .55; }
.hg-dot { fill: var(--petrol); }
.hg-neck { align-self: center; width: 30px; height: 26px; margin-top: -2px; border-left: 1.5px solid var(--rule-2); border-right: 1.5px solid var(--rule-2);
  background: color-mix(in srgb, var(--petrol) 14%, var(--surface)); position: relative; overflow: hidden; }
.hg-neck i { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, var(--petrol) 0 5px, transparent 5px 12px); opacity: .55; animation: neck .6s linear infinite; }
@keyframes neck { to { transform: translateY(12px); } }
.hg-core { flex: 1; display: grid; grid-template-rows: auto 1fr auto; align-items: center; gap: 10px; border-radius: 18px; padding: 16px 20px 14px;
  border: 1px solid color-mix(in srgb, var(--petrol) 35%, var(--rule)); background: linear-gradient(180deg, color-mix(in srgb, var(--petrol) 7%, var(--surface)), var(--surface));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--petrol) 6%, transparent), 0 18px 40px -24px color-mix(in srgb, var(--petrol) 60%, transparent); }
.hg-core-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.hg-name { display: inline-flex; align-items: center; gap: 8px; font: 500 22px/1 var(--serif); }
.hg-mark { width: 24px; height: 24px; }
.hg-on { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.hg-on .fk img { height: 18px; }
.ticker { position: relative; height: 168px; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.tk-list { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 0; transition: transform .6s var(--ease); }
.tk-i { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 6px; opacity: .3; transform: scale(.94); transform-origin: left center; transition: opacity .5s, transform .5s var(--ease); }
.tk-i.on { opacity: 1; transform: none; }
.tk-i.near { opacity: .42; }
.tk-n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); border: 1px solid var(--rule-2); color: var(--muted); background: var(--surface); transition: all .4s; }
.tk-i.on .tk-n { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.tk-t { font: 500 20px/1.2 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.tk-t em { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hg-core .graphcount { font-size: 12.5px; color: var(--muted); }
/* the drops, dots and neck keep moving under reduced motion: the motion stays inside the pipeline's own lanes */

/* ---------- remember: a fact with a lifespan ---------- */
.scene-remember { padding: 28px 28px 22px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 18px; align-content: start; }
.scene-remember .rm-foot { align-self: end; }
.rm-chart { position: relative; padding: 4px 0 26px; }
.rm-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; height: 50px; }
.rm-lab { font-size: 13px; font-weight: 600; color: var(--faint); transition: color .4s; }
.rm-row.on .rm-lab { color: var(--ink); }
.rm-track { position: relative; height: 20px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / 33)); }
.rm-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--a, 0) * 1%); width: 0; border-radius: 5px; transition: width .9s var(--ease), opacity .4s; }
.b-rep { --a: 15.2; background: color-mix(in srgb, var(--petrol) 55%, transparent); }
.b-res { --a: 69.7; background: color-mix(in srgb, var(--ok) 65%, transparent); }
.b-reo { --a: 75.8; background: color-mix(in srgb, var(--brick) 60%, transparent); }
.rm-bar.open { border-radius: 5px 0 0 5px; -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent); }
.rm-bar.closed::after { content: ""; position: absolute; right: -1px; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--ink); }
.rm-axis { position: relative; margin-left: 76px; height: 18px; margin-top: 6px; font-size: 11.5px; color: var(--faint); }
.rm-axis span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); white-space: nowrap; }
.rm-axis .r { transform: none; margin-left: 4px; }
.rm-axis .e { transform: translateX(-100%); }
.rm-head { position: absolute; top: -4px; bottom: 20px; left: calc(76px + (100% - 76px) * var(--x, .152)); width: 2px; margin-left: -1px; background: var(--ink); transition: left .9s var(--ease); }
.rm-head b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 600 11px var(--sans); color: var(--ink); background: var(--mark); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.rm-card { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); display: grid; gap: 8px; align-content: start; }
.rm-card.flash { animation: fadein .45s both; }
.rm-who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rm-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--sans); color: #fff; background: var(--petrol); flex: none; }
.rm-who b { font-weight: 600; }
.rm-who .rm-role { color: var(--muted); }
.rm-state { margin-left: auto; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.st-rep { background: var(--petrol-soft); color: var(--petrol); }
.st-res { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.st-reo { background: var(--brick-soft); color: var(--brick); }
.rm-card .q p { font-size: 16.5px; }
.rm-card { padding: 18px 20px; gap: 12px; }
.rm-kept { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.rm-kept::before { content: ""; width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid var(--ink); border-left-width: 0; border-top-width: 0; transform: rotate(-45deg) translate(1px, -2px); width: 5px; height: 9px; transform: rotate(45deg); }
.rm-foot { font-size: 13.5px; color: var(--ink-2); padding-top: 10px; border-top: 1px dashed var(--rule); }

/* ---------- act: the alert in the AI tool the team already uses ---------- */
.scene-act { padding: 26px 24px 20px; display: grid; grid-template-rows: auto auto; gap: 14px; align-content: center; }
.cw { border-radius: 14px; overflow: hidden; border: 1px solid #2a2d32; background: #151618; color: #e6e7e8; display: grid; grid-template-rows: auto auto; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55); }
.cw-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: #1d1f22; border-bottom: 1px solid #2a2d32; }
.cw-tab { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 7px; font-size: 12.5px; color: #8c9198; }
.cw-tab .glyph { width: 14px; height: 14px; }
.cw-mcp { margin-left: auto; font: 500 11px var(--mono); color: #8c9198; padding: 2px 7px; border: 1px solid #363a40; border-radius: 999px; }
.cw-body { padding: 18px 18px 16px; display: grid; gap: 12px; align-content: start; font-size: 14px; }
.cw-user { font: 500 13.5px var(--mono); color: #fff; }
.cw-user span { color: #e8a27c; margin-right: 6px; }
.cw-tool { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: #9a9fa6; }
.cw-tool i { width: 7px; height: 7px; border-radius: 50%; background: #6fc59a; }
.cw-tool span { color: #5fb3c9; }
.cw-ai { display: grid; gap: 8px; line-height: 1.5; color: #d9dbdd; }
.cw-ai b { color: #fff; }
.cw-ai .dot-warn { display: inline-block; vertical-align: 1px; margin-right: 7px; background: #e8907a; box-shadow: 0 0 0 3px rgba(232, 144, 122, .2); }
.cw-radius { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cw-radius li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid #363a40; font-size: 12px; color: #c9ccd0; }
.cw-radius .shape { width: 9px; height: 9px; background: #5fb3c9; }
.cw-radius .s-pr, .cw-radius .s-area { background: transparent; border-color: #5fb3c9; }
.cw-draft { font-size: 12.5px; color: #a0a5ab; padding-left: 10px; border-left: 2px solid #f2d24b; }
.cw-draft mark { background: #f2d24b; color: #111214; padding: 0 2px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cw .alert { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid #2a2d32; }
.cw .btn-ink { background: #ecedee; color: #111214; }
.cw .btn-line { background: transparent; color: #ecedee; border-color: #42464c; }
.cw .replay-note { color: #8c9198; }
.cw .delivery li { color: #c9ccd0; font-size: 13px; }
.cw-alt { font-size: 12.5px; color: var(--muted); }

/* ---------- bring your own AI ---------- */
.byo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 40px; padding: 26px 30px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.byo-icons { display: flex; }
.byo-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink); box-shadow: 0 0 0 4px var(--surface); }
.byo-ic + .byo-ic { margin-left: -12px; }
.byo-ic .glyph { width: 30px; height: 30px; }
.byo-copy h3 { font: 400 clamp(22px, 2.4vw, 28px)/1.2 var(--serif); letter-spacing: -.012em; }
.byo-copy p { margin-top: 8px; color: var(--muted); max-width: 720px; }
.works .sec-head, .works .sec-lede { max-width: none; }
/* connectors: one cell per tool; 1px gaps over a rule-colored background draw the inner lines at any column count */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.logos li { padding: 26px 20px 24px; display: grid; gap: 8px; align-content: start; background: var(--paper); }
.glyph-lg { width: 28px; height: 28px; margin-bottom: 8px; }
.lg-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: 16px; }
.lg-d { font-size: 14px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1100px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logos li { padding: 20px 14px; } }


/* ---------- hero: open source, self-hosted ---------- */
.pw-os { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.pw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.pw-sep { width: 1px; height: 16px; background: var(--rule-2); }
.pw-by { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn-ghost:hover { border-color: var(--rule-2); background: var(--surface); }

/* ---------- Act: the three clients, each in its own look ---------- */
.cw-tab { border: 0; background: none; cursor: pointer; font: 500 12.5px/1.2 var(--sans); }
.cw-tab:hover { color: #fff; }
.cw-tab[aria-selected="true"] { background: #2a2d32; color: #fff; }
.cw-tab .glyph { width: 14px; height: 14px; }
.cw-body[hidden] { display: none; }
.cw-body:not([hidden]) { animation: fadein .25s both; }
.cc-head { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--mono); color: #e8a27c; padding: 6px 10px; border: 1px solid #3a2e28; border-radius: 8px; width: fit-content; }
.cc-head span { color: #8c9198; font-weight: 400; }
.cc-star { color: #d97757; font-size: 14px; }
.cw-user span { color: #d97757; }
.cw[data-client="codex"] { background: #0b0b0b; border-color: #262626; }
.cw[data-client="codex"] .cw-bar { background: #121212; border-color: #262626; }
.cw-codex { font-family: var(--mono); font-size: 12.5px; }
.cx-head { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid #333; border-radius: 6px; color: #9a9a9a; width: fit-content; font-size: 11.5px; }
.cx-head b { color: #f2f2f2; font-weight: 600; font-size: 12.5px; }
.cx-user { color: #f2f2f2; font-weight: 600; }
.cx-user span { color: #9a9a9a; margin-right: 6px; }
.cx-tool { color: #c8c8c8; }
.cx-tool span { color: #6fc59a; margin-right: 6px; }
.cx-tool b { color: #79c0ff; font-weight: 500; }
.cx-tree { color: #7c7c7c; margin-top: -6px; padding-left: 14px; }
.cx-ai { display: grid; gap: 8px; color: #e0e0e0; line-height: 1.55; font-family: var(--sans); font-size: 13.5px; }
.cx-ai b { color: #fff; }
.cw[data-client="cursor"] { background: #181818; border-color: #2b2b2b; }
.cw[data-client="cursor"] .cw-bar { background: #1f1f1f; border-color: #2b2b2b; }
.cw-cursor { font-family: var(--sans); }
.cu-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #a6a6a6; }
.cu-mode { padding: 3px 9px; border-radius: 999px; background: #2b2b2b; color: #e6e6e6; font-weight: 600; }
.cu-user { justify-self: end; max-width: 80%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: #2b2d31; border: 1px solid #383a3f; color: #f0f0f0; font-size: 13.5px; }
.cu-tool { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a6a6a6; padding: 6px 10px; border-radius: 8px; background: #212121; border: 1px solid #2b2b2b; }
.cu-tool b { color: #e6e6e6; font-weight: 600; }
.cu-tool span:last-child { margin-left: auto; font-size: 11px; color: #7a7a7a; }
.cu-ok { color: #6fc59a; font-weight: 700; }
.cu-ai { display: grid; gap: 8px; color: #dcdcdc; line-height: 1.55; font-size: 13.5px; }
.cu-ai b { color: #fff; }
.cw[data-client="cursor"] .btn-ink { background: #e6e6e6; color: #181818; }

/* ---------- open source, self-hosted ---------- */
.selfhost { border-top: 1px solid var(--rule); }
.sh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sh-head { max-width: 860px; margin: 0 auto 72px; text-align: center; }
.sh-head h2 { font: 400 clamp(30px, 3.5vw, 44px)/1.08 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.sh-head .sec-lede { max-width: 680px; margin: 22px auto 0; }
.sh-head .sh-ctas { justify-content: center; margin-top: 30px; }

/* ---------- self-hosted: the points rotate on the left, the drawing of your network sits on the right.
   The point in focus lights the part of the drawing it is about. ---------- */
.sh-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 72px; align-items: center; max-width: 1040px; margin: 0 auto; }
.pts { --dur: 4.5s; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 30px; align-items: center; }
.pt-rail { display: grid; gap: 10px; justify-items: center; position: relative; }
.pt-rail::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 1px; background: var(--rule); }
.pt-dot { position: relative; width: 10px; height: 10px; padding: 0; border-radius: 999px; cursor: pointer; overflow: hidden;
  background: var(--paper); border: 1.5px solid var(--rule-2); transition: height .45s var(--ease), border-color .3s; }
.pt-dot:hover { border-color: var(--petrol); }
.pt-dot.on { height: 40px; border-color: var(--petrol); }
.pt-dot i { position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--petrol); }
.pt-dot.on i { animation: pt-fill var(--dur) linear forwards; }
.pts.paused .pt-dot.on i { animation-play-state: paused; }
@keyframes pt-fill { to { height: 100%; } }
.pt-list { list-style: none; margin: 0; padding: 0; position: relative; height: 320px;
  -webkit-mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.pt { position: absolute; left: 0; right: 0; top: 0; translate: 0 var(--y, 0); opacity: 0; cursor: pointer;
  transition: translate .42s var(--ease), opacity .3s ease; }
.pt h3 { font: 400 clamp(24px, 2.4vw, 31px)/1.15 var(--serif); letter-spacing: -.016em; color: var(--ink);
  transform-origin: left top; transition: scale .42s var(--ease), color .3s; }
.pt p { margin-top: 12px; max-width: 470px; font-size: 16.5px; line-height: 1.6; color: var(--muted); opacity: 0; transition: opacity .25s ease; }
.pt.is-near { opacity: .34; }
.pt.is-near h3 { scale: .72; color: var(--muted); }
.pt.is-on { opacity: 1; cursor: default; z-index: 1; }
.pt:not(.is-on) p, .pt:not(.is-on):not(.is-near) { pointer-events: none; }
.pt-list:not(.ready) .pt, .pt-list:not(.ready) .pt h3 { transition: none; }
.pt.is-on p { opacity: 1; transition-delay: .08s; }

.perim { --fence: color-mix(in srgb, var(--ok) 55%, var(--rule-2)); }
.pm-net { position: relative; isolation: isolate; display: grid; padding: 18px 22px 12px; border: 1.5px dashed var(--fence); border-radius: 22px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ok) 26%, transparent) 1px, transparent 1.4px) 0 0 / 16px 16px,
    color-mix(in srgb, var(--ok) 4%, var(--paper));
  transition: border-color .4s, box-shadow .4s; }
.pm-k { position: absolute; top: -13px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--fence); font-size: 12.5px; font-weight: 600; color: var(--ok); }
.pm-k svg { width: 12px; height: 12px; }
.pm-p { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; padding: 14px 0; }
.pm-net .pm-p::before { /* the spine, drawn per row so it runs unbroken from the tools to the clients */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: -1;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--petrol) 60%, var(--rule-2)) 0 6px, transparent 6px 11px); }
.pm-src::before { top: 50% !important; }
.pm-cli::before { bottom: 50% !important; }
.pm-tiles { display: grid; grid-template-columns: repeat(6, 28px); gap: 5px; padding: 8px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.pm-tile { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--rule); }
.pm-tile .glyph { width: 15px; height: 15px; }
.pm-core { gap: 0; }
.pm-cell { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 17px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--petrol) 40%, var(--rule)); font: 500 19px/1 var(--serif);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--petrol) 6%, transparent), 0 12px 26px -18px color-mix(in srgb, var(--petrol) 70%, transparent);
  transition: border-color .4s, box-shadow .4s; }
.pm-cell:first-child { border-radius: 14px 0 0 14px; border-right-style: dashed; }
.pm-cell:last-child { border-radius: 0 14px 14px 0; border-left: 0; }
.pm-cell .brand-mark { width: 22px; height: 22px; }
.pm-cell .fk img { height: 19px; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); transition: border-color .4s, box-shadow .4s; }
.pm-chip .glyph { width: 14px; height: 14px; }
/* the only thing that crosses the fence: a call to the AI model */
.pm-egress { padding: 36px 0 0; }
.pm-egress::before { content: ""; position: absolute; left: 50%; top: -18px; height: 54px; width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--faint) 0 5px, transparent 5px 9px); }
.pm-egress::after { /* the gate in the fence */
  content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -6px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--fence); }
.pm-api { display: grid; gap: 2px; min-width: 200px; padding: 9px 16px; text-align: center; border-radius: 11px;
  background: var(--surface); border: 1px dashed var(--rule-2); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: border-color .4s, box-shadow .4s; }
.pm-api em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
/* the part the point in focus is about */
.pm-net.is-hot { border-color: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 10%, transparent); }
.pm-cell.is-hot, .pm-core.is-hot .pm-cell { border-color: var(--petrol); box-shadow: 0 0 0 4px color-mix(in srgb, var(--petrol) 18%, transparent), 0 12px 26px -18px color-mix(in srgb, var(--petrol) 70%, transparent); }
.pm-cli.is-hot .pm-chip { border-color: var(--petrol); box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 14%, transparent); }
.pm-egress.is-hot .pm-api { border-style: solid; border-color: var(--petrol); box-shadow: 0 0 0 4px color-mix(in srgb, var(--petrol) 14%, transparent); }
.calm .pt { transition: opacity .3s ease; }
@media (max-width: 900px) {
  .sh-body { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 520px; }
  .pt-list { height: 340px; }
}
@media (max-width: 480px) {
  .pts { gap: 20px; }
  .pm-net { padding: 16px 10px 10px; }
  .pm-tiles { grid-template-columns: repeat(6, 26px); gap: 4px; }
  .pm-tile { width: 26px; height: 26px; }
}

/* ---------- footer ---------- */
.foot .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px 40px; }
.foot-brand p { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); max-width: 340px; }
.foot-brand .foot-os { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.foot-brand .foot-os .fk img { height: 16px; }
.foot-col { display: grid; gap: 10px; align-content: start; }
.foot-h { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.foot-col a { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--petrol); }
.foot .foot-data { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--muted); }
.foot .foot-data b { color: var(--ink-2); font-weight: 600; }

/* ---------- integrations ---------- */

/* ---------- roadmap ---------- */

/* ---------- closing ---------- */
.closing { padding: 40px 0 0; }
.poster {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: stretch;
  border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--night-ink);
  background: radial-gradient(120% 140% at 100% 0%, var(--night-2), var(--night) 60%); border: 1px solid var(--night-rule); box-shadow: var(--shadow);
}
.poster-copy { padding: 56px 0 56px 56px; display: grid; gap: 18px; align-content: center; justify-items: start; }
.poster-play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--mark); transition: transform .3s var(--ease), box-shadow .3s; box-shadow: 0 0 0 10px rgba(245, 218, 74, .14); margin-bottom: 8px; }
.poster:hover .poster-play { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(245, 218, 74, .12); }
.poster-play svg { width: 26px; height: 26px; fill: #131a23; margin-left: 4px; }
.poster-t { font: 400 clamp(30px, 3.4vw, 44px)/1.06 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.poster-d { font-size: 16.5px; color: var(--night-muted); max-width: 440px; }
.poster-len { font: 600 14px var(--sans); color: var(--mark); }
.poster-shot { position: relative; align-self: stretch; margin-top: 48px; min-height: 360px; }
.poster-shot img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top;
  border-radius: 12px 0 0 0; border: 1px solid rgba(255, 255, 255, .12); border-right: 0; border-bottom: 0;
  box-shadow: -20px -10px 60px -20px rgba(0, 0, 0, .6); transition: transform 1s var(--ease);
}
.poster:hover .poster-shot img { transform: translate(-6px, -6px); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding: 48px 0 56px; }
.foot-brand p { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 360px; }

/* ---------- dialogs ---------- */
.dlg { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.dlg::backdrop { background: rgba(10, 18, 24, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--surface); }
.dlg-head h3 { font: 400 22px/1.2 var(--serif); }
.dlg-body { padding: 20px; background: #fff; }
.dlg-body img { width: 100%; height: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .foot .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-app { display: none; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof li:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof li:nth-child(n+3) { border-top: 1px solid var(--night-rule); }
  .c-body { grid-template-columns: 210px minmax(0, 1fr); }
  .c-sources { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); }
  .sources { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ablate { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .mx { grid-template-columns: 1fr; }
  .mx-side { justify-content: flex-start; padding: 64px 28px 40px; }
  .mx-side-in { max-width: 640px; }
  .mx-tabs { margin-top: 36px; }
  .mx-chart { padding: 40px 20px 32px 8px; }
  .engine { grid-template-columns: 1fr; }
  .proof { margin-bottom: 44px; }
  .section { padding: 88px 0; }
  .how-grid, .tour { grid-template-columns: 1fr; gap: 32px; }
  .stage { display: none; }
  .stage-inline { display: block; margin-top: 22px; }
  .stage-inline .scene { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; box-shadow: var(--shadow-sm); }
  .step, .step:last-child { min-height: 0; opacity: 1; padding: 0 0 56px 0; margin-bottom: 0; }
  .step-n { position: static; transform: none; margin: 0 0 14px; }
  .tour-list { border-left: 0; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72vw); overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; }
  .tour-tab { scroll-snap-align: start; border: 1px solid var(--rule); border-radius: 12px; }
  .tt-line { opacity: 1; max-height: none; }
  .tt-progress { left: 12px; right: 12px; top: auto; bottom: -1px; width: auto; height: 2px; }
  .tt-progress i { height: 100%; width: 0; }
  .tour-tab[aria-selected="true"] .tt-progress i { width: 100%; }
  .tour.autoplay .tour-tab[aria-selected="true"] .tt-progress i { animation-name: fillx; }
  .frame-view { aspect-ratio: 4 / 3.4; }
  .figs3 { grid-template-columns: 1fr; }
  .f3, .f3 + .f3 { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .poster { grid-template-columns: 1fr; gap: 0; }
  .poster-copy { padding: 32px 24px 8px; }
  .poster-shot { margin: 24px 0 0 24px; min-height: 260px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-links { justify-self: start; }
}
@keyframes fillx { from { width: 0; } to { width: 100%; } }
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .nav-inner { padding: 12px 16px; gap: 12px; }
  .nav-actions .btn { display: none; }
  .mx-side { padding: 56px 16px 32px; }
  .byo { grid-template-columns: 1fr; padding: 22px 18px; gap: 18px; }
  .powered { flex-wrap: wrap; justify-content: center; row-gap: 4px; border-radius: 18px; }
  .pw-sep { display: none; }
  /* Phones: the graph has no margins to run in, so it sits behind the copy; a paper veil the copy's
     size keeps the headline and subtitle clean and leaves the graph showing at the edges. */
  .hero-fade { display: none; }
  .hero-copy { position: relative; }
  .hero-copy::before { content: ""; position: absolute; inset: -28px -16px -8px; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 58% 56% at 50% 52%, var(--paper) 62%, transparent 100%); }
  .mx-legend { justify-content: flex-start; }
  /* the results table becomes one card per system: no sideways scroll hiding columns */
  .table-wrap { overflow: visible; }
  .rt { min-width: 0; }
  .rt thead { display: none; }
  .rt tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 14px 12px; border-bottom: 1px solid var(--rule); }
  .rt tbody th, .rt td { border: 0; padding: 0; background: none !important; }
  .rt tbody th { grid-column: 1 / -1; margin-bottom: 8px; }
  .rt td { display: contents; }
  .rt td::before { content: attr(data-l); color: var(--muted); font-size: 13.5px; font-weight: 400; font-style: normal; padding: 3px 0; font-variant-numeric: normal; }
  .rm-who { display: grid; grid-template-columns: 30px 1fr; gap: 6px 10px; }
  .rm-state { grid-column: 2; justify-self: start; margin-left: 0; }
  .rt td:nth-child(2) { min-width: 0; }
  .rt .cell-bar { display: none; }
  .rt-yaan { background: color-mix(in srgb, var(--petrol-soft) 55%, transparent); }
  .hero-ctas .btn-ghost { width: auto; }
  .foot .foot-grid { grid-template-columns: 1fr; }
  .byo-ic { width: 52px; height: 52px; }
  .hg-lane { height: 92px; }
  .drop { font-size: 9px; padding: 2px 4px; }
  .hg-src { font-size: 11.5px; gap: 4px; }
  .scene-connect, .scene-remember, .scene-act { padding: 16px; }
  .rm-row { grid-template-columns: 64px 1fr; }
  .rm-axis { margin-left: 64px; }
  .rm-head { left: calc(64px + (100% - 64px) * var(--x, .152)); }
  .rm-axis .r, .rm-axis .e { display: none; }
  .cw-tab { padding: 4px 6px; font-size: 11.5px; }
  .cw-mcp { display: none; }
  .mx-plot { height: 320px; margin-left: 30px; padding: 0; }
  .mx-group { gap: 3px; }
  .mx-bar { width: clamp(16px, 6vw, 28px); }
  .mx-bar svg { display: none; }
  .mx-v { font-size: 10px; }
  .mx-x { font-size: 11.5px; white-space: normal; width: 76px; }
  .mx-cap { margin-top: 64px; }
  .proof li { padding: 20px 12px 20px 0; }
  .proof li + li { padding-left: 12px; }
  .stack, .tail { padding: 18px 14px; }
  .layer-split { grid-template-columns: 1fr; }
  .layers > li { width: 100% !important; }
  .mq-item { padding: 0 26px; height: 72px; gap: 12px; }
  .mq-n { font-size: 21px; }
  .mq-item .glyph { width: 30px; height: 30px; }
  .closing-alt { padding: 18px; }
  .hero { padding: 40px 16px 24px; }
  .hero-ctas .btn { width: 100%; }
  .console { margin-top: 40px; border-radius: 14px; }
  .scope-hide-sm, .meter-hide-sm { display: none; }
  .c-top { padding: 10px 12px; align-items: flex-start; }
  .c-query { margin: 14px 12px 0; padding: 14px 14px 10px 44px; }
  .q-glyph { left: 14px; top: 17px; width: 19px; height: 19px; }
  .q-field { padding-right: 0; min-height: 56px; }
  .q-ask { display: none; }
  .c-suggest { padding: 10px 12px 0; }
  .c-body { grid-template-columns: 1fr; min-height: 0; }
  .c-body > div { padding: 14px; }
  .c-trace { border-right: 0; border-bottom: 1px solid var(--rule); }
  .trace { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .trace::before { display: none; }
  .tr { padding: 0 0 0 28px; }
  .tr-cy, .tr-arg { display: none; }
  .answer { min-height: 150px; font-size: 17.5px; }
  .ent code { display: none; }
  .dtl-axis span:first-child, .dtl-axis .ax-end { display: none; }
  .meter { padding: 10px 14px; }
  .drift { padding: 20px 16px; border-radius: 14px; }
  .duel { grid-template-columns: 1fr; }
  .dtl-win b { display: none; }
  .ablate { padding: 24px 18px; }
  .ab-figs { grid-template-columns: 1fr 1fr; }
  .ab-main { grid-column: 1 / -1; }
  .scene { padding: 18px; }
  .lane { grid-template-columns: 76px 1fr; }
}

/* Reduced motion keeps what changes in place (typing, highlighting, fades, color) and drops what
   travels across the screen. main.js sets .calm on <html>; ?motion=full overrides it. */
.calm { scroll-behavior: auto; }
.calm .powered, .calm .hero-title, .calm .hero-sub, .calm .hero-ctas, .calm .console { animation-name: fadein; }
.calm .pk, .calm .lane-line::after { display: none; }
.calm .pipe-stages li, .calm .dot-warn { animation: none; }
.calm .scene, .calm .tour-img, .calm .poster-shot img, .calm .poster-play { transform: none !important; }
.calm .ent, .calm .tr, .calm .src, .calm .ans-state, .calm .scene-remember.is-active .dec, .calm .delivery.go li { animation-name: fadein; }
.calm .tr.is-run .tr-n::after, .calm .src-chk::before { animation-duration: 2.4s; }

/* Short desktop windows (a 1080p screen at 125% scaling is ~1536×740 CSS px): tighten the hero by the
   window's height so the console's question box and its suggested questions are in view at load. */
@media (min-width: 901px) and (max-height: 920px) {
  .hero { padding-top: clamp(16px, 3vh, 52px); }
  .powered { margin-bottom: clamp(12px, 2vh, 26px); }
  .hero-title { font-size: clamp(44px, min(7vw, 8.6vh), 86px); }
  .hero-sub { max-width: 780px; margin-top: clamp(12px, 2vh, 22px); }
  .hero-ctas { margin-top: clamp(16px, 2.6vh, 30px); }
  .console { margin-top: clamp(18px, 3vh, 44px); }
}