/* page basics (were in the canvas helmet) */
body { margin: 0; background: var(--background); }
a { color: var(--link-primary); }
a:hover { color: var(--link-primary-hover); }
.cta__mail { color: var(--text-on-color); text-decoration: none; }
.cta__mail:hover { color: var(--text-on-color); text-decoration: underline; }

/* Olympusx AI — one-page site. Every colour, size and space comes from the design
   system (ds/olympusx/tokens.css). No screenshots: every product view is recreated
   from the system's components, and every animation is a mechanism of the product.
   Layout concept: your walls drawn as the Sovereign Cross — the gateway at the core,
   the planes around it, each section one plane. */

.site { min-height: 100vh; overflow-x: clip; }
.wrap { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--spacing-05); }
@media (min-width: 66rem) { .wrap { padding-inline: var(--spacing-07); } }
.section { position: relative; padding-block: var(--spacing-10); border-block-start: 1px solid var(--border-subtle-00); scroll-margin-top: var(--header-height); }
@media (min-width: 66rem) { .section { padding-block: var(--spacing-12); } }
.two { display: grid; gap: var(--spacing-09); grid-template-columns: minmax(0, 1fr); align-items: center; margin-block-start: var(--spacing-09); }
@media (min-width: 66rem) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-10); } .two--text-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.prose { display: grid; gap: var(--spacing-05); }
.prose p { margin: 0; font: 400 1rem/1.6 var(--font-sans); color: var(--text-secondary); max-width: 60ch; }
.prose h3 { margin: 0; font: 300 1.75rem/1.25 var(--font-sans); letter-spacing: -0.01em; text-wrap: balance; }
.facts-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); }
.facts-list li { background: var(--background); padding: var(--spacing-04) var(--spacing-05); display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--spacing-05); align-items: baseline; }
.facts-list li span:first-child { font: 400 0.8125rem/1.3 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.facts-list li span:last-child { font: 400 0.875rem/1.5 var(--font-sans); color: var(--text-secondary); }
.skip { position: absolute; inset-inline-start: var(--spacing-05); inset-block-start: -4rem; z-index: 30; background: var(--background); color: var(--text-primary); padding: var(--spacing-03) var(--spacing-05); }
.skip:focus { inset-block-start: var(--spacing-03); outline: 2px solid var(--focus); }
.ox-header { z-index: 20; }
.ox-header nav { flex-wrap: wrap; }
@media (max-width: 70rem) { .ox-header nav { display: none; } }

/* A recreated console surface: the product's own chrome, drawn, never photographed. */
.console { background: var(--background); box-shadow: 0 0 0 1px var(--border-subtle-01); display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: 2.5rem auto; overflow: hidden; }
.console__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-05); padding-inline: var(--spacing-04); border-block-end: 1px solid var(--border-subtle-00); }
.console__top .ox-wordmark { font-size: 0.8125rem; }
.console__top img { width: 1.125rem; height: 1.125rem; }
.console__status { display: flex; align-items: center; gap: var(--spacing-03); font: 400 0.6875rem/1 var(--font-sans); color: var(--text-secondary); }
.console__status svg { width: 0.875rem; height: 0.875rem; fill: var(--support-success); }
.console__rail { border-inline-end: 1px solid var(--border-subtle-00); display: grid; align-content: start; gap: var(--spacing-04); padding-block: var(--spacing-04); justify-items: center; }
.console__rail i { width: 1rem; height: 0.75rem; box-shadow: inset 0 0 0 1px var(--text-helper); display: block; }
.console__rail i.on { box-shadow: inset 0 0 0 1px var(--interactive); background: var(--highlight); }
.console__body { padding: var(--spacing-06); display: grid; gap: var(--spacing-05); min-width: 0; }
.console__title { margin: 0; font: 300 1.75rem/1.1 var(--font-sans); letter-spacing: -0.01em; }
.console__sub { margin: 0; font: 400 0.8125rem/1.4 var(--font-sans); color: var(--text-secondary); }
.c-table { width: 100%; border-collapse: collapse; font: 400 0.8125rem/1.25 var(--font-sans); }
.c-table th { background: var(--layer-accent-01); text-align: start; font-weight: 600; padding: var(--spacing-04) var(--spacing-04); white-space: nowrap; }
.c-table td { background: var(--layer-01); padding: var(--spacing-04); border-block-end: 1px solid var(--border-subtle-01); color: var(--text-secondary); white-space: nowrap; }
.c-table td b { display: block; font-weight: 600; color: var(--text-primary); }
.c-table td small { font: 400 0.6875rem/1.3 var(--font-mono); color: var(--text-helper); }
.c-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.c-pill { display: inline-flex; align-items: center; height: 1.25rem; padding-inline: var(--spacing-03); font: 400 0.6875rem/1 var(--font-sans); border-radius: 0.625rem; }
.c-pill--teal { background: var(--tag-teal-bg); color: var(--tag-teal-text); }
.c-pill--blue { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
.c-pill--purple { background: var(--tag-purple-bg); color: var(--tag-purple-text); }
.c-state { display: inline-flex; align-items: center; gap: var(--spacing-03); color: var(--text-primary); }
.c-state svg { width: 0.875rem; height: 0.875rem; fill: var(--support-success); }
.c-state .ring { width: 0.875rem; height: 0.875rem; border-radius: var(--radius-round); box-shadow: inset 0 0 0 1.5px var(--text-helper); border-block-start: 0; }
.c-state .spin { width: 0.875rem; height: 0.875rem; border-radius: var(--radius-round); box-shadow: inset 0 0 0 2px var(--layer-accent-01); position: relative; }
.c-state .spin::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-round); border: 2px solid transparent; border-block-start-color: var(--interactive); }
@media (prefers-reduced-motion: no-preference) { .c-state .spin::after { animation: spin 0.9s linear infinite; } }
.row-new td { background: var(--highlight); transition: background-color 1.2s ease; }

