@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&family=Noto+Sans+SC:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600&display=swap");

:root {
  --paper: #f8f8f5;
  --paper-rgb: 248, 248, 245;
  --ink: #111311;
  --ink-rgb: 17, 19, 17;
  --accent: #1d4ed8;
  --accent-2: #d9573b;
  --signal: #d9573b;
  --muted: #626a70;
  --line: rgba(17, 19, 17, .2);
  --display: "IBM Plex Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --body: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --display-weight: 300;
  --radius: 0;
}

body.theme-grok {
  --paper: #efeee8;
  --paper-rgb: 239, 238, 232;
  --ink: #090a09;
  --ink-rgb: 9, 10, 9;
  --accent: #dce84b;
  --accent-2: #f2efe6;
  --signal: #dce84b;
  --muted: #6f716b;
  --line: rgba(9, 10, 9, .2);
  --display: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --body: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --display-weight: 500;
}

body.theme-fable {
  --paper: #faf9f5;
  --paper-rgb: 250, 249, 245;
  --ink: #141413;
  --ink-rgb: 20, 20, 19;
  --accent: #cc785c;
  --accent-2: #73866c;
  --signal: #efb79f;
  --muted: #6c6a64;
  --line: rgba(20, 20, 19, .18);
  --display: "Noto Serif SC", SimSun, serif;
  --body: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --display-weight: 400;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--ink); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, a { font: inherit; }
a { color: inherit; }

.deck {
  position: fixed;
  inset: 0;
  display: flex;
  width: 900vw;
  height: 100vh;
  transition: transform .68s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3.5vh;
  padding: 4.6vh 5vw 3.7vh;
  background: var(--paper);
  color: var(--ink);
  isolation: isolate;
}

.slide.dark { background: var(--ink); color: var(--paper); }
.slide.signal { background: var(--accent); color: #fff; }
.theme-grok .slide.signal { color: var(--ink); }
.theme-fable .slide.signal { color: var(--ink); }

/* Precision Evidence: one visible construction system, reserved for the GPT deck. */
.theme-sol .slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(rgba(var(--ink-rgb), .032) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), .032) 1px, transparent 1px);
  background-size: 8.333vw 8.333vw;
}
.theme-sol .slide.dark::after, .theme-sol .slide.signal::after { opacity: .3; filter: invert(1); }

/* Cinematic Product: flat cuts and off-axis light, no card wallpaper. */
.theme-grok .slide.dark::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 42vw;
  height: 140vh;
  right: 7vw;
  top: -20vh;
  border-left: 1px solid rgba(242, 239, 230, .26);
  border-right: 1px solid rgba(242, 239, 230, .08);
  transform: rotate(17deg);
  background: rgba(242, 239, 230, .025);
}
.theme-grok .slide.signal::before {
  content: "";
  position: absolute;
  inset: 9vh 5vw auto 58vw;
  height: 1px;
  background: currentColor;
  box-shadow: 0 12px currentColor, 0 24px currentColor;
  opacity: .3;
}

/* Editorial Intelligence: paper bands and product surfaces. */
.theme-fable .slide:not(.dark):not(.signal)::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: 23vw;
  height: 100%;
  background: rgba(204, 120, 92, .075);
}
.theme-fable .slide.dark::before {
  content: "";
  position: absolute;
  inset: 7vh 6vw 7vh 68vw;
  z-index: -1;
  border: 1px solid rgba(250, 249, 245, .14);
  border-radius: 42% 42% 8% 42%;
}

.chrome, .foot {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vw;
  font-size: clamp(10px, .72vw, 13px);
  font-weight: 500;
  letter-spacing: .035em;
}
.chrome { padding-bottom: 1.5vh; border-bottom: 1px solid currentColor; }
.chrome span:last-child, .foot { opacity: .58; font-family: var(--mono); letter-spacing: .06em; }
.foot { align-self: end; }
.theme-fable .chrome { border-bottom-color: rgba(20, 20, 19, .24); }
.theme-fable .dark .chrome { border-bottom-color: rgba(250, 249, 245, .24); }

.content { min-height: 0; display: grid; align-content: center; position: relative; z-index: 2; }
.content.top { align-content: start; padding-top: 1.5vh; }
.content.bottom { align-content: end; padding-bottom: 3vh; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 6.5vw; align-items: center; }
.split.reverse { grid-template-columns: 7fr 5fr; }
.split > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid-3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5vw; }
.grid-4 { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 1.6vw; }
.stack { display: grid; gap: 1.25vh; }
.theme-grok .split { grid-template-columns: 7fr 5fr; align-items: end; }
.theme-grok .split.reverse { grid-template-columns: 5fr 7fr; }
.theme-fable .split { grid-template-columns: 7fr 5fr; }
.theme-fable .split.reverse { grid-template-columns: 4.5fr 7.5fr; }

