:root {
  --ink: #12141a;
  --muted: #686b73;
  --line: #dcdde1;
  --paper: #f7f7f4;
  --white: #ffffff;
  --sidebar: #17191f;
  --sidebar-muted: #8f929b;
  --claude: #db6b45;
  --claude-soft: #f8e7df;
  --codex: #5c55d6;
  --codex-soft: #e9e7fb;
  --acid: #d8ff63;
  --green: #54b885;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
code { padding: .16rem .34rem; border: 1px solid #dedee3; border-radius: 4px; background: #f4f4f6; font: .82em var(--mono); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 10px 14px; background: var(--acid); color: #111; font-weight: 700; }
.skip-link:focus { top: 16px; }

.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 264px; padding: 0 22px 24px; color: #fff; background: var(--sidebar); display: flex; flex-direction: column; }
.brand { height: 80px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2d3038; }
.brand > a, .footer-brand { display: flex; gap: 11px; align-items: center; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; background: var(--acid); color: #15171c; font-weight: 900; font-size: 17px; transform: rotate(-4deg); }
.brand strong { display: block; letter-spacing: .08em; font-size: 14px; }
.brand small { display: block; color: var(--sidebar-muted); font: 10px var(--mono); letter-spacing: .06em; }
.sidebar-close { display: none; border: 0; background: transparent; color: #fff; font-size: 28px; cursor: pointer; }
.docs-nav { margin-top: 40px; }
.nav-label { margin: 0 10px 14px; color: #676b76; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .15em; }
.docs-nav a { display: flex; align-items: center; gap: 14px; margin: 4px 0; padding: 11px 10px; color: #aeb1b9; border-left: 2px solid transparent; font-size: 13px; transition: .2s ease; }
.docs-nav a span { color: #5d616b; font: 10px var(--mono); }
.docs-nav a:hover { color: #fff; background: #1e2128; }
.docs-nav a.active { color: #fff; border-left-color: var(--acid); background: #20232a; }
.docs-nav a.active span { color: var(--acid); }
.sidebar-note { margin-top: auto; padding: 16px 14px; display: flex; gap: 11px; align-items: center; background: #20232a; border: 1px solid #30333b; }
.pulse-dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(84,184,133,.12); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 11px; }
.sidebar-note small { color: var(--sidebar-muted); font: 9px var(--mono); margin-top: 2px; }

.page-shell { margin-left: 264px; min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; height: 64px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; background: rgba(247,247,244,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: #777a82; font: 10px var(--mono); }
.breadcrumbs b { color: #c4c5ca; font-weight: 400; }
.breadcrumbs strong { color: var(--ink); }
.topbar-meta { display: flex; align-items: center; gap: 9px; color: #62656e; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.live-dot { width: 6px; height: 6px; box-shadow: none; }
.menu-button { display: none; width: 30px; padding: 4px; border: 0; background: none; }
.menu-button span { display: block; height: 2px; margin: 4px 0; background: var(--ink); }

main { overflow: hidden; }
article { max-width: 1160px; margin: 0 auto; padding: 0 56px; }
.hero { position: relative; min-height: 650px; padding: 96px 0 92px; }
.hero::after { content: "02"; position: absolute; z-index: -1; right: -20px; top: 52px; color: #efefeb; font-weight: 900; font-size: clamp(180px, 25vw, 330px); line-height: 1; letter-spacing: -.1em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #73767d; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.eyebrow span:first-child { color: var(--ink); font-weight: 700; }
h1 { max-width: 820px; margin: 28px 0 24px; font-size: clamp(62px, 8vw, 112px); line-height: .88; letter-spacing: -.075em; }
h1 em { color: var(--codex); font-style: normal; }
.hero-lead { max-width: 690px; margin: 0; color: #5e6168; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; }
.button { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; gap: 22px; border: 1px solid var(--ink); font-size: 12px; font-weight: 750; }
.button.primary { background: var(--ink); color: #fff; }
.button.primary span { color: var(--acid); }
.button.secondary { background: transparent; }
.button:hover { transform: translateY(-1px); box-shadow: 4px 4px 0 var(--line); }
.hero-rule { position: absolute; inset: auto 0 34px; display: flex; align-items: center; }
.hero-rule span { flex: 1; height: 1px; background: var(--line); }
.hero-rule i { width: 12px; height: 12px; background: var(--claude); transform: rotate(45deg); }

.doc-section { padding: 112px 0; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 130px minmax(340px, 1.25fr) minmax(250px, .75fr); gap: 28px; align-items: end; margin-bottom: 56px; }
.section-heading > div:first-child { align-self: start; }
.section-number { display: block; color: #a5a7ad; font: 10px var(--mono); }
.kicker { margin: 6px 0 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.section-heading h2 { margin: 0; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -.045em; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.architecture { padding: 34px; border: 1px solid #d2d3d8; background: #eeeef0; }
.flow-stage { position: relative; max-width: 690px; margin: 0 auto; border: 1px solid #cfd0d5; background: var(--white); }
.stage-label { margin: 0; padding: 9px 13px; color: #767982; border-bottom: 1px solid #e1e2e5; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.channel-row { display: grid; grid-template-columns: 1fr 1fr; }
.mini-node { padding: 16px; display: flex; align-items: center; gap: 11px; }
.mini-node + .mini-node { border-left: 1px solid #e1e2e5; }
.channel-icon { width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--acid); font-size: 13px; }
.mini-node strong, .mini-node small { display: block; }
.mini-node strong { font-size: 12px; }
.mini-node small { margin-top: 2px; color: #8a8d94; font: 9px var(--mono); }
.flow-connector { height: 32px; display: grid; place-items: center; }
.flow-connector span { width: 1px; height: 100%; background: #a9abb1; }
.stage-router { border-color: var(--ink); }
.router-body { display: grid; grid-template-columns: 220px 1fr; }
.router-title { display: flex; gap: 12px; align-items: center; padding: 22px; color: #fff; background: var(--ink); }
.router-title strong, .router-title small { display: block; }
.router-title strong { font-size: 13px; }
.router-title small { color: #858994; font: 9px var(--mono); }
.router-symbol { color: var(--acid); font-size: 24px; }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; }
.decision-grid > div { padding: 18px; }
.decision-grid > div + div { border-left: 1px solid #e1e2e5; }
.decision-grid span, .decision-grid strong { display: block; }
.decision-grid span { color: #858890; font: 9px var(--mono); }
.decision-grid strong { margin: 6px 0 8px; font-size: 11px; }
.branch-lines, .merge-lines { position: relative; height: 48px; max-width: 660px; margin: 0 auto; }
.branch-lines .stem, .merge-lines .stem { position: absolute; left: 50%; width: 1px; height: 24px; background: #9699a1; }
.branch-lines .stem { top: 0; }
.branch-lines .bar, .merge-lines .bar { position: absolute; left: 25%; right: 25%; height: 1px; background: #9699a1; }
.branch-lines .bar { top: 24px; }
.branch-lines i, .merge-lines i { position: absolute; width: 1px; height: 24px; background: #9699a1; }
.branch-lines i { top: 24px; }
.branch-lines .left, .merge-lines .left { left: 25%; }
.branch-lines .right, .merge-lines .right { right: 25%; }
.engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.engine-card { position: relative; overflow: hidden; padding: 22px; border: 1px solid; background: var(--white); }
.engine-card::before { content: ""; position: absolute; width: 100px; height: 100px; right: -54px; top: -54px; transform: rotate(45deg); }
.claude-card { border-color: #c58b75; }
.claude-card::before { background: var(--claude); }
.codex-card { border-color: #817cd3; }
.codex-card::before { background: var(--codex); }
.engine-top { display: flex; align-items: center; gap: 10px; }
.engine-glyph { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 13px; }
.claude-glyph { background: var(--claude); }
.codex-glyph { background: var(--codex); }
.engine-status { color: #878a91; font: 9px var(--mono); text-transform: uppercase; }
.engine-card h3 { margin: 22px 0 5px; font-size: 28px; letter-spacing: -.04em; }
.engine-card > p { min-height: 42px; margin: 0 0 20px; color: #73767e; font-size: 12px; }
.engine-card ul { margin: 0; padding: 0; border-top: 1px solid #e4e4e7; list-style: none; }
.engine-card li { padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e4e4e7; font-size: 10px; }
.engine-card li span { color: #73767d; }
.stream-tag { margin-top: 17px; display: flex; align-items: center; gap: 8px; font: 9px var(--mono); }
.stream-tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.merge-lines i { top: 0; }
.merge-lines .bar { top: 23px; }
.merge-lines .stem { top: 23px; }
.stage-output { max-width: 820px; }
.output-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.output-grid > div { padding: 18px; display: grid; grid-template-columns: 28px 1fr; column-gap: 9px; }
.output-grid > div + div { border-left: 1px solid #e1e2e5; }
.output-grid > div > span { grid-row: span 2; color: var(--codex); font-size: 18px; }
.output-grid strong, .output-grid small { display: block; }
.output-grid strong { font-size: 11px; }
.output-grid small { color: #92949a; font: 8px var(--mono); }
.callout { margin-top: 20px; padding: 20px 24px; display: flex; gap: 18px; border-left: 3px solid var(--codex); background: var(--codex-soft); }
.callout-icon { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--codex); color: var(--codex); font: 11px var(--mono); }
.callout strong { font-size: 12px; }
.callout p { margin: 3px 0 0; color: #5d5a7f; font-size: 12px; line-height: 1.6; }

.switching-section { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
.compact-heading { margin-bottom: 48px; }
.switch-demo { border: 1px solid var(--ink); background: #f1f1f2; }
.demo-toolbar { min-height: 76px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--ink); }
.demo-caption, .demo-toolbar strong { display: block; }
.demo-caption { color: #858995; font: 8px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.demo-toolbar strong { margin-top: 4px; font-size: 13px; }
.demo-steps { display: flex; gap: 6px; }
.demo-steps button { width: 30px; height: 30px; border: 1px solid #3e414b; background: transparent; color: #838791; font: 9px var(--mono); cursor: pointer; }
.demo-steps button.active { border-color: var(--acid); background: var(--acid); color: var(--ink); font-weight: 800; }
.demo-canvas { padding: 28px; }
.preference-card { max-width: 510px; margin: 0 auto 40px; text-align: center; }
.preference-card > span { color: #73767f; font: 9px var(--mono); text-transform: uppercase; }
.engine-toggle { margin: 10px 0 7px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c8c9ce; background: #dddde0; }
.toggle-option { padding: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #8b8d93; font-size: 11px; font-weight: 700; transition: .3s ease; }
.toggle-option i { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #aaa; font-style: normal; font-size: 9px; }
.toggle-option.active { color: #fff; background: var(--ink); }
.toggle-option[data-pref="claude"].active i { border-color: var(--claude); background: var(--claude); }
.toggle-option[data-pref="codex"].active i { border-color: var(--codex); background: var(--codex); }
.preference-card small { color: #9a9ca2; font: 8px var(--mono); }
.conversation-area { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; }
.conversation-card { padding: 17px; border: 1px solid #bfc1c7; background: #fff; transition: .3s ease; }
.conversation-card.active { border-color: var(--ink); box-shadow: 5px 5px 0 #d1d2d6; transform: translateY(-2px); }
.conversation-card.muted { opacity: .36; filter: grayscale(1); }
.conversation-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 750; }
.pin { padding: 5px 7px; font: 8px var(--mono); }
.claude-pin { color: #91492e; background: var(--claude-soft); }
.codex-pin { color: #45409a; background: var(--codex-soft); }
.message-lines { margin: 18px 0; }
.message-lines i { display: block; width: 90%; height: 5px; margin: 7px 0; background: #ececef; }
.message-lines i:nth-child(2) { width: 66%; }
.message-lines i:nth-child(3) { width: 78%; }
.conversation-foot { padding-top: 11px; display: flex; align-items: center; gap: 7px; border-top: 1px solid #e6e6e8; color: #868991; }
.conversation-foot small { font: 8px var(--mono); }
.lock { color: var(--green); font-weight: 800; }
.route-arrow { text-align: center; color: #92949b; }
.route-arrow span { display: block; font: 8px var(--mono); }
.route-arrow i { font-style: normal; font-size: 23px; }
.demo-explanation { min-height: 76px; padding: 16px 18px; display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; border-top: 1px solid #caccd1; background: #fff; }
.explanation-number { width: 28px; height: 28px; display: grid; place-items: center; background: var(--codex); color: #fff; font: 9px var(--mono); }
.demo-explanation p { margin: 0; color: #656870; font-size: 11px; }
.demo-explanation button { padding: 8px 0; display: flex; gap: 18px; border: 0; border-bottom: 1px solid var(--ink); background: none; font-size: 10px; font-weight: 750; cursor: pointer; }
.invariant-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.invariant-grid > div { padding: 20px; }
.invariant-grid > div + div { border-left: 1px solid var(--line); }
.invariant-grid span { color: #aaa; font: 9px var(--mono); }
.invariant-grid strong { display: block; margin: 10px 0 5px; font-size: 12px; }
.invariant-grid p { margin: 0; color: #74777e; font-size: 10px; line-height: 1.6; }

.shared-section { position: relative; }
.shared-map { position: relative; min-height: 590px; border: 1px solid #d2d3d8; background-color: #eeeeef; background-image: linear-gradient(#dedfe2 1px, transparent 1px), linear-gradient(90deg, #dedfe2 1px, transparent 1px); background-size: 28px 28px; overflow: hidden; }
.shared-map::before, .shared-map::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid #c8c9ce; border-radius: 50%; transform: translate(-50%,-50%); }
.shared-map::before { width: 440px; height: 440px; }
.shared-map::after { width: 280px; height: 280px; border-style: dashed; }
.shared-core { position: absolute; z-index: 3; left: 50%; top: 50%; width: 174px; height: 174px; transform: translate(-50%,-50%); display: grid; place-items: center; color: #fff; background: var(--ink); }
.shared-core::before { content: ""; position: absolute; inset: 12px; border: 1px solid #373a43; }
.core-label { z-index: 2; text-align: center; }
.core-label small, .core-label strong, .core-label span { display: block; }
.core-label small { color: #828691; font: 8px var(--mono); text-transform: uppercase; }
.core-label strong { margin: 5px 0; color: var(--acid); font-size: 42px; letter-spacing: -.07em; }
.core-label span { color: #9a9da6; font: 9px var(--mono); }
.shared-item { position: absolute; z-index: 4; width: 250px; padding: 13px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid #c4c5ca; background: #fff; box-shadow: 3px 3px 0 rgba(18,20,26,.07); }
.shared-item > span { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; color: #fff; background: var(--codex); font: 8px var(--mono); }
.shared-item strong, .shared-item small { display: block; }
.shared-item strong { font-size: 11px; }
.shared-item small { margin-top: 3px; color: #85878e; font: 8px/1.5 var(--mono); }
.item-a { left: 34px; top: 55px; }
.item-b { right: 34px; top: 55px; }
.item-c { left: 18px; top: 260px; }
.item-d { right: 18px; top: 260px; }
.item-e { left: 76px; bottom: 45px; }
.item-f { right: 76px; bottom: 45px; }
.item-a > span, .item-c > span, .item-e > span { background: var(--claude); }
.safety-strip { margin-top: 20px; padding: 22px; display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; color: #fff; background: var(--ink); }
.safety-title { display: flex; gap: 13px; align-items: center; }
.safety-title > span { width: 37px; height: 37px; display: grid; place-items: center; color: var(--ink); background: var(--acid); font-size: 18px; }
.safety-title small, .safety-title strong { display: block; }
.safety-title small { color: #7f828c; font: 8px var(--mono); text-transform: uppercase; }
.safety-title strong { margin-top: 3px; font-size: 11px; }
.safety-strip p { margin: 0; color: #a4a7b0; font-size: 10px; line-height: 1.7; }

.differences-section { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
.comparison { border-top: 2px solid var(--ink); }
.comparison-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.comparison-row > div { min-height: 56px; padding: 16px 18px; display: flex; align-items: center; gap: 9px; font-size: 11px; }
.comparison-row > div + div { border-left: 1px solid var(--line); }
.comparison-row > div:first-child { color: #777a81; font: 9px var(--mono); text-transform: uppercase; }
.comparison-head { background: #f0f0f1; }
.comparison-head > div { min-height: 68px; color: var(--ink) !important; font: 11px var(--sans) !important; font-weight: 800 !important; text-transform: none !important; }
.table-mark { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; font-size: 10px; }
.claude-table { background: var(--claude); }
.codex-table { background: var(--codex); }
.system-note { margin-top: 28px; padding: 22px; display: grid; grid-template-columns: 240px 1fr; gap: 24px; border: 1px solid #e0b89f; background: #fbf0e9; }
.system-note > div { display: flex; align-items: center; gap: 10px; }
.system-note > div span { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; background: var(--claude); font: 10px var(--mono); }
.system-note strong { font-size: 11px; }
.system-note p { margin: 0; color: #7a6256; font-size: 10px; line-height: 1.65; }

footer { min-height: 150px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.brand-mark.small { width: 30px; height: 30px; font-size: 14px; }
.footer-brand strong, .footer-brand small { display: block; }
.footer-brand strong { font-size: 11px; }
.footer-brand small { color: #8c8f96; font: 8px var(--mono); }
.footer-meta { display: flex; gap: 22px; color: #8b8d94; font: 8px var(--mono); text-transform: uppercase; }
.footer-meta a { color: var(--ink); font-weight: 800; }
.menu-scrim { display: none; }

@media (max-width: 1040px) {
  .sidebar { width: 230px; }
  .page-shell { margin-left: 230px; }
  article { padding: 0 36px; }
  .section-heading { grid-template-columns: 90px 1.25fr .75fr; }
  .architecture { padding: 22px; }
  .shared-item { width: 220px; }
  .item-a { left: 20px; }.item-b { right: 20px; }.item-c { left: 10px; }.item-d { right: 10px; }.item-e { left: 30px; }.item-f { right: 30px; }
}

@media (max-width: 820px) {
  .sidebar { width: 264px; transform: translateX(-100%); transition: transform .25s ease; }
  body.menu-open .sidebar { transform: translateX(0); }
  body.menu-open { overflow: hidden; }
  .sidebar-close { display: block; }
  .menu-scrim { position: fixed; z-index: 25; inset: 0; background: rgba(0,0,0,.46); }
  body.menu-open .menu-scrim { display: block; }
  .page-shell { margin-left: 0; }
  .menu-button { display: block; }
  .breadcrumbs { margin-right: auto; margin-left: 15px; }
  article { padding: 0 28px; }
  .hero { min-height: 620px; }
  .section-heading { grid-template-columns: 70px 1fr; align-items: start; }
  .section-heading > p { grid-column: 2; }
  .shared-item { width: 205px; }
  .shared-map::before { width: 390px; height: 390px; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 70px; }
  .topbar { height: 58px; padding: 0 18px; }
  .topbar-meta { font-size: 8px; }
  .breadcrumbs span:not(:last-child), .breadcrumbs b { display: none; }
  article { padding: 0 18px; }
  .hero { min-height: auto; padding: 72px 0 100px; }
  .hero::after { right: -12px; top: 80px; font-size: 170px; }
  h1 { margin-top: 23px; font-size: 59px; }
  .hero-lead { font-size: 15px; line-height: 1.65; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { justify-content: space-between; }
  .doc-section { padding: 78px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .section-heading > p { grid-column: 1; }
  .section-heading h2 { font-size: 38px; }
  .architecture { padding: 13px; }
  .channel-row, .router-body, .decision-grid, .engine-grid, .output-grid { grid-template-columns: 1fr; }
  .mini-node + .mini-node, .decision-grid > div + div, .output-grid > div + div { border-left: 0; border-top: 1px solid #e1e2e5; }
  .router-title { padding: 17px; }
  .branch-lines, .merge-lines { display: none; }
  .engine-grid { margin: 20px 0; }
  .engine-card > p { min-height: auto; }
  .callout { padding: 17px; }
  .demo-toolbar { align-items: flex-start; gap: 15px; }
  .demo-canvas { padding: 18px; }
  .preference-card { margin-bottom: 24px; }
  .conversation-area { grid-template-columns: 1fr; gap: 14px; }
  .route-arrow { transform: rotate(90deg); height: 24px; }
  .route-arrow span { display: none; }
  .demo-explanation { grid-template-columns: 32px 1fr; }
  .demo-explanation button { grid-column: 2; justify-self: start; }
  .invariant-grid { grid-template-columns: 1fr; }
  .invariant-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .shared-map { min-height: auto; padding: 18px; display: grid; grid-template-columns: 1fr; gap: 10px; background-size: 22px 22px; }
  .shared-map::before, .shared-map::after { display: none; }
  .shared-core, .shared-item { position: relative; inset: auto; width: 100%; transform: none; }
  .shared-core { height: 150px; margin-bottom: 8px; }
  .shared-item { box-shadow: none; }
  .safety-strip, .system-note { grid-template-columns: 1fr; }
  .comparison { overflow-x: auto; }
  .comparison-row { min-width: 650px; }
  footer { padding: 40px 0; align-items: flex-start; flex-direction: column; gap: 26px; }
  .footer-meta { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}