/* ---------- Intro (named so because the design system compiles a hero text style): the Sovereign Cross assembling, as on the console's sign-in ---------- */
.intro { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--spacing-11) var(--spacing-10); background-image: radial-gradient(120% 60% at 70% 100%, var(--ai-aura-start), var(--ai-aura-end) 70%); }
@media (min-width: 66rem) { .intro { padding-block: var(--spacing-12) var(--spacing-11); } }
.intro__mark { position: absolute; z-index: -1; inset-block-start: -10rem; inset-inline-end: -14rem; width: 52rem; height: 52rem; opacity: 0.22; pointer-events: none; }
.intro__grid { display: grid; gap: var(--spacing-10); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 66rem) { .intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.intro h1 { margin: var(--spacing-05) 0 0; font: 300 clamp(3rem, 6.4vw, 5.5rem)/0.98 var(--font-sans); letter-spacing: -0.035em; text-wrap: balance; }
.intro h1 span { color: var(--brand-accent); }
.intro__lede { margin: var(--spacing-07) 0 0; font: 300 clamp(1.0625rem, 1.45vw, 1.25rem)/1.55 var(--font-sans); color: var(--text-secondary); max-width: 34rem; }
.intro__cta { display: flex; flex-wrap: wrap; gap: var(--spacing-05); margin-block-start: var(--spacing-08); }
.intro .console { box-shadow: 0 0 0 1px var(--ai-border-start); }

/* the mark's own choreography: arms draw, rings fade in then turn, core pops then pulses, dots stagger */
.mk-p { fill: var(--brand-primary); stroke: var(--brand-primary); }
.mk-a { fill: var(--brand-accent); stroke: var(--brand-accent); }
.mk-ring { fill: none; }
.mk-ring-o { stroke-width: 1.5; stroke-dasharray: 9 11; }
.mk-ring-i { stroke-width: 2; stroke-dasharray: 14 7; }
.mk-mem { stroke-width: 6; stroke-linecap: round; }
.mk-spk { stroke-width: 2; stroke-linecap: round; }
.mk-rot, .mk-pulse, .mk-dot { transform-box: view-box; transform-origin: 100px 100px; }
.mk-dot { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .mk-draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 1.1s var(--ease-expressive) forwards; animation-delay: calc(0.25s + var(--i, 0) * 0.12s); }
  .mk-spk.mk-draw { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .mk-rot { opacity: 0; animation: fade-in 1s ease forwards, spin var(--spd, 80s) linear infinite; animation-delay: 0.9s, 0.9s; }
  .mk-rot--rev { animation-direction: normal, reverse; }
  .mk-core { transform-box: fill-box; transform-origin: center; animation: pop 0.7s var(--ease-expressive) both; animation-delay: 1s; }
  .mk-pulse { animation: core-pulse 3.2s ease-in-out infinite; animation-delay: 1.6s; opacity: 0; }
  .mk-dot { animation: pop 0.5s var(--ease-expressive) both; animation-delay: calc(1.2s + var(--i, 0) * 0.06s); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes core-pulse { 0% { opacity: 0.5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }

/* ---------- Count-up stats and the posture bar ---------- */
.stats { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); margin-block-start: var(--spacing-11); }
.stat { background: var(--background); padding: var(--spacing-06); display: grid; gap: var(--spacing-02); }
.stat__n { font: 300 clamp(2.5rem, 4.4vw, 3.5rem)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__n small { font: 400 1rem/1 var(--font-mono); letter-spacing: 0; margin-inline-start: var(--spacing-02); color: var(--text-helper); }
.stat__l { font: 400 0.75rem/1.33333 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); }
.stat__q { font: 400 0.8125rem/1.4 var(--font-sans); color: var(--text-secondary); }
.posture { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); margin-block-start: var(--spacing-07); }
.posture > div { background: var(--background); padding: var(--spacing-05) var(--spacing-06); display: grid; gap: var(--spacing-03); align-content: start; }
.posture b { font: 600 0.875rem/1.3 var(--font-sans); }
.posture span { font: 400 0.8125rem/1.45 var(--font-sans); color: var(--text-secondary); }
.posture__note { margin: var(--spacing-05) 0 0; font: 400 0.8125rem/1.5 var(--font-mono); color: var(--text-helper); }

/* ---------- Problem ---------- */
.problem { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); margin-block-start: var(--spacing-09); }
.problem > div { background: var(--background); padding: var(--spacing-07) var(--spacing-06); display: grid; gap: var(--spacing-04); align-content: start; }
.problem .n { font: 300 3.5rem/1 var(--font-sans); color: var(--text-helper); letter-spacing: -0.03em; }
.problem h3 { margin: 0; font: 400 1.25rem/1.35 var(--font-sans); }
.problem p { margin: 0; font: 400 0.9375rem/1.5 var(--font-sans); color: var(--text-secondary); }

/* ---------- Platform map ---------- */
.map { position: relative; width: min(100%, 34rem); aspect-ratio: 1 / 1; margin-inline: auto; }
.map svg { position: absolute; inset: 10%; width: 80%; height: 80%; overflow: visible; }
.ring-wall { fill: none; stroke: var(--border-strong-01); stroke-width: 0.5; stroke-dasharray: 1.5 2.5; transform-box: view-box; transform-origin: 100px 100px; }
.packet { fill: var(--brand-accent); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .ring-wall { animation: spin 200s linear infinite; }
  .packet { animation: inbound 2.6s var(--ease-productive) infinite; animation-delay: var(--d, 0s); }
}
@keyframes inbound { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.map__label { position: absolute; display: grid; gap: 2px; padding: var(--spacing-02) var(--spacing-03); background: var(--background); box-shadow: inset 0 0 0 1px var(--border-subtle-01); text-decoration: none; color: var(--text-primary); font: 400 0.875rem/1.2 var(--font-sans); white-space: nowrap; transition: box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.map__label small { font: 400 0.6875rem/1.2 var(--font-mono); color: var(--text-helper); }
.map__label:hover { background: var(--layer-hover-01); box-shadow: inset 0 0 0 1px var(--border-strong-01); color: var(--text-primary); }
.map__label--nw { inset-block-start: 7%; inset-inline-start: 0; }
.map__label--ne { inset-block-start: 7%; inset-inline-end: 0; text-align: end; }
.map__label--sw { inset-block-end: 7%; inset-inline-start: 0; }
.map__label--se { inset-block-end: 7%; inset-inline-end: 0; text-align: end; }
.map__core { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, 2.1rem); font: 400 0.6875rem/1 var(--font-mono); color: var(--text-primary); background: var(--background); padding: 2px 6px; white-space: nowrap; }
.map__wall { position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); background: var(--background); padding: 2px 8px; }
.pillars { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); }
.pillar { background: var(--background); padding: var(--spacing-05) var(--spacing-06); display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: var(--spacing-05); align-items: center; text-decoration: none; color: var(--text-primary); transition: background-color var(--dur-fast) ease; }
.pillar:hover { background: var(--layer-hover-01); color: var(--text-primary); }
.pillar svg { width: 1.25rem; height: 1.25rem; fill: var(--brand-accent); }
.pillar h3 { margin: 0; font: 400 1.0625rem/1.3 var(--font-sans); }
.pillar p { margin: 2px 0 0; font: 400 0.8125rem/1.42857 var(--font-sans); color: var(--text-secondary); }
.pillar > span:last-child svg { width: 1rem; height: 1rem; fill: var(--text-helper); }