.eyebrow {
  margin: 0 0 2.2vh;
  font-size: clamp(11px, .82vw, 15px);
  font-weight: 600;
  letter-spacing: .055em;
  color: var(--accent);
}
.dark .eyebrow { color: var(--signal); }
.signal .eyebrow { color: currentColor; opacity: .7; }
.theme-fable .eyebrow { font-family: var(--body); font-weight: 500; letter-spacing: .02em; }
.theme-grok .eyebrow { font-family: var(--mono); font-size: clamp(10px, .72vw, 13px); text-transform: uppercase; letter-spacing: .1em; }

.display, .title, .statement { margin: 0; font-family: var(--display); font-weight: var(--display-weight); letter-spacing: -.04em; text-wrap: balance; }
.display { max-width: 12ch; font-size: clamp(50px, 5.9vw, 88px); line-height: 1.02; }
.title { max-width: 16ch; font-size: clamp(38px, 4.15vw, 64px); line-height: 1.08; }
.statement { max-width: 19ch; font-size: clamp(42px, 4.8vw, 72px); line-height: 1.08; }
.theme-sol .display, .theme-sol .title, .theme-sol .statement { font-weight: 300; }
.theme-grok .display { max-width: 10ch; font-size: clamp(48px, 5.2vw, 78px); line-height: 1.04; font-weight: 500; }
.theme-grok .title, .theme-grok .statement { font-weight: 500; letter-spacing: -.035em; }
.theme-fable .display { max-width: 10ch; font-size: clamp(48px, 5.45vw, 82px); line-height: 1.08; font-weight: 400; }
.theme-fable .title, .theme-fable .statement { font-weight: 400; letter-spacing: -.025em; }

.lead { max-width: 34em; margin: 2.7vh 0 0; font-size: clamp(18px, 1.42vw, 24px); line-height: 1.62; color: var(--muted); }
.dark .lead, .signal .lead { color: currentColor; opacity: .72; }
.theme-fable .lead { max-width: 31em; font-family: var(--display); font-size: clamp(17px, 1.3vw, 22px); line-height: 1.72; }
.note { margin: 1.6vh 0 0; max-width: 46em; font-size: clamp(12px, .88vw, 16px); line-height: 1.62; opacity: .65; }

.index-mark {
  position: absolute;
  right: 4vw;
  bottom: 4vh;
  z-index: -1;
  font-family: var(--display);
  font-size: min(22vw, 39vh);
  font-weight: 300;
  line-height: .75;
  letter-spacing: -.07em;
  color: currentColor;
  opacity: .045;
}
.theme-grok .index-mark { right: auto; left: 57vw; bottom: 8vh; font-size: min(18vw, 32vh); font-weight: 500; opacity: .07; }
.theme-fable .index-mark { font-size: min(17vw, 31vh); font-weight: 400; opacity: .06; }

.axis { height: 1px; background: currentColor; opacity: .3; position: relative; }
.axis::before, .axis::after { content: ""; position: absolute; top: -4px; width: 9px; height: 9px; background: currentColor; }
.axis::before { left: 0; }
.axis::after { right: 0; }

.orbit { position: relative; width: min(39vw, 62vh); aspect-ratio: 1; margin-inline: auto; }
.orbit-ring { position: absolute; inset: 5%; border: 1px solid currentColor; border-radius: 50%; opacity: .2; }
.orbit-ring.r2 { inset: 23%; }
.orbit-ring.r3 { inset: 40%; }
.orbit-core { position: absolute; inset: 46%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.3vw rgba(29, 78, 216, .11); }
.orbit::before { content: ""; position: absolute; inset: 5% 49.8%; width: 1px; background: currentColor; opacity: .14; }
.orbit-label { position: absolute; min-width: 8.8em; padding: .75em .9em; border-left: 2px solid var(--accent); background: rgba(var(--paper-rgb), .95); color: var(--ink); }
.orbit-label b { display: block; font-family: var(--display); font-size: clamp(18px, 1.7vw, 28px); font-weight: 400; letter-spacing: -.02em; }
.orbit-label small { font-size: 11px; opacity: .62; }
.orbit-label.sol { top: 3%; right: -2%; }
.orbit-label.terra { left: -4%; bottom: 24%; }
.orbit-label.luna { right: 0; bottom: 0; }