/* ---------- The request path: one request passes, one is refused ---------- */
.path { position: relative; margin-block-start: var(--spacing-10); display: grid; gap: var(--spacing-06); }
.lane { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-03); align-items: center; }
.lane__rail { position: absolute; inset-inline: 2.5rem; inset-block-start: 1.75rem; height: 1px; background: var(--border-subtle-01); }
.hop { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--spacing-03); text-align: center; }
.hop__box { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; background: var(--layer-01); box-shadow: inset 0 0 0 1px var(--border-subtle-01); font: 400 0.6875rem/1 var(--font-mono); color: var(--text-helper); }
.hop__box svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.hop--gpu .hop__box { background: var(--background-brand); color: var(--text-on-color); box-shadow: none; }
.hop__t { font: 400 0.8125rem/1.3 var(--font-sans); color: var(--text-primary); }
.hop__s { font: 400 0.6875rem/1.3 var(--font-mono); color: var(--text-helper); }
.req { position: absolute; z-index: 2; inset-block-start: calc(1.75rem - 6px); inset-inline-start: 2.5rem; width: 12px; height: 12px; border-radius: var(--radius-round); background: var(--brand-accent); box-shadow: 0 0 0 5px var(--ai-aura-start), 0 0 18px var(--brand-accent); opacity: 0; }
.req--bad { background: var(--support-error); box-shadow: 0 0 0 5px var(--ai-aura-start), 0 0 18px var(--support-error); }
.refusal { position: absolute; z-index: 2; inset-block-start: 4.25rem; inset-inline-start: calc(50% - 5.5rem); padding: var(--spacing-02) var(--spacing-04); background: var(--layer-01); box-shadow: inset 0 0 0 1px var(--support-error); font: 400 0.6875rem/1.3 var(--font-mono); color: var(--text-error); white-space: nowrap; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .req--ok { animation: pass 8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .req--bad { animation: refuse 8s cubic-bezier(0.45, 0, 0.55, 1) infinite; animation-delay: 4s; }
  .refusal { animation: refusal 8s ease infinite; animation-delay: 4s; }
  .hop__box { animation: hop-lit 8s linear infinite; animation-delay: calc(var(--i) * 0.68s); }
}
@keyframes pass { 0% { inset-inline-start: 2.5rem; opacity: 0; } 4% { opacity: 1; } 50% { inset-inline-start: calc(100% - 3.25rem); opacity: 1; } 54%, 100% { inset-inline-start: calc(100% - 3.25rem); opacity: 0; } }
@keyframes refuse { 0% { inset-inline-start: 2.5rem; opacity: 0; } 4% { opacity: 1; } 28% { inset-inline-start: calc(50% - 6px); opacity: 1; } 34% { inset-inline-start: calc(50% - 6px); opacity: 1; transform: scale(1.6); } 42%, 100% { inset-inline-start: calc(50% - 6px); opacity: 0; transform: scale(0.4); } }
@keyframes refusal { 0%, 28% { opacity: 0; transform: translateY(4px); } 32%, 46% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; } }
@keyframes hop-lit { 0%, 2% { box-shadow: inset 0 0 0 1px var(--border-subtle-01); color: var(--text-helper); } 4%, 10% { box-shadow: inset 0 0 0 2px var(--brand-accent), 0 0 22px var(--ai-border-start); color: var(--text-primary); } 22%, 100% { box-shadow: inset 0 0 0 1px var(--border-subtle-01); color: var(--text-helper); } }
.hop--gpu .hop__box { animation: none; }
@media (max-width: 66rem) {
  .lane { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--spacing-07); }
  .lane__rail, .req, .refusal { display: none; }
}
.ledger { display: flex; flex-wrap: wrap; gap: var(--spacing-03); align-items: center; font: 400 0.75rem/1.3 var(--font-mono); color: var(--text-secondary); padding: var(--spacing-04) var(--spacing-05); background: var(--layer-01); }
.ledger svg { width: 0.875rem; height: 0.875rem; fill: var(--text-helper); }
.proofs { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin-block-start: var(--spacing-08); }
.proofs > div { background: var(--background); padding: var(--spacing-06); display: grid; gap: var(--spacing-03); align-content: start; }
.proofs b { font: 400 1.0625rem/1.35 var(--font-sans); font-weight: 400; }
.proofs span { font: 400 0.875rem/1.5 var(--font-sans); color: var(--text-secondary); }