.metric { min-height: 23vh; padding: 2.2vh 0; border-top: 2px solid var(--accent); }
.metric + .metric { border-top-color: currentColor; }
.metric b { display: block; margin-bottom: 1.1vh; font-family: var(--display); font-size: clamp(28px, 3.1vw, 50px); line-height: 1; font-weight: 400; }
.metric strong { display: block; margin-bottom: 2.8vh; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--accent); }
.dark .metric strong { color: var(--signal); }
.metric p { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; opacity: .72; }
.theme-grok .metric { border-top-width: 1px; }
.theme-grok .metric:first-child { border-top: 8px solid var(--accent); }
.theme-grok .metric b { font-weight: 500; }
.theme-fable .metric { padding-right: 1.2vw; border-top: 1px solid currentColor; }
.theme-fable .metric:first-child { border-top: 3px solid var(--accent); }
.theme-fable .metric b { font-family: var(--display); }

.ledger { display: grid; border-top: 1px solid currentColor; }
.ledger-row { display: grid; grid-template-columns: 1.15fr .9fr 1.7fr .8fr; gap: 2vw; align-items: baseline; padding: 2.05vh 0; border-bottom: 1px solid currentColor; }
.ledger-row > * { margin: 0; }
.ledger-row b { font-family: var(--display); font-size: clamp(21px, 2vw, 34px); font-weight: 400; }
.ledger-row span { font-size: clamp(11px, .82vw, 14px); opacity: .7; }
.ledger-row .price { color: var(--accent); font-family: var(--mono); font-size: clamp(15px, 1.15vw, 20px); font-weight: 500; opacity: 1; }

.rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 5vh; border-top: 1px solid currentColor; }
.rail-step { position: relative; min-height: 22vh; padding: 2.4vh 1.35vw 1.5vh 0; border-right: 1px solid currentColor; }
.rail-step + .rail-step { padding-left: 1.35vw; }
.rail-step:last-child { border-right: 0; }
.rail-step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--accent); }
.rail-step b { display: block; margin-bottom: 1.3vh; font-family: var(--display); font-size: clamp(19px, 1.7vw, 29px); font-weight: 400; }
.rail-step span { font-family: var(--mono); font-size: 10px; color: var(--accent); }
.rail-step p { margin: 1.8vh 0 0; font-size: clamp(15px, 1.08vw, 18px); line-height: 1.5; opacity: .72; }
.theme-grok .rail-step::before { width: 28%; height: 3px; top: -2px; }

.compare { display: grid; grid-template-columns: .9fr 1.1fr; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.compare > div { min-height: 40vh; padding: 3.5vh 3vw 3vh 0; }
.compare > div + div { padding-left: 3vw; border-left: 1px solid currentColor; background: var(--ink); color: var(--paper); }
.compare h3 { margin: 0 0 3vh; font-family: var(--display); font-size: clamp(27px, 2.8vw, 46px); line-height: 1.05; font-weight: 400; }
.compare ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25vh; }
.compare li { padding-top: 1.25vh; border-top: 1px solid currentColor; font-size: clamp(15px, 1.08vw, 18px); line-height: 1.48; }
.theme-fable .compare { border: 0; gap: 1.6vw; }
.theme-fable .compare > div { padding: 3.5vh 2.4vw; background: #fff; border-radius: var(--radius); }
.theme-fable .compare > div + div { border: 0; background: var(--ink); }

.signal-bars { display: grid; gap: 2.1vh; }
.bar { display: grid; grid-template-columns: 1.25fr 4fr auto; gap: 1.4vw; align-items: center; }
.bar span { font-family: var(--mono); font-size: clamp(10px, .76vw, 13px); letter-spacing: .04em; }
.bar-track { height: 1.45vh; background: rgba(var(--ink-rgb), .12); }
.bar-fill { height: 100%; width: var(--value); background: var(--accent); }
.dark .bar-track { background: rgba(var(--paper-rgb), .14); }
.bar b { font-family: var(--display); font-size: clamp(17px, 1.4vw, 24px); font-weight: 500; }
.theme-grok .bar-track { height: 3px; }
.theme-grok .bar-fill { position: relative; }
.theme-grok .bar-fill::after { content: ""; position: absolute; right: 0; top: -5px; width: 1px; height: 13px; background: var(--accent); }

.folio { display: grid; grid-template-columns: 3.2fr 8.8fr; gap: 3vw; align-items: start; padding: 2vh 0; border-top: 1px solid currentColor; }
.folio:last-child { border-bottom: 1px solid currentColor; }
.folio strong { font-family: var(--display); font-size: clamp(20px, 1.9vw, 32px); font-weight: 400; }
.folio p { margin: 0; max-width: 46em; font-size: clamp(15px, 1.12vw, 18px); line-height: 1.58; opacity: .74; }
.theme-fable .folio { grid-template-columns: 2.2fr 9.8fr; padding: 2.3vh 0; }
.theme-fable .folio strong { color: var(--accent); }

.source-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8vw; }
.source-links a { min-height: 12vh; padding: 2vh 0; border-top: 2px solid var(--accent); text-decoration: none; }
.source-links a:hover, .source-links a:focus-visible { background: rgba(var(--paper-rgb), .07); outline: 2px solid var(--signal); outline-offset: 4px; }
.source-links b { display: block; margin-bottom: .9vh; font-family: var(--display); font-size: clamp(15px, 1.1vw, 19px); font-weight: 500; }
.source-links span { font-size: 11px; line-height: 1.55; opacity: .62; overflow-wrap: anywhere; }