/* ---------- Models: a recreated pre-flight panel ---------- */
.seg { display: inline-flex; box-shadow: inset 0 0 0 1px var(--border-strong-01); }
.seg span { padding: var(--spacing-03) var(--spacing-05); font: 400 0.8125rem/1 var(--font-sans); color: var(--text-secondary); }
.seg span.on { background: var(--layer-selected-01); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--interactive); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--spacing-05); }
.kv div { display: grid; gap: var(--spacing-02); }
.kv span { font: 400 0.6875rem/1.2 var(--font-sans); color: var(--text-helper); letter-spacing: 0.32px; }
.kv b { font: 400 0.875rem/1.3 var(--font-sans); font-weight: 400; border-block-end: 1px solid var(--border-strong-01); padding-block: var(--spacing-03); background: var(--field-01); padding-inline: var(--spacing-04); }
.vram { display: grid; gap: var(--spacing-04); }
.vram__head { display: flex; justify-content: space-between; gap: var(--spacing-05); flex-wrap: wrap; align-items: baseline; }
.vram__head b { font: 300 1.75rem/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vram__head span { font: 400 0.75rem/1.3 var(--font-mono); color: var(--text-helper); }
.vram__track { position: relative; height: 2.25rem; background: var(--layer-02); display: flex; overflow: hidden; }
.vram__seg { height: 100%; transform-origin: left center; }
.vram__seg--w { width: 21.2%; background: var(--charts-1); }
.vram__seg--kv { width: 50%; background: var(--charts-2); }
.vram__seg--o { width: 14.2%; background: var(--charts-3); }
.vram__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-05); font: 400 0.75rem/1.3 var(--font-mono); color: var(--text-secondary); }
.vram__legend i { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; vertical-align: -1px; }
@media (prefers-reduced-motion: no-preference) {
  .vram__seg { animation: fill-in 7s var(--ease-expressive) infinite; }
  .vram__seg--kv { animation-delay: 0.35s; }
  .vram__seg--o { animation-delay: 0.7s; }
}
@keyframes fill-in { 0% { transform: scaleX(0); } 18%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.fits { display: inline-flex; align-items: center; gap: var(--spacing-03); font: 400 0.8125rem/1.3 var(--font-sans); }
.fits svg { width: 1rem; height: 1rem; fill: var(--support-success); }
.typing { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 37ch; }
.caret { display: inline-block; width: 0.55ch; height: 1.1em; vertical-align: -0.15em; background: var(--brand-accent); }
@media (prefers-reduced-motion: no-preference) {
  .typing { animation: type 8s steps(37) infinite; }
  .caret { animation: blink 1s steps(1) infinite; }
}
@keyframes type { 0%, 8% { width: 0; } 40%, 92% { width: 37ch; } 100% { width: 0; } }
@keyframes blink { 50% { opacity: 0; } }
.sources { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); margin-block-start: var(--spacing-09); }
.sources > div { background: var(--background); padding: var(--spacing-05) var(--spacing-06); display: grid; gap: var(--spacing-02); }
.sources b { font: 400 1.0625rem/1.3 var(--font-sans); font-weight: 400; }
.sources span { font: 400 0.75rem/1.4 var(--font-mono); color: var(--text-helper); }
.sources .inside b::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--brand-accent); margin-inline-end: var(--spacing-03); vertical-align: 3px; }
.sources .outside b::before { content: ""; display: inline-block; width: 6px; height: 6px; box-shadow: inset 0 0 0 1px var(--border-strong-01); margin-inline-end: var(--spacing-03); vertical-align: 3px; }
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--border-subtle-00); margin-block-start: var(--spacing-07); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; }
.marquee__track span { padding: var(--spacing-05) var(--spacing-07); font: 300 1.375rem/1 var(--font-sans); color: var(--text-primary); white-space: nowrap; }
.marquee__track span small { font: 400 0.6875rem/1 var(--font-mono); color: var(--text-helper); margin-inline-start: var(--spacing-03); vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .marquee__track { animation: slide 50s linear infinite; } }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- GPUs: recreated partitioning and capacity ---------- */
.gpu-node { display: grid; gap: var(--spacing-04); }
.gpu-node__head { display: flex; justify-content: space-between; gap: var(--spacing-05); flex-wrap: wrap; align-items: baseline; font: 400 0.8125rem/1.3 var(--font-mono); color: var(--text-secondary); }
.gpu-node__head b { font: 400 1rem/1.3 var(--font-sans); color: var(--text-primary); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-03); }
.card80 { position: relative; height: 4.5rem; display: flex; gap: 0; background: var(--layer-02); }
.card80 i { flex: 1 1 0; background: linear-gradient(180deg, var(--brand-primary), var(--button-primary-active)); }
.card80 span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 0.6875rem/1 var(--font-mono); color: var(--text-on-color); pointer-events: none; }
.card80 span + span { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .card80 { animation: carve 10s var(--ease-expressive) infinite; animation-delay: calc(var(--i) * 0.25s); }
  .card80 span:first-child { animation: label-out 10s var(--ease-expressive) infinite; animation-delay: calc(var(--i) * 0.25s); }
  .card80 span + span { animation: label-in 10s var(--ease-expressive) infinite; animation-delay: calc(var(--i) * 0.25s); }
}
@media (prefers-reduced-motion: reduce) { .card80 { gap: 3px; } .card80 span:first-child { opacity: 0; } .card80 span + span { opacity: 1; } }
@keyframes carve { 0%, 24% { gap: 0; } 38%, 80% { gap: 3px; } 94%, 100% { gap: 0; } }
@keyframes label-out { 0%, 24% { opacity: 1; } 32%, 86% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes label-in { 0%, 30% { opacity: 0; } 40%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
.gpu-node__foot { display: flex; justify-content: space-between; gap: var(--spacing-05); flex-wrap: wrap; font: 400 0.75rem/1.3 var(--font-mono); color: var(--text-helper); }
.notice { display: flex; gap: var(--spacing-04); align-items: flex-start; padding: var(--spacing-04) var(--spacing-05); box-shadow: inset 0 0 0 1px var(--support-warning); font: 400 0.8125rem/1.45 var(--font-sans); color: var(--text-secondary); }
.notice svg { width: 1rem; height: 1rem; fill: var(--support-warning); flex: none; margin-block-start: 0.125rem; }
.notice b { color: var(--text-primary); font-weight: 600; }
.env { display: grid; gap: var(--spacing-05); }
.env__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--spacing-05); align-items: center; }
.env__row span { font: 400 0.8125rem/1.3 var(--font-sans); color: var(--text-secondary); }
.env__bar { height: 1.25rem; background: var(--layer-02); position: relative; overflow: hidden; }
.env__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: var(--interactive); transform-origin: left center; }
.env__row:nth-child(2) .env__bar i { background: var(--accent-data); }
.env__row:nth-child(3) .env__bar i { background: var(--charts-1); }
@media (prefers-reduced-motion: no-preference) { .env__bar i { animation: fill-in 9s var(--ease-expressive) infinite; animation-delay: calc(var(--i) * 0.4s); } }
@media (max-width: 42rem) { .env__row { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-02); } }
.meter { font-variant-numeric: tabular-nums; }

/* ---------- Agents ---------- */
.run { display: grid; gap: 0; }
.run .ox-aura { display: grid; gap: var(--spacing-05); }
.run__ask { margin: 0; font: 300 1.25rem/1.45 var(--font-sans); }
.run__who { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-05); flex-wrap: wrap; }
.run__answer { margin: 0; font: 400 0.9375rem/1.5 var(--font-sans); color: var(--text-secondary); }
.run .ox-steps { padding-inline: var(--spacing-05); border-block-start: 1px solid var(--border-subtle-01); }
.run .ox-step { grid-template-columns: 4.75rem minmax(0, 1fr) auto; }
.run__foot { display: flex; justify-content: space-between; gap: var(--spacing-05); padding: var(--spacing-04) var(--spacing-05); background: var(--layer-01); border-block-start: 1px solid var(--border-subtle-01); font: 400 0.75rem/1.33333 var(--font-mono); color: var(--text-helper); flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) { .run .ox-step { animation: step-in 9s var(--ease-entrance) infinite; animation-delay: calc(var(--i) * 0.9s); } }
@keyframes step-in { 0% { opacity: 0; transform: translateY(8px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.verbs { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; }
@media (max-width: 42rem) { .verbs { grid-template-columns: minmax(0, 1fr); } }
.verb { background: var(--background); padding: var(--spacing-06); display: grid; gap: var(--spacing-04); align-content: start; }
.verb h3 { margin: 0; font: 400 1.0625rem/1.3 var(--font-sans); }
.verb p { margin: 0; font: 400 0.8125rem/1.45 var(--font-sans); color: var(--text-secondary); }
.verb b { font: 300 1.75rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.verb b small { font: 400 0.6875rem/1 var(--font-mono); color: var(--text-helper); margin-inline-start: 4px; }

/* ---------- Knowledge ---------- */
.stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); }
.stage-n { background: var(--background); padding: var(--spacing-05); display: grid; gap: var(--spacing-03); position: relative; overflow: hidden; }
.stage-n::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: var(--accent-data); transform-origin: left center; transform: scaleX(1); }
.stage-n span { font: 400 0.6875rem/1 var(--font-mono); color: var(--text-helper); }
.stage-n b { font: 400 1rem/1.3 var(--font-sans); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) { .stage-n::after { transform: scaleX(0); animation: stage 6s linear infinite; animation-delay: calc(var(--i) * 0.6s); } }
@keyframes stage { 0% { transform: scaleX(0); } 10%, 70% { transform: scaleX(1); } 80%, 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 42rem) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Governance ---------- */
.walls { position: relative; aspect-ratio: 1 / 1; width: min(100%, 28rem); margin-inline: auto; }
.wall { position: absolute; box-shadow: inset 0 0 0 1px var(--border-strong-01); display: flex; align-items: flex-start; padding: var(--spacing-03); font: 400 0.6875rem/1.2 var(--font-mono); color: var(--text-secondary); letter-spacing: 0.02em; }
.wall--1 { inset: 0; }
.wall--2 { inset: 12%; box-shadow: inset 0 0 0 1px var(--interactive); }
.wall--3 { inset: 24%; box-shadow: inset 0 0 0 1px var(--accent-data); }
.wall--4 { inset: 36%; background: var(--background-brand); box-shadow: none; color: var(--text-on-color); align-items: center; justify-content: center; text-align: center; font-size: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .wall { animation: wall-breathe 6s var(--ease-expressive) infinite; animation-delay: calc(var(--i) * 0.35s); }
}
@keyframes wall-breathe { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.015); } }
.chain { display: flex; gap: 0; overflow-x: auto; padding-block: var(--spacing-03); }
.block { flex: 0 0 auto; min-width: 9rem; background: var(--layer-01); padding: var(--spacing-04); display: grid; gap: var(--spacing-02); box-shadow: inset 0 0 0 1px var(--border-subtle-01); font: 400 0.6875rem/1.35 var(--font-mono); color: var(--text-helper); }
.block b { font: 400 0.8125rem/1.2 var(--font-sans); color: var(--text-primary); }
.block em { font-style: normal; color: var(--accent-data); }
.link { flex: 0 0 1.75rem; align-self: center; height: 2px; background: var(--border-strong-01); position: relative; overflow: hidden; }
.link::after { content: ""; position: absolute; inset: 0; background: var(--accent-data); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) { .link::after { animation: link-run 3.2s linear infinite; animation-delay: calc(var(--i) * 0.4s); } }
@keyframes link-run { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }
/* Phones: the chain stacks, so all three entries show without a hidden sideways scroll. */
@media (max-width: 42rem) {
  .chain { flex-direction: column; overflow: visible; }
  .link { flex: 0 0 1.5rem; width: 2px; height: auto; align-self: flex-start; margin-inline-start: var(--spacing-06); }
  .link::after { transform: translateY(-100%); animation-name: link-run-y; }
}
@keyframes link-run-y { 0% { transform: translateY(-100%); } 40%, 100% { transform: translateY(100%); } }
.intact { display: inline-flex; align-items: center; gap: var(--spacing-03); padding: var(--spacing-03) var(--spacing-05); background: var(--tag-green-bg); color: var(--tag-green-text); font: 400 0.8125rem/1.3 var(--font-sans); }
.intact svg { width: 1rem; height: 1rem; fill: currentColor; }
.toggle { display: inline-flex; align-items: center; gap: var(--spacing-03); font: 400 0.8125rem/1 var(--font-sans); }
.toggle i { position: relative; width: 2rem; height: 1rem; border-radius: 0.5rem; background: var(--support-success); }
.toggle i::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--text-on-color); }
.modes { display: grid; gap: var(--spacing-03); }
.mode { display: flex; align-items: center; gap: var(--spacing-04); font: 400 0.8125rem/1.3 var(--font-sans); color: var(--text-secondary); }
.mode i { width: 1rem; height: 1rem; border-radius: var(--radius-round); box-shadow: inset 0 0 0 1px var(--text-primary); position: relative; flex: none; }
.mode i::after { content: ""; position: absolute; inset: 4px; border-radius: var(--radius-round); background: var(--text-primary); opacity: 0; }
.mode--a i::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mode--a i::after { animation: radio-a 8s steps(1) infinite; }
  .mode--b i::after { animation: radio-b 8s steps(1) infinite; }
}
@keyframes radio-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes radio-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.gov { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin-block-start: var(--spacing-09); }
.gov > div { background: var(--background); padding: var(--spacing-06); display: grid; gap: var(--spacing-04); align-content: start; }
.gov h3 { margin: 0; font: 400 1.1875rem/1.35 var(--font-sans); }
.gov p { margin: 0; font: 400 0.875rem/1.5 var(--font-sans); color: var(--text-secondary); }