.fact-pill { display: inline-flex; align-items: center; gap: .75em; padding: .65em 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 500; }
.fact-pill::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.theme-grok .fact-pill { font-family: var(--mono); }

.nav-shell {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 2.4vh;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(8, 9, 8, .84);
  color: #fff;
  backdrop-filter: blur(12px);
}
.theme-fable .nav-shell { border-radius: 999px; }
.nav { display: flex; gap: 7px; }
.nav button { width: 7px; height: 7px; padding: 0; border: 0; background: rgba(255,255,255,.32); cursor: pointer; }
.theme-fable .nav button { border-radius: 50%; }
.nav button[aria-current="true"] { width: 24px; background: var(--accent); }
.theme-fable .nav button[aria-current="true"] { border-radius: 99px; }
.nav button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.counter { min-width: 4.8em; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-align: right; }
.progress { position: fixed; z-index: 21; left: 0; top: 0; height: 3px; width: var(--progress, 11.11%); background: var(--accent); transition: width .42s ease; }

@media (prefers-reduced-motion: reduce) { .deck, .progress { transition: none; } }

@media (max-width: 720px) {
  .slide { padding: 3.2vh 6vw 7vh; gap: 2.2vh; }
  .chrome span:first-child { max-width: 58vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chrome span:last-child { max-width: 28vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .foot span:first-child { display: none; }
  .display { font-size: clamp(40px, 12.5vw, 60px); }
  .title { font-size: clamp(32px, 9vw, 46px); }
  .statement { font-size: clamp(34px, 9.5vw, 50px); }
  .lead { font-size: 15px; line-height: 1.52; }
  .split, .split.reverse, .theme-grok .split, .theme-grok .split.reverse, .theme-fable .split, .theme-fable .split.reverse { grid-template-columns: minmax(0, 1fr); gap: 2.7vh; }
  .orbit { width: min(72vw, 31vh); }
  .orbit-label { min-width: 6.5em; padding: .5em .65em; }
  .orbit-label b { font-size: 16px; }
  .orbit-label small { font-size: 9px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1.2vh 3.5vw; }
  .grid-3 { grid-template-columns: 1fr; gap: 1.1vh; }
  .metric { min-height: auto; padding: 1.3vh 0; }
  .metric b { font-size: 27px; margin-bottom: .4vh; }
  .metric strong { margin-bottom: .6vh; }
  .metric p { font-size: 11px; line-height: 1.42; }
  .ledger-row { grid-template-columns: 1.1fr .8fr .8fr; gap: 2vw; padding: 1.35vh 0; }
  .ledger-row span:nth-child(3) { display: none; }
  .rail { grid-template-columns: repeat(2, 1fr); margin-top: 2vh; }
  .rail-step { min-height: auto; padding: 1.2vh 2vw 1.2vh 0; border-bottom: 1px solid currentColor; }
  .rail-step + .rail-step { padding-left: 2vw; }
  .rail-step:last-child { grid-column: 1 / -1; }
  .rail-step p { margin-top: .5vh; font-size: 11px; }
  .compare > div { min-height: 32vh; padding: 2vh 3vw 2vh 0; }
  .compare h3 { font-size: 25px; }
  .compare li { font-size: 11px; }
  .theme-fable .compare > div { padding: 2vh 3vw; }
  .bar { grid-template-columns: 1.3fr 2fr auto; }
  .folio { grid-template-columns: 1fr; gap: .6vh; padding: 1.15vh 0; }
  .folio p { font-size: 11px; }
  .source-links { grid-template-columns: minmax(0, 1fr); gap: .8vh; }
  .source-links a { min-width: 0; min-height: auto; padding: 1vh 0; }
  .index-mark { display: none; }
  .theme-fable .slide:not(.dark):not(.signal)::before { width: 16vw; }
  .nav-shell { bottom: 1.1vh; }
}