/* ---------- How it works: the first-run wizard ---------- */
.wizard { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-03); margin-block-start: var(--spacing-09); }
.wz { display: grid; gap: var(--spacing-03); }
.wz i { height: 3px; background: var(--layer-accent-01); position: relative; overflow: hidden; }
.wz i::after { content: ""; position: absolute; inset: 0; background: var(--interactive); transform-origin: left center; }
.wz span { font: 400 0.6875rem/1.3 var(--font-mono); color: var(--text-helper); }
.wz b { font: 400 0.8125rem/1.3 var(--font-sans); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) { .wz i::after { transform: scaleX(0); animation: wz 10s var(--ease-productive) infinite; animation-delay: calc(var(--i) * 1.1s); } }
@keyframes wz { 0% { transform: scaleX(0); } 8%, 84% { transform: scaleX(1); } 92%, 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 66rem) { .wizard { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--spacing-05); } }
.steps4 { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); margin-block-start: var(--spacing-08); }
.steps4 > div { background: var(--background); padding: var(--spacing-06); display: grid; gap: var(--spacing-03); align-content: start; }
.steps4 .k { font: 400 0.75rem/1 var(--font-mono); color: var(--accent-data); letter-spacing: 0.08em; text-transform: uppercase; }
.steps4 h3 { margin: 0; font: 400 1.25rem/1.35 var(--font-sans); }
.steps4 p { margin: 0; font: 400 0.875rem/1.5 var(--font-sans); color: var(--text-secondary); }
.helper { margin: var(--spacing-05) 0 0; font: 400 0.8125rem/1.5 var(--font-mono); color: var(--text-helper); max-width: 72ch; }

/* ---------- Pricing: a recreated statement ---------- */
.stmt { background: var(--layer-01); box-shadow: inset 0 0 0 1px var(--border-subtle-01); padding: var(--spacing-06); display: grid; gap: var(--spacing-05); }
.stmt__head { display: flex; justify-content: space-between; gap: var(--spacing-05); flex-wrap: wrap; align-items: baseline; }
.stmt__head b { font: 400 1.25rem/1.3 var(--font-sans); font-weight: 400; }
.stmt__head span { font: 400 0.75rem/1.3 var(--font-mono); color: var(--text-helper); }
.stmt table { width: 100%; border-collapse: collapse; font: 400 0.8125rem/1.3 var(--font-sans); }
.stmt th { text-align: start; font-weight: 600; padding: var(--spacing-03) 0; border-block-end: 1px solid var(--border-strong-01); }
.stmt td { padding: var(--spacing-04) 0; border-block-end: 1px solid var(--border-subtle-01); color: var(--text-secondary); vertical-align: top; }
.stmt td:first-child { color: var(--text-primary); }
.stmt .num { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stmt__foot { display: flex; justify-content: space-between; gap: var(--spacing-05); flex-wrap: wrap; font: 400 0.75rem/1.3 var(--font-mono); color: var(--text-helper); }
.price { display: grid; gap: 1px; background: var(--border-subtle-00); border: 1px solid var(--border-subtle-00); }
.price > div { background: var(--background); padding: var(--spacing-05) var(--spacing-06); display: grid; gap: var(--spacing-02); }
.price b { font: 400 1.0625rem/1.3 var(--font-sans); font-weight: 400; }
.price span { font: 400 0.875rem/1.5 var(--font-sans); color: var(--text-secondary); }

/* ---------- Limits ---------- */

/* ---------- Final call: the deck's cover device ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--background-brand); color: var(--text-on-color); }
.cta::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2rem; background: var(--button-primary-active); }
.cta__mark { position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-end: -20rem; width: 40rem; height: 40rem; transform: translateY(-50%); opacity: 0.14; }
.cta__mark .mk-p, .cta__mark .mk-a { fill: var(--text-on-color); stroke: var(--text-on-color); }
.cta__mark .mk-ring { fill: none; }
.cta .wrap { padding-block: var(--spacing-11); padding-inline-start: calc(2rem + var(--spacing-07)); display: grid; gap: var(--spacing-07); }
@media (min-width: 66rem) { .cta .wrap { padding-block: var(--spacing-12); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.cta h2 { margin: 0; font: 300 clamp(2.5rem, 5.4vw, 4.5rem)/1.02 var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.cta__actions { display: grid; gap: var(--spacing-05); justify-items: start; }
.cta__actions p { margin: 0; font: 400 1rem/1.5 var(--font-sans); max-width: 30rem; }
.cta .ox-btn--inverse { background: var(--text-on-color); color: var(--button-primary-active); }
.cta .ox-btn--inverse:hover { background: var(--highlight); color: var(--text-primary); }
.cta .ox-btn--line { background: transparent; color: var(--text-on-color); box-shadow: inset 0 0 0 1px var(--text-on-color); }
.cta .ox-btn--line:hover { background: var(--button-primary-hover); }
.cta__mail { font: 400 0.875rem/1.5 var(--font-mono); user-select: all; }
.ox-footer__note { font: 400 0.8125rem/1.5 var(--font-sans); color: var(--text-secondary); max-width: 60ch; margin: 0; }

/* ---------- Count-up in CSS: no script, no re-render ---------- */
@property --c { syntax: "<integer>"; inherits: false; initial-value: 0; }
.count { --c: var(--to); counter-reset: c var(--c); }
.count::after { content: counter(c); }
.count--dec::after { content: "0." counter(c, decimal-leading-zero); }
@media (prefers-reduced-motion: no-preference) { .count { animation: count 1.8s var(--ease-expressive) 0.6s both; } }
@keyframes count { from { --c: 0; } to { --c: var(--to); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Intro flow: Hugging Face → deploy → assistant, one 15 s loop ---------- */
.console--flow { box-shadow: 0 0 0 1px var(--ai-border-start); }
.stepper { display: flex; gap: var(--spacing-02); margin: 0; padding: 0; list-style: none; }
.st { display: flex; align-items: center; gap: var(--spacing-03); padding: var(--spacing-02) var(--spacing-04); font: 400 0.75rem/1 var(--font-sans); color: var(--text-helper); box-shadow: inset 0 -2px 0 transparent; }
.st span { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: var(--radius-round); box-shadow: inset 0 0 0 1px currentColor; font: 400 0.625rem/1 var(--font-mono); }
.flow { position: relative; height: 23.5rem; padding: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; padding: var(--spacing-06); display: grid; align-content: start; gap: var(--spacing-05); opacity: 0; }
.scene--1 { opacity: 1; }
.hf { display: flex; align-items: center; gap: var(--spacing-05); }
.hf span, .dep__head span, .chat__head span { display: grid; gap: 2px; }
.hf b { font: 300 1.75rem/1.1 var(--font-sans); letter-spacing: -0.01em; }
.hf small, .dep__head small, .chat__head small { font: 400 0.75rem/1.3 var(--font-mono); color: var(--text-helper); }
.deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-03); }
.mcard { display: flex; align-items: center; gap: var(--spacing-04); padding: var(--spacing-04) var(--spacing-05); background: var(--layer-01); box-shadow: inset 0 0 0 1px var(--border-subtle-01); min-width: 0; }
.mcard img { flex: none; }
.mcard span { display: grid; gap: 2px; min-width: 0; }
.mcard b { font: 400 1rem/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard small { font: 400 0.625rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); white-space: nowrap; }
.added { display: inline-flex; align-items: center; gap: var(--spacing-03); justify-self: start; padding: var(--spacing-03) var(--spacing-05); background: var(--tag-green-bg); color: var(--tag-green-text); font: 400 0.8125rem/1.3 var(--font-sans); opacity: 0; }
.added svg, .dstep svg { width: 1rem; height: 1rem; fill: currentColor; flex: none; }
.dep__head { display: flex; align-items: center; gap: var(--spacing-05); }
.dep__head b { font: 300 1.75rem/1.1 var(--font-sans); letter-spacing: -0.01em; }
.dep__head .ox-tag { margin-inline-start: auto; }
.dsteps { display: grid; gap: 1px; background: var(--border-subtle-01); box-shadow: 0 0 0 1px var(--border-subtle-01); }
.dstep { display: flex; align-items: center; gap: var(--spacing-05); padding: var(--spacing-04) var(--spacing-05); background: var(--layer-01); color: var(--text-helper); }
.dstep span { display: grid; gap: 2px; }
.dstep b { font: 400 0.9375rem/1.2 var(--font-sans); color: var(--text-primary); }
.dstep small { font: 400 0.75rem/1.3 var(--font-sans); color: var(--text-secondary); }
.dep__bar { height: 3px; background: var(--layer-accent-01); overflow: hidden; }
.dep__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); transform-origin: left center; }
.chat__head { display: flex; align-items: center; gap: var(--spacing-04); padding-block-end: var(--spacing-04); border-block-end: 1px solid var(--border-subtle-01); }
.chat__head b { font: 600 0.9375rem/1.2 var(--font-sans); }
.chat__model { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--spacing-03); padding: var(--spacing-02) var(--spacing-04); box-shadow: inset 0 0 0 1px var(--border-subtle-01); border-radius: 0.875rem; font: 400 0.75rem/1 var(--font-mono); }
.bubble { margin: 0; font: 400 0.9375rem/1.5 var(--font-sans); max-width: 88%; padding: var(--spacing-04) var(--spacing-05); }
.bubble--me { justify-self: end; background: var(--button-primary); color: var(--text-on-color); }
.bubble--ai { justify-self: start; background: var(--layer-01); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-subtle-01); }
.bubble sup { font: 400 0.625rem/1 var(--font-mono); padding: 1px 4px; background: var(--highlight); color: var(--text-primary); vertical-align: 2px; }
.srcs { display: flex; flex-wrap: wrap; gap: var(--spacing-03); }
.srcs span { display: inline-flex; align-items: baseline; gap: var(--spacing-03); padding: var(--spacing-03) var(--spacing-04); background: var(--layer-01); box-shadow: inset 0 0 0 1px var(--border-subtle-01); font: 400 0.8125rem/1.3 var(--font-sans); }
.srcs b { font: 400 0.6875rem/1 var(--font-mono); color: var(--link-primary); }
.srcs small { font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-helper); }
@media (max-width: 42rem) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow { height: 32rem; } .stepper .st { font-size: 0; gap: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .scene--1 { animation: sc1 15s linear infinite; }
  .scene--2 { animation: sc2 15s linear infinite; }
  .scene--3 { animation: sc3 15s linear infinite; }
  .st--1 { animation: st1 15s linear infinite; }
  .st--2 { animation: st2 15s linear infinite; }
  .st--3 { animation: st3 15s linear infinite; }
  .mcard { animation: deal 15s var(--ease-expressive) infinite; animation-delay: calc(var(--i) * 0.12s); }
  .mcard--pick { animation: deal 15s var(--ease-expressive) infinite, pick 15s linear infinite; }
  .added { animation: added 15s linear infinite; }
  .dstep--1 { animation: ds1 15s linear infinite; }
  .dstep--2 { animation: ds2 15s linear infinite; }
  .dstep--3 { animation: ds3 15s linear infinite; }
  .dstep--4 { animation: ds4 15s linear infinite; }
  .dep__bar i { animation: depbar 15s linear infinite; }
  .bubble--me { animation: me 15s linear infinite; }
  .bubble--ai { animation: ai 15s linear infinite; }
  .srcs { animation: srcs 15s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .scene--1, .scene--2 { opacity: 0; }
  .scene--3 { opacity: 1; }
  .dstep { color: var(--support-success); }
  .st { color: var(--text-primary); }
}
@keyframes sc1 { 0% { opacity: 0; transform: translateY(8px); } 2%, 31% { opacity: 1; transform: none; } 33.3%, 100% { opacity: 0; } }
@keyframes sc2 { 0%, 33.3% { opacity: 0; transform: translateY(8px); } 35.3%, 64.6% { opacity: 1; transform: none; } 66.6%, 100% { opacity: 0; } }
@keyframes sc3 { 0%, 66.6% { opacity: 0; transform: translateY(8px); } 68.6%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes st1 { 0%, 33% { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--interactive); } 33.4%, 100% { color: var(--text-helper); box-shadow: inset 0 -2px 0 transparent; } }
@keyframes st2 { 0%, 33.3% { color: var(--text-helper); box-shadow: inset 0 -2px 0 transparent; } 33.4%, 66.5% { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--interactive); } 66.6%, 100% { color: var(--text-helper); box-shadow: inset 0 -2px 0 transparent; } }
@keyframes st3 { 0%, 66.6% { color: var(--text-helper); box-shadow: inset 0 -2px 0 transparent; } 66.7%, 100% { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--interactive); } }
@keyframes deal { 0% { opacity: 0; transform: translateY(14px) scale(0.96); } 5%, 100% { opacity: 1; transform: none; } }
@keyframes pick { 0%, 16% { box-shadow: inset 0 0 0 1px var(--border-subtle-01); } 18%, 33% { box-shadow: inset 0 0 0 2px var(--interactive), 0 0 28px var(--ai-border-start); } 34%, 100% { box-shadow: inset 0 0 0 1px var(--border-subtle-01); } }
@keyframes added { 0%, 20% { opacity: 0; transform: translateY(6px); } 22%, 32% { opacity: 1; transform: none; } 33.3%, 100% { opacity: 0; } }
@keyframes ds1 { 0%, 37% { color: var(--text-helper); opacity: 0.45; } 38.5%, 66% { color: var(--support-success); opacity: 1; } 66.6%, 100% { color: var(--text-helper); opacity: 0.45; } }
@keyframes ds2 { 0%, 44% { color: var(--text-helper); opacity: 0.45; } 45.5%, 66% { color: var(--support-success); opacity: 1; } 66.6%, 100% { color: var(--text-helper); opacity: 0.45; } }
@keyframes ds3 { 0%, 51% { color: var(--text-helper); opacity: 0.45; } 52.5%, 66% { color: var(--support-success); opacity: 1; } 66.6%, 100% { color: var(--text-helper); opacity: 0.45; } }
@keyframes ds4 { 0%, 58% { color: var(--text-helper); opacity: 0.45; } 59.5%, 66% { color: var(--support-success); opacity: 1; } 66.6%, 100% { color: var(--text-helper); opacity: 0.45; } }
@keyframes depbar { 0%, 34% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
@keyframes me { 0%, 68.5% { opacity: 0; transform: translateY(8px); } 70.5%, 100% { opacity: 1; transform: none; } }
@keyframes ai { 0%, 73% { opacity: 0; clip-path: inset(0 0 100% 0); } 74% { opacity: 1; clip-path: inset(0 0 100% 0); } 86%, 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes srcs { 0%, 87% { opacity: 0; transform: translateY(6px); } 89%, 100% { opacity: 1; transform: none; } }

/* knowledge: the six stages get the full row, the facts sit beneath in two columns */
.knowledge { display: grid; gap: var(--spacing-07); margin-block-start: var(--spacing-09); }
.facts-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 42rem) { .facts-list--2 { grid-template-columns: minmax(0, 1fr); } }

/* grid children may shrink below their content, so a long code line scrolls inside its block */
.two > *, .prose > * { min-width: 0; }

/* phone: the header keeps the lockup and the way into Studio, the recreated console drops its rail */
@media (max-width: 42rem) {
  .ox-header > .ox-btn { white-space: nowrap; padding-inline-end: var(--spacing-09); }
  .console { grid-template-columns: minmax(0, 1fr); }
  .console__rail { display: none; }
  .mcard { padding: var(--spacing-03) var(--spacing-04); gap: var(--spacing-03); }
  .mcard small { overflow: hidden; text-overflow: ellipsis; }
  .scene { padding: var(--spacing-05); }
}
/* narrowest phones: the header button drops its arrow so the gutter stays 16px */
@media (max-width: 22.5rem) { .ox-header > .ox-btn { padding-inline-end: var(--spacing-05); } .ox-header > .ox-btn > svg { display: none; } }