:root {
  --night: #080b12;
  --night-2: #0e1420;
  --night-3: #151d2a;
  --ink: #14202a;
  --paper: #ece2c9;
  --paper-2: #d9caa7;
  --bone: #f3ead7;
  --muted: #9fa6ae;
  --gold: #d7ad5d;
  --gold-dark: #7c6335;
  --red: #d64b35;
  --cyan: #78c3c8;
  --line: rgba(215, 173, 93, 0.22);
  --line-cool: rgba(120, 195, 200, 0.2);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: "Inter", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", "Roboto Mono", "Liberation Mono", monospace;
  --max: 1240px;
  --header-h: 82px;
  --scroll-shift: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--night); }

body {
  margin: 0;
  min-width: 280px;
  overflow-x: hidden;
  background: var(--night);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23f3ead7'%3E%3Ccircle cx='18' cy='31' r='.7'/%3E%3Ccircle cx='90' cy='16' r='.45'/%3E%3Ccircle cx='155' cy='48' r='.6'/%3E%3Ccircle cx='203' cy='103' r='.5'/%3E%3Ccircle cx='55' cy='151' r='.55'/%3E%3Ccircle cx='133' cy='190' r='.7'/%3E%3C/g%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.02);
  background-size: 72px 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 0H72M0 0V72' fill='none' stroke='%23ffffff' stroke-opacity='.035'/%3E%3C/svg%3E");
  opacity: .5;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, height .35s ease;
}

.site-header.is-scrolled {
  height: 68px;
  background: rgba(8, 11, 18, .94);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}

.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand-seal {
  position: relative;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border: 1px solid var(--gold-dark);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(215,173,93,.07);
}
.brand-seal::before, .brand-seal::after, .brand-seal i {
  content: "";
  position: absolute;
  border: 1px solid rgba(215,173,93,.6);
  border-radius: 50%;
}
.brand-seal::before { inset: 7px 15px; }
.brand-seal::after { inset: 15px 7px; }
.brand-seal i { inset: 5px; border-color: rgba(215,173,93,.22); }
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-words b { font-family: var(--serif); font-size: 18px; letter-spacing: .16em; }
.brand-words small { margin-top: 7px; color: var(--gold); font: 8px/1 var(--mono); letter-spacing: .4em; }

.header-nav { display: flex; align-items: center; gap: 38px; }
.header-nav a { position: relative; color: #b8bdc4; font-size: 13px; letter-spacing: .12em; }
.header-nav a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px; background: var(--gold); transition: width .25s ease; }
.header-nav a:hover::after { width: 100%; }
.site-header > .button { justify-self: end; }

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 140;
  height: 2px;
  pointer-events: none;
  background: rgba(215,173,93,.05);
}
.reading-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #84402f, var(--gold) 62%, #dffcf6);
  box-shadow: 0 0 12px rgba(215,173,93,.7);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}
.chapter-rail {
  position: fixed;
  right: max(18px, calc((100vw - 1440px) / 2));
  top: 50%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 17px;
  transform: translateY(-50%);
}
.chapter-rail::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: linear-gradient(transparent, rgba(215,173,93,.24), transparent);
}
.chapter-rail a {
  position: relative;
  min-width: 70px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: #59636e;
  font: 8px/1 var(--mono);
  letter-spacing: .1em;
}
.chapter-rail a::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 0;
  border: 1px solid #5b543f;
  border-radius: 50%;
  background: var(--night);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.chapter-rail b { opacity: 0; font-weight: 400; transform: translateX(7px); transition: opacity .3s ease, transform .3s ease; }
.chapter-rail span { color: #6d6248; }
.chapter-rail a:hover b, .chapter-rail a.is-active b { opacity: 1; transform: none; }
.chapter-rail a.is-active { color: var(--bone); }
.chapter-rail a.is-active::after { background: var(--gold); box-shadow: 0 0 0 5px rgba(215,173,93,.1), 0 0 18px rgba(215,173,93,.65); transform: scale(1.15); }

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  border: 1px solid var(--gold);
  color: var(--bone);
  font-size: 14px;
  letter-spacing: .08em;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: #12100c; box-shadow: 6px 6px 0 rgba(124,99,53,.28); }
.button-primary:hover { background: #e8c576; box-shadow: 3px 3px 0 rgba(124,99,53,.36); }
.button-outline { background: transparent; }
.button-outline:hover { background: var(--gold); color: var(--night); }
.button-small { min-height: 42px; padding: 0 17px; font-size: 12px; }
.button-large { min-height: 60px; padding: 0 32px; }
.button-arrow { font-size: 21px; transition: transform .2s ease; }
.button:hover .button-arrow { transform: translateX(5px); }

.hero {
  width: min(var(--max), calc(100% - 48px));
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--header-h) + 64px) 0 74px;
  display: grid;
  grid-template-columns: minmax(400px, .92fr) minmax(500px, 1.08fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
}

.kicker { margin: 0 0 24px; color: var(--gold); font: 11px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.kicker span { display: inline-block; width: 34px; height: 1px; margin: 0 12px 3px 0; background: var(--gold); }

.hero h1, .section-heading h2, .manifesto h2, .time-copy h2, .ages h2, .closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -.045em;
}
.hero h1 { font-size: clamp(48px, 5.7vw, 84px); }
.hero h1 em { color: var(--gold); font-style: normal; white-space: nowrap; }
.hero-lead { max-width: 590px; margin: 28px 0 32px; color: #bcc1c8; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.95; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; color: #b7bdc5; font-size: 13px; border-bottom: 1px solid rgba(183,189,197,.35); padding: 8px 0 5px; }
.text-link span { color: var(--gold); margin-left: 6px; }
.hero-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 570px; margin: 52px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hero-points li { display: flex; flex-direction: column; padding: 18px 12px 0 0; }
.hero-points li + li { padding-left: 17px; border-left: 1px solid var(--line); }
.hero-points b { color: var(--bone); font-family: var(--serif); letter-spacing: .08em; }
.hero-points span { margin-top: 5px; color: #7f8995; font-size: 11px; }

.hero-atlas {
  position: relative;
  min-height: min(720px, 76vh);
  isolation: isolate;
  overflow: clip;
  --light-x: 50%;
  --light-y: 46%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  perspective: 1200px;
}
.hero-atlas::before {
  content: "";
  position: absolute;
  inset: 2% 0 2%;
  border: 1px solid rgba(215,173,93,.14);
  border-radius: 48% 48% 8px 8px / 28% 28% 8px 8px;
  pointer-events: none;
}
.product-globe-frame {
  position: absolute;
  inset: 4% 4% 5%;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(215,173,93,.36);
  border-radius: 48% 48% 8px 8px / 28% 28% 8px 8px;
  background: #07101a;
  box-shadow: 0 34px 80px rgba(0,0,0,.45);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: clip-path 1.65s cubic-bezier(.22,.78,.16,1), filter 1.2s ease, transform .16s linear;
}
.js:not(.is-ready) .product-globe-frame { clip-path: inset(48% 0 48% 0 round 50%); filter: brightness(2.2) saturate(.5); }
.js.is-ready .product-globe-frame { clip-path: inset(0 round 0); }
.product-globe-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 12px solid rgba(8,11,18,.18);
  border-radius: inherit;
  pointer-events: none;
}
.product-globe-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--light-x) var(--light-y), rgba(244,218,157,.19), transparent 14%),
    radial-gradient(circle at 62% 32%, transparent 28%, rgba(4,10,17,.08) 52%, rgba(3,6,12,.76) 100%),
    linear-gradient(112deg, transparent 32%, rgba(219,246,242,.08) 47%, transparent 58%);
  mix-blend-mode: screen;
}
.product-globe-frame picture { display: block; width: 100%; height: 100%; }
.product-globe-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(.82) contrast(1.07) brightness(.82);
  transform: scale(1.02);
  animation: globe-breathe 18s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.product-globe-frame figcaption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(215,173,93,.25);
  background: rgba(8,11,18,.78);
  color: #c4c0b5;
  font: 8px/1 var(--mono);
  letter-spacing: .12em;
  backdrop-filter: blur(12px);
}
.product-globe-frame figcaption i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(120,195,200,.1); }
.hero-route-trace { position: absolute; inset: 7% 4% 5%; z-index: 2; width: 92%; height: 88%; pointer-events: none; }
.hero-route-trace path { fill: none; stroke: rgba(215,173,93,.78); stroke-width: 1.2; stroke-dasharray: 8 12; vector-effect: non-scaling-stroke; animation: dash 12s linear infinite; }
.hero-route-trace circle { fill: var(--red); stroke: var(--bone); stroke-width: 1; }
.atlas-light-canvas {
  position: absolute;
  inset: 1% 0 2%;
  z-index: 3;
  width: 100%;
  height: 97%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 1.2s ease 1s;
}
.is-ready .atlas-light-canvas { opacity: .92; }
.atlas-spectrum {
  position: absolute;
  inset: 3% 3% 4%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 48% 48% 8px 8px / 28% 28% 8px 8px;
  background:
    conic-gradient(from 205deg at var(--light-x) var(--light-y), transparent 0 20deg, rgba(225,90,56,.13) 33deg, rgba(239,194,99,.08) 42deg, rgba(116,219,218,.11) 54deg, transparent 68deg),
    radial-gradient(ellipse at var(--light-x) var(--light-y), rgba(255,226,162,.15), transparent 28%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.6s ease 1.1s;
}
.is-ready .atlas-spectrum { opacity: 1; }
.atlas-spectrum::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  left: calc(var(--light-x) - 36%);
  top: calc(var(--light-y) - 36%);
  border: 1px solid rgba(226,201,135,.11);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(120,195,200,.07), inset 0 0 65px rgba(215,173,93,.05);
  transition: left .16s linear, top .16s linear;
}
.atlas-aperture {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: aperture-arrival 2.6s cubic-bezier(.2,.78,.2,1) .05s both;
}
.atlas-aperture::before {
  content: "";
  position: absolute;
  left: -15%;
  top: 48%;
  width: 130%;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(110,225,224,.65), #ffe3a1 50%, rgba(218,81,50,.6), transparent 95%);
  box-shadow: 0 0 8px #f3c56e, 0 0 28px rgba(215,173,93,.7), 0 0 80px rgba(120,195,200,.3);
  transform: rotate(-8deg);
}
.atlas-aperture i {
  position: absolute;
  left: 43%;
  top: 41%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff0bb;
  box-shadow: 0 0 15px #fff0bb, 0 0 48px #d7ad5d, 0 0 120px rgba(120,195,200,.52);
  transform: scale(.05);
  animation: aperture-core 2.3s cubic-bezier(.2,.8,.2,1) .1s both;
}
.atlas-rings { position: absolute; inset: 2% 1%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.4s ease 1.1s; }
.is-ready .atlas-rings { opacity: 1; }
.atlas-rings i { position: absolute; left: 50%; top: 48%; border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); }
.atlas-rings i:nth-child(1) { width: 94%; aspect-ratio: 1.08; border: 1px solid rgba(215,173,93,.22); clip-path: inset(0 0 50% 0); animation: ring-drift 22s linear infinite; }
.atlas-rings i:nth-child(2) { width: 75%; aspect-ratio: 1; border: 1px dashed rgba(120,195,200,.22); clip-path: inset(42% 0 0); animation: ring-drift-reverse 31s linear infinite; }
.atlas-rings i:nth-child(3) { width: 58%; aspect-ratio: 1; border: 1px solid rgba(230,90,54,.13); box-shadow: 0 0 35px rgba(215,173,93,.05); animation: ring-breathe 7s ease-in-out infinite alternate; }
.atlas-lens { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; }
.atlas-lens-a { left: 48%; top: 38%; width: 5px; height: 5px; background: #fff6d2; box-shadow: 0 0 8px #fff, 0 0 24px #d7ad5d, 0 0 78px 22px rgba(215,173,93,.19); }
.atlas-lens-b { left: 63%; top: 51%; width: 34px; height: 3px; opacity: .42; background: linear-gradient(90deg, transparent, #81d4d1, #f4c96d, transparent); filter: blur(.3px); }
.atlas-scan {
  position: absolute;
  inset: 4% 4% 5%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: 48% 48% 8px 8px / 28% 28% 8px 8px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.atlas-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  height: 18%;
  border-bottom: 1px solid rgba(170,242,235,.42);
  background: linear-gradient(transparent, rgba(110,211,208,.07));
  box-shadow: 0 8px 24px rgba(110,211,208,.09);
  animation: atlas-scan 8s cubic-bezier(.45,0,.55,1) 2.4s infinite;
}
.atlas-gesture { position: absolute; left: 8%; bottom: 8.5%; z-index: 5; display: flex; align-items: center; gap: 8px; color: #78818a; font: 8px/1 var(--mono); letter-spacing: .12em; opacity: .7; }
.atlas-gesture i { width: 26px; height: 14px; border: 1px solid rgba(215,173,93,.45); border-radius: 50%; }
.atlas-gesture i::after { content: ""; display: block; width: 3px; height: 3px; margin: 4px auto 0; border-radius: 50%; background: var(--gold); animation: gesture-dot 2.4s ease-in-out infinite; }
.atlas-corner { position: absolute; z-index: 3; width: 42px; height: 42px; border-color: var(--gold); opacity: .55; }
.atlas-corner-a { top: 2%; left: 0; border-top: 1px solid; border-left: 1px solid; }
.atlas-corner-b { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }
.globe-hud { position: absolute; z-index: 4; display: flex; align-items: center; font: 10px/1 var(--mono); letter-spacing: .14em; }
.globe-hud-top { top: 7%; left: 8%; gap: 9px; padding: 9px 12px; color: #d0d5d7; background: rgba(8,11,18,.72); border: 1px solid rgba(215,173,93,.22); backdrop-filter: blur(12px); }
.globe-hud-top b { margin-left: 4px; color: var(--gold); font-weight: 500; }
.signal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(214,75,53,.12); animation: signal 1.8s steps(2,end) infinite; }
.globe-hud-bottom { right: 7%; bottom: 9%; padding: 11px 13px; flex-direction: column; align-items: flex-end; gap: 8px; background: rgba(8,11,18,.72); border-right: 1px solid var(--gold); backdrop-filter: blur(12px); }
.globe-hud-bottom span { color: #78818a; }
.globe-hud-bottom strong { color: var(--bone); font: 13px/1 var(--serif); letter-spacing: .08em; }
.globe-orbit-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; color: #9ba4ad; font: 9px/1.45 var(--mono); letter-spacing: .08em; }
.globe-orbit-note i { width: 6px; height: 6px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(215,173,93,.08); }
.globe-orbit-note b { color: var(--gold); font-weight: 500; }
.note-a { left: 0; top: 62%; }
.note-b { right: 0; top: 31%; }
.note-c { right: 2%; top: 72%; }
.scroll-cue { position: absolute; left: 50%; bottom: 0; z-index: 5; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #59616b; font: 8px/1 var(--mono); letter-spacing: .18em; white-space: nowrap; }
.scroll-cue i { display: block; width: 1px; height: 32px; background: var(--gold-dark); transform-origin: top; animation: scroll-line 2s ease-in-out infinite; }

.fact-rail {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto 150px;
  padding: 26px 0;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact-rail > p { margin: 0; max-width: 310px; color: #89919a; font-size: 12px; line-height: 1.8; }
.fact-rail > p span { display: block; margin-bottom: 7px; color: var(--gold); font: 9px/1 var(--mono); letter-spacing: .22em; }
.fact-rail dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.fact-rail dl div { padding-left: 28px; border-left: 1px solid var(--line); }
.fact-rail dt { color: var(--bone); font: 36px/1 var(--serif); }
.fact-rail dd { margin: 9px 0 0; color: #89919a; font-size: 11px; letter-spacing: .05em; }

.section-index { margin: 0 0 20px; color: var(--red); font: 10px/1 var(--mono); letter-spacing: .22em; }
.manifesto, .method, .time-machine, .ages { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.manifesto { padding: 0 0 170px; }
.manifesto-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: end; }
.manifesto h2 { font-size: clamp(39px, 5vw, 70px); }
.manifesto h2 span { color: var(--gold); }
.manifesto-copy { padding-left: 34px; border-left: 1px solid var(--gold-dark); color: #aab1b9; font-size: 16px; line-height: 2; }
.manifesto-copy p { margin: 0; }
.manifesto-copy p + p { margin-top: 20px; }

.method { padding-bottom: 180px; }
.section-heading { max-width: 760px; margin-bottom: 70px; }
.section-heading h2, .time-copy h2, .ages h2 { font-size: clamp(40px, 5vw, 68px); }
.section-heading h2 span, .time-copy h2 span, .ages h2 span { color: var(--gold); }
.section-heading > p:last-child { max-width: 560px; margin: 23px 0 0; color: #9199a3; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.method-card { position: relative; min-width: 0; padding: 26px 28px 36px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(14,20,32,.62); overflow: hidden; }
.method-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--gold); transition: width .5s ease; }
.method-card:hover::after { width: 100%; }
.card-top { display: flex; justify-content: space-between; align-items: center; color: var(--gold); font: 10px/1 var(--mono); }
.card-top small { color: #59636e; letter-spacing: .16em; }
.method-card h3 { margin: 28px 0 10px; font: 26px/1.2 var(--serif); letter-spacing: .08em; }
.method-card > p { min-height: 84px; margin: 0; color: #9da5ae; font-size: 13px; line-height: 1.8; }
.method-card > ul { margin: 28px 0 0; padding: 19px 0 0; list-style: none; border-top: 1px solid rgba(215,173,93,.14); }
.method-card > ul li { position: relative; padding-left: 16px; color: #77818c; font-size: 11px; line-height: 2; }
.method-card > ul li::before { content: ""; position: absolute; left: 0; top: .9em; width: 4px; height: 4px; border: 1px solid var(--gold-dark); transform: rotate(45deg); }

.mini-map, .mini-time, .mini-proof { position: relative; height: 210px; margin: 24px -2px 0; border: 1px solid rgba(120,195,200,.14); background: #0a1019; overflow: hidden; }
.map-grid { position: absolute; inset: 0; opacity: .22; background-size: 32px 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0H32M0 0V32' fill='none' stroke='%2378c3c8' stroke-opacity='.45'/%3E%3C/svg%3E"); }
.mini-map::before { content: ""; position: absolute; inset: 34px 40px; border: 1px solid rgba(120,195,200,.3); border-radius: 50%; transform: rotate(-12deg); }
.mini-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-map path { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-dasharray: 5 8; vector-effect: non-scaling-stroke; animation: dash 6s linear infinite; }
.pin { position: absolute; z-index: 2; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(215,173,93,.08); }
.pin-a { left: 18%; top: 65%; }.pin-b { left: 55%; top: 50%; }.pin-c { right: 10%; top: 23%; }
.mini-time { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; padding: 0 25px; }
.mini-time::before { content: ""; position: absolute; left: 25px; right: 25px; top: 50%; height: 1px; background: #36404c; }
.mini-time > b { position: relative; color: #626d78; font: 9px/1 var(--mono); font-weight: 400; }
.mini-time > b:nth-child(2) { text-align: center; color: var(--gold); }
.mini-time > b:nth-child(3) { text-align: right; }
.mini-time > i { position: absolute; left: 50%; top: 38px; bottom: 38px; width: 1px; background: var(--gold); }
.mini-time > em { position: absolute; left: calc(50% - 6px); top: calc(50% - 6px); width: 13px; height: 13px; border: 2px solid var(--gold); background: #0a1019; transform: rotate(45deg); }
.mini-time > div { position: absolute; left: 18px; right: 18px; bottom: 24px; display: flex; justify-content: space-between; color: #78838e; font: 9px/1 var(--mono); }
.mini-proof { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.mini-proof blockquote { margin: 0; color: var(--paper); font: 19px/1.7 var(--serif); }
.mini-proof > div { margin: 20px 0 10px; display: flex; align-items: center; color: var(--gold); font: 9px/1 var(--mono); }
.mini-proof > div i { flex: 1; height: 1px; margin: 0 10px; background: var(--gold-dark); }
.mini-proof > small { color: #68737f; font: 9px/1 var(--mono); }

.product-showcase {
  position: relative;
  min-height: 790px;
  margin-top: 20px;
  isolation: isolate;
}
.inspection-light {
  position: absolute;
  left: 2%;
  top: 2%;
  z-index: 5;
  width: 86%;
  aspect-ratio: 1.44;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
.inspection-light::before {
  content: "";
  position: absolute;
  inset: -55% auto -55% -34%;
  width: 20%;
  background: linear-gradient(90deg, transparent, rgba(236,211,148,.22), rgba(190,245,241,.09), transparent);
  transform: skewX(-16deg);
  animation: inspect 8.5s cubic-bezier(.55,0,.25,1) infinite;
}
.inspection-light::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(120,195,200,.06); box-shadow: inset 0 0 55px rgba(120,195,200,.05); }
.product-showcase::before {
  content: "";
  position: absolute;
  left: 7%;
  top: -34px;
  width: 1px;
  height: 112px;
  background: var(--gold-dark);
}
.product-showcase::after {
  content: "电子课本实际界面";
  position: absolute;
  left: calc(7% - 7px);
  top: -52px;
  color: #616b75;
  font: 8px/1 var(--mono);
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}
.product-shot { margin: 0; overflow: hidden; background: #060a10; }
.product-shot picture { display: block; width: 100%; height: 100%; }
.product-shot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-shot figcaption { position: absolute; z-index: 3; padding: 10px 14px; background: #0b1019; color: var(--gold); border: 1px solid var(--gold-dark); font: 9px/1 var(--mono); letter-spacing: .13em; }
.product-shot-desktop { position: absolute; left: 4%; top: 38px; width: 85%; aspect-ratio: 1.44; border: 1px solid rgba(215,173,93,.32); box-shadow: 28px 34px 0 #0c111a, 28px 34px 0 1px rgba(215,173,93,.12); }
.product-shot-desktop figcaption { left: 20px; bottom: 20px; }
.product-shot-mobile { position: absolute; right: 2%; bottom: 6px; z-index: 4; width: 22%; aspect-ratio: 390 / 844; border: 6px solid #111722; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.62); }
.product-shot-mobile img { border-radius: 21px; }
.product-shot-mobile figcaption { top: 18px; left: -74px; white-space: nowrap; }
.showcase-note { position: absolute; z-index: 6; min-width: 154px; padding: 13px 15px; display: grid; grid-template-columns: 27px 1fr; background: rgba(8,11,18,.9); border: 1px solid rgba(215,173,93,.36); backdrop-filter: blur(12px); }
.showcase-note span { grid-row: 1 / span 2; color: var(--red); font: 9px/1.4 var(--mono); }
.showcase-note b { font: 15px/1.2 var(--serif); letter-spacing: .08em; }
.showcase-note small { margin-top: 5px; color: #808995; font-size: 9px; }
.note-lesson { left: 0; top: 25%; }.note-globe { left: 43%; top: 4%; }.note-assistant { right: 0; top: 46%; }
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-steps article { min-height: 150px; padding: 30px 26px; display: flex; gap: 20px; border-right: 1px solid var(--line); }
.method-steps article:last-child { border-right: 0; }
.method-steps article > span { color: var(--red); font: 13px/1 var(--serif); }
.method-steps h3 { margin: 0 0 9px; font: 22px/1 var(--serif); letter-spacing: .09em; }
.method-steps p { margin: 0; color: #7e8791; font-size: 12px; }

.time-machine { min-height: 760px; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(55px, 9vw, 130px); padding-bottom: 150px; }
.time-copy > p:not(.section-index) { max-width: 460px; margin: 30px 0; color: #959ea8; line-height: 1.9; }
.era-facts { display: grid; grid-template-columns: 1fr 1.4fr; margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.era-facts div { padding: 20px 0; }
.era-facts div + div { padding-left: 25px; border-left: 1px solid var(--line); }
.era-facts small { display: block; margin-bottom: 8px; color: #69737e; font: 9px/1 var(--mono); letter-spacing: .12em; }
.era-facts strong { color: var(--gold); font: 19px/1.2 var(--serif); }
.timeline-stage { position: relative; min-height: 490px; padding: 300px 25px 25px; border: 1px solid var(--line); background: #0b111c; overflow: hidden; }
.era-aura { position: absolute; inset: 0; pointer-events: none; opacity: .9; transform: rotate(calc(-18deg + var(--era-index, 2) * 9deg)); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.era-aura::before { content: ""; position: absolute; left: 50%; top: 32%; width: 75%; aspect-ratio: 1; border: 1px solid rgba(120,195,200,.13); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 80px rgba(120,195,200,.06); }
.era-aura i { position: absolute; left: 50%; top: 32%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); transform-origin: 0 0; }
.era-aura i:nth-child(1) { transform: rotate(18deg) translateX(170px); }
.era-aura i:nth-child(2) { background: var(--cyan); transform: rotate(142deg) translateX(145px); }
.era-aura i:nth-child(3) { background: var(--red); transform: rotate(252deg) translateX(118px); }
.timeline-stage::before { content: ""; position: absolute; inset: 0; background-size: 38px 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M0 0H38M0 0V38' fill='none' stroke='%2378c3c8' stroke-opacity='.12'/%3E%3C/svg%3E"); }
.year-ghost { position: absolute; top: 9px; left: 18px; color: rgba(215,173,93,.075); font: 180px/.9 var(--serif); letter-spacing: -.08em; white-space: nowrap; }
.timeline-route { position: absolute; left: 10%; right: 10%; top: 170px; height: 90px; border-top: 1px dashed rgba(120,195,200,.44); border-radius: 50%; transform: rotate(-5deg); }
.timeline-route i, .timeline-route span, .timeline-route b { position: absolute; width: 8px; height: 8px; border-radius: 50%; }
.timeline-route i { left: 0; top: -4px; background: var(--red); }
.timeline-route span { left: 52%; top: -18px; background: var(--gold); box-shadow: 0 0 0 8px rgba(215,173,93,.08); }
.timeline-route b { right: 0; top: -4px; background: var(--cyan); }
.timeline-stage label { position: relative; display: block; margin-bottom: 15px; color: #6f7984; font: 9px/1 var(--mono); letter-spacing: .1em; }
.timeline-stage input[type="range"] { position: relative; z-index: 2; width: 100%; height: 44px; margin: -8px 0; background: transparent; cursor: ew-resize; appearance: none; }
.timeline-stage input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: #6d603e; }
.timeline-stage input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -7.5px; border: 3px solid #0b111c; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); appearance: none; }
.timeline-stage input[type="range"]::-moz-range-track { height: 1px; background: #6d603e; }
.timeline-stage input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #0b111c; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.timeline-ticks { position: relative; display: flex; justify-content: space-between; color: #58636e; font: 8px/1 var(--mono); }
.era-card { position: relative; margin-top: 24px; padding: 18px 20px; border-left: 2px solid var(--gold); background: rgba(21,29,42,.74); }
.era-card > span { color: var(--red); font: 9px/1 var(--mono); }
.era-card h3 { margin: 9px 0 6px; font: 18px/1.35 var(--serif); }
.era-card p { margin: 0; color: #7f8994; font: 9px/1.5 var(--mono); }

.evidence { position: relative; isolation: isolate; overflow: hidden; padding: 150px max(24px, calc((100vw - var(--max)) / 2)); background: var(--paper); color: var(--ink); }
.evidence > *:not(.paper-light) { position: relative; z-index: 2; }
.paper-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.paper-light::before { content: ""; position: absolute; inset: 0; opacity: .42; background: repeating-linear-gradient(103deg, transparent 0 48px, rgba(95,67,35,.035) 49px, transparent 50px 96px); }
.paper-light i { position: absolute; left: 50%; top: -20%; width: 1px; height: 150%; background: linear-gradient(transparent, rgba(142,99,46,.2), transparent); transform-origin: top; }
.paper-light i:nth-child(1) { transform: rotate(23deg); }
.paper-light i:nth-child(2) { transform: rotate(38deg); opacity: .45; }
.paper-light i:nth-child(3) { transform: rotate(-27deg); opacity: .28; }
.paper-light::after { content: ""; position: absolute; left: 50%; top: 0; width: 62vw; height: 40vw; background: radial-gradient(ellipse, rgba(255,250,227,.85), transparent 68%); transform: translate(-50%,-42%); }
.section-heading-light { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading-light h2 span { display: block; color: #8e632e; }
.section-heading-light > p:last-child { margin-left: auto; margin-right: auto; color: #5f625e; }
.evidence-stage { display: grid; grid-template-columns: .83fr 1.17fr; gap: clamp(50px, 8vw, 120px); align-items: center; max-width: var(--max); margin: 80px auto 0; }
.book-stack { min-height: 550px; padding: 55px 25px 0; display: flex; align-items: flex-end; justify-content: center; gap: 5px; border-bottom: 7px solid #9e7a42; perspective: 900px; }
.book { width: 22%; min-width: 62px; height: 330px; padding: 22px 12px; display: flex; flex-direction: column; align-items: center; color: var(--paper); border: 1px solid rgba(20,32,42,.26); box-shadow: 7px 0 0 rgba(20,32,42,.11); writing-mode: vertical-rl; transform-origin: bottom; transition: transform .4s ease; }
.book:hover { transform: translateY(-18px) rotateY(-4deg); }
.book small { font: 9px/1 var(--mono); letter-spacing: .12em; }
.book strong { margin: 24px 0; font: 19px/1.2 var(--serif); letter-spacing: .15em; }
.book span { color: rgba(236,226,201,.62); font-size: 10px; }
.book-a { height: 380px; background: #263f43; }.book-b { height: 410px; background: #7a3329; }.book-c { height: 350px; background: #28364a; }.book-d { height: 390px; background: #40342c; }
.shelf-note { position: absolute; margin: 0 0 -54px; color: #706958; font: 10px/1 var(--mono); letter-spacing: .08em; }
.shelf-note i { display: inline-block; width: 30px; height: 1px; margin: 0 9px 3px 0; background: #9e7a42; }
.answer-demo { border: 1px solid rgba(20,32,42,.18); background: #f5edda; box-shadow: 14px 14px 0 rgba(122,91,43,.12); }
.answer-demo > header { min-height: 78px; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(20,32,42,.14); }
.xiaobei-mark { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--ink); color: var(--gold); font: 20px/1 var(--serif); }
.answer-demo header > div:nth-child(2) { display: flex; flex-direction: column; }
.answer-demo header b { font-family: var(--serif); }
.answer-demo header span { color: #7a7467; font: 9px/1.8 var(--mono); }
.online { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #3e8a74; box-shadow: 0 0 0 5px rgba(62,138,116,.1); }
.question { margin: 22px 20px 0 75px; padding: 13px 16px; background: #dfd3b8; color: #33352f; font-size: 13px; }
.answer { padding: 22px 30px 14px; }
.answer p { margin: 0 0 13px; color: #343934; font-family: var(--serif); font-size: 15px; line-height: 1.9; }
.citation-chip { min-height: 44px; margin: 8px 4px 0 0; padding: 0 12px; border: 1px solid #b9a783; background: transparent; color: #5f5a4f; cursor: pointer; font-size: 10px; }
.citation-chip span { margin-right: 7px; color: #9b4b36; font: 9px/1 var(--mono); }
.citation-chip.is-active { border-color: #9b4b36; color: #722f24; background: rgba(155,75,54,.05); }
.citation-panel { margin: 8px 20px 20px; padding: 18px 20px; border-left: 2px solid #9b4b36; background: #e7dcc2; }
.citation-panel > span { color: #9b4b36; font: 9px/1 var(--mono); letter-spacing: .1em; }
.citation-panel blockquote { margin: 11px 0; color: #28332f; font: 16px/1.8 var(--serif); }
.citation-panel small { color: #777062; font: 9px/1 var(--mono); }

.ages { padding: 170px 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(60px, 9vw, 130px); align-items: center; }
.ages-intro > p:last-child { max-width: 490px; margin: 28px 0 0; color: #8d96a0; line-height: 1.9; }
.age-console { position: relative; border: 1px solid var(--line); background: #0c121c; box-shadow: 0 35px 80px rgba(0,0,0,.22), inset 0 0 80px rgba(120,195,200,.025); overflow: hidden; }
.age-console::before { content: ""; position: absolute; inset: -80% -40%; pointer-events: none; background: conic-gradient(from 180deg, transparent, rgba(215,173,93,.08), transparent 19%, rgba(120,195,200,.06), transparent 42%); animation: console-light 16s linear infinite; }
.age-console > * { position: relative; z-index: 1; }
.age-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.age-tabs button { min-height: 58px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #747e89; cursor: pointer; font-size: 11px; }
.age-tabs button:last-child { border-right: 0; }
.age-tabs button[aria-selected="true"] { background: var(--gold); color: #15120c; }
.age-answer { min-height: 310px; padding: 45px 44px 35px; }
.age-answer > small { color: var(--red); font: 9px/1 var(--mono); letter-spacing: .12em; }
.age-answer h3 { margin: 18px 0; color: var(--bone); font: 23px/1.4 var(--serif); }
.age-answer p { min-height: 104px; margin: 0; color: #a5adb5; font-size: 14px; line-height: 1.9; }
.answer-depth { margin-top: 28px; }
.answer-depth::before { content: ""; display: block; width: 100%; height: 2px; background: #27303b; }
.answer-depth span { display: block; width: var(--depth); height: 2px; margin-top: -2px; background: var(--gold); transition: width .5s ease; }
.answer-depth small { display: block; margin-top: 9px; color: #5e6873; font: 8px/1 var(--mono); letter-spacing: .1em; }
.age-lock { min-height: 62px; display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-top: 1px solid var(--line); color: #78828c; font-size: 10px; }
.age-lock i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--gold-dark); border-radius: 50%; color: var(--gold); font-style: normal; }
.age-lock b { display: block; color: var(--gold); font-size: 9px; letter-spacing: .12em; }

.closing { position: relative; min-height: 760px; padding: 150px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; border-top: 1px solid var(--line); }
.closing::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(740px, 86vw); aspect-ratio: 1; border: 1px solid rgba(215,173,93,.12); border-radius: 50%; transform: translate(-50%,-50%); }
.closing::after { content: ""; position: absolute; left: 50%; top: 49%; width: min(520px, 74vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(215,173,93,.1), transparent 62%); box-shadow: 0 0 130px rgba(120,195,200,.055); transform: translate(-50%,-50%); animation: closing-light 5s ease-in-out infinite alternate; }
.closing > * { z-index: 1; }
.closing h2 { position: relative; font-size: clamp(49px, 6.3vw, 88px); }
.closing h2 em { color: var(--gold); font-style: normal; }
.closing > p:not(.kicker) { position: relative; margin: 25px 0 34px; color: #858e98; }
.closing .button { position: relative; }
.closing > small { position: relative; margin-top: 17px; color: #59626d; font: 9px/1 var(--mono); }
.closing-orbit { position: absolute; left: 50%; top: 50%; width: min(630px, 72vw); aspect-ratio: 1; border: 1px dashed rgba(120,195,200,.12); border-radius: 50%; transform: translate(-50%,-50%) rotate(-12deg); animation: slow-spin 30s linear infinite; }
.closing-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.closing-orbit i:nth-child(1) { left: 13%; top: 20%; }.closing-orbit i:nth-child(2) { right: 7%; top: 48%; background: var(--red); }.closing-orbit i:nth-child(3) { left: 42%; bottom: -4px; background: var(--cyan); }
.closing-orbit b { position: absolute; left: 50%; top: -17px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--gold-dark); border-radius: 50%; background: var(--night); color: var(--gold); font: 14px/1 var(--serif); transform: rotate(12deg); }

footer { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; min-height: 145px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--line); }
.brand-footer .brand-seal { width: 36px; height: 36px; }
.brand-footer .brand-words b { font-size: 15px; }
footer > p { color: #6c7580; font-family: var(--serif); font-size: 12px; letter-spacing: .12em; }
footer > div { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: #78818b; font: 9px/1 var(--mono); }
footer > div a { min-height: 44px; display: inline-flex; align-items: center; color: var(--gold); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes signal { 50% { opacity: .35; } }
@keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes dash { to { stroke-dashoffset: -52; } }
@keyframes slow-spin { to { transform: translate(-50%,-50%) rotate(348deg); } }
@keyframes globe-breathe { from { transform: scale(1.02); } to { transform: scale(1.075); } }
@keyframes aperture-arrival { 0% { opacity: 0; transform: scaleX(.08); } 20% { opacity: 1; } 62% { opacity: .95; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.12); } }
@keyframes aperture-core { 0% { opacity: 0; transform: scale(.02); } 36% { opacity: 1; transform: scale(.14); } 72% { opacity: .85; transform: scale(.05); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes ring-drift { to { transform: translate(-50%,-50%) rotate(342deg); } }
@keyframes ring-drift-reverse { to { transform: translate(-50%,-50%) rotate(342deg); } }
@keyframes ring-breathe { to { opacity: .32; transform: translate(-50%,-50%) rotate(-12deg) scale(1.04); } }
@keyframes atlas-scan { 0%, 15% { transform: translateY(0); opacity: 0; } 25% { opacity: .6; } 70% { opacity: .42; } 82%, 100% { transform: translateY(650%); opacity: 0; } }
@keyframes gesture-dot { 0%, 100% { transform: translateX(-7px); opacity: .4; } 50% { transform: translateX(7px); opacity: 1; } }
@keyframes inspect { 0%, 17% { transform: translateX(0) skewX(-16deg); opacity: 0; } 26% { opacity: 1; } 68% { opacity: .72; } 81%, 100% { transform: translateX(720%) skewX(-16deg); opacity: 0; } }
@keyframes console-light { to { transform: rotate(360deg); } }
@keyframes closing-light { to { opacity: .55; transform: translate(-50%,-50%) scale(1.08); } }

@media (max-width: 1040px) {
  :root { --header-h: 72px; }
  .header-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero-atlas { min-height: 610px; }
  .hero h1 { font-size: clamp(46px, 6.3vw, 68px); }
  .method-card { padding-left: 20px; padding-right: 20px; }
  .evidence-stage { gap: 42px; }
  .chapter-rail { display: none; }
}

@media (max-width: 820px) {
  body::after { background-size: 54px 54px; }
  .site-header { padding: 0 20px; }
  .site-header .button span:first-child { display: inline; }
  .site-header .button { width: auto; min-height: 44px; padding: 0 13px; }
  .hero { width: 100%; min-height: auto; grid-template-columns: 1fr; gap: 0; padding: var(--header-h) 0 62px; }
  .hero-copy { position: relative; z-index: 8; }
  .hero h1 { font-size: clamp(46px, 12.5vw, 72px); }
  .hero-lead { margin-top: 22px; }
  .hero-atlas { order: -1; min-height: min(650px, 78svh); margin: 0; }
  .product-globe-frame { inset: 0 4%; }
  .product-showcase { min-height: 620px; }
  .product-shot-desktop { left: 0; width: 91%; }
  .product-shot-mobile { width: 28%; right: 0; }
  .hero-points { margin-top: 38px; }
  .fact-rail { margin-bottom: 110px; grid-template-columns: 1fr; gap: 26px; }
  .fact-rail dl { margin-left: 0; }
  .manifesto-grid, .time-machine, .ages, .evidence-stage { grid-template-columns: 1fr; }
  .manifesto-grid { gap: 38px; }
  .manifesto-copy { max-width: 610px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 30px; align-items: start; }
  .method-card .card-top, .method-card h3, .method-card > p, .method-card > ul { grid-column: 2; }
  .method-card .card-top { grid-row: 1; }
  .method-card .mini-map, .method-card .mini-time, .method-card .mini-proof { grid-column: 1; grid-row: 1 / span 4; height: 100%; min-height: 280px; margin: 0; }
  .method-card h3 { margin-top: 32px; }
  .method-steps { grid-template-columns: 1fr; }
  .method-steps article { min-height: 112px; border-right: 0; border-bottom: 1px solid var(--line); }
  .method-steps article:last-child { border-bottom: 0; }
  .time-machine { gap: 52px; }
  .timeline-stage { min-height: 480px; }
  .evidence { padding-top: 110px; padding-bottom: 110px; }
  .book-stack { max-width: 560px; width: 100%; margin: 0 auto; }
  .answer-demo { max-width: 650px; margin: 0 auto; }
  .ages { gap: 60px; }
  footer { grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 0; }
  footer > p { display: none; }
  .atlas-light-canvas { inset: 0; height: 100%; }
  .atlas-rings { inset: 1% -6%; }
  .atlas-gesture { left: 20px; bottom: 122px; }
  .inspection-light { left: 0; top: 22px; width: 91%; }
}

@media (max-width: 560px) {
  :root { --header-h: 66px; }
  .site-header { padding: 0 16px; }
  .brand { gap: 9px; }
  .brand-seal { width: 37px; height: 37px; }
  .brand-words b { font-size: 16px; }
  .brand-words small { font-size: 7px; }
  .hero { width: 100%; padding-top: var(--header-h); padding-bottom: 54px; }
  .fact-rail, .manifesto, .method, .time-machine, .ages, footer { width: calc(100% - 32px); }
  .hero-copy { width: calc(100% - 32px); margin: -108px auto 0; padding: 27px 20px 0; background: rgba(8,11,18,.96); border-top: 1px solid var(--gold); box-shadow: 0 -28px 50px rgba(8,11,18,.72); }
  .kicker { margin-bottom: 17px; font-size: 9px; letter-spacing: .1em; }
  .kicker span { width: 20px; margin-right: 8px; }
  .hero h1 { font-size: clamp(42px, 13.1vw, 58px); line-height: 1.08; }
  .hero-lead { margin: 18px 0 22px; font-size: 14px; line-height: 1.8; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 11px; }
  .hero-actions .text-link { display: none; }
  .hero-points { grid-template-columns: repeat(3, 1fr); margin-top: 27px; }
  .hero-points li, .hero-points li + li { padding: 13px 8px 0; display: flex; border-left: 1px solid var(--line); border-bottom: 0; }
  .hero-points li:first-child { padding-left: 0; border-left: 0; }
  .hero-points b { font-size: 14px; }
  .hero-points span { margin-top: 3px; font-size: 9px; line-height: 1.45; }
  .hero-atlas { min-height: clamp(430px, 64svh, 560px); margin: 0; }
  .hero-atlas::before { display: none; }
  .product-globe-frame { inset: 0; border-width: 0 0 1px; border-radius: 0 0 48% 48% / 0 0 10% 10%; box-shadow: none; }
  .product-globe-frame::after { border-width: 0 10px 10px; }
  .product-globe-frame img { object-position: 50% 42%; filter: saturate(.88) contrast(1.05) brightness(.78); }
  .product-globe-frame { transform: none; transition: clip-path 1.5s cubic-bezier(.22,.78,.16,1); }
  .product-globe-frame figcaption { left: 16px; bottom: 116px; }
  .hero-route-trace { inset: 6% 0 15%; width: 100%; height: 79%; }
  .globe-hud-top { top: 20px; left: 16px; }
  .globe-orbit-note { font-size: 7px; }
  .note-a, .note-c { display: none; }.note-b { right: 10px; top: 36%; }
  .globe-hud-bottom { right: 16px; bottom: 128px; }
  .atlas-corner { display: none; }
  .atlas-lens-b, .atlas-rings i:nth-child(3) { display: none; }
  .atlas-rings i:nth-child(1) { width: 112%; }
  .atlas-rings i:nth-child(2) { width: 86%; }
  .atlas-spectrum { inset: 0; border-radius: 0 0 48% 48% / 0 0 10% 10%; }
  .atlas-scan { inset: 0; border-radius: 0 0 48% 48% / 0 0 10% 10%; }
  .atlas-gesture { left: 16px; bottom: 123px; font-size: 7px; }
  .scroll-cue { display: none; }
  .fact-rail { margin-bottom: 92px; }
  .fact-rail dl { grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .fact-rail dl div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 0; }
  .fact-rail dt { font-size: 31px; }
  .manifesto { padding-bottom: 110px; }
  .manifesto h2, .section-heading h2, .time-copy h2, .ages h2 { font-size: clamp(36px, 9.8vw, 48px); }
  .manifesto-copy { padding-left: 20px; font-size: 14px; }
  .method { padding-bottom: 120px; }
  .section-heading { margin-bottom: 45px; }
  .product-showcase { min-height: 540px; margin: 0 -2px 18px; }
  .product-showcase::before { left: 7px; top: -18px; height: 72px; }
  .product-showcase::after { display: none; }
  .product-shot-desktop { left: 0; top: 22px; width: 100%; aspect-ratio: 1.44; border-color: rgba(215,173,93,.42); box-shadow: 10px 12px 0 #0c111a; }
  .product-shot-desktop figcaption { left: 10px; bottom: 10px; }
  .product-shot-mobile { top: 176px; right: 9px; bottom: auto; width: 39%; border-width: 4px; border-radius: 20px; }
  .product-shot-mobile img { border-radius: 15px; }
  .product-shot-mobile figcaption { display: none; }
  .showcase-note { min-width: 142px; padding: 11px 12px; }
  .note-lesson { left: -5px; top: 205px; }.note-globe { left: 35%; top: 3px; }.note-assistant { left: 3px; right: auto; top: 366px; }
  .method-steps article { padding: 25px 12px; }
  .method-card { display: block; padding: 20px 20px 28px; }
  .method-card .mini-map, .method-card .mini-time, .method-card .mini-proof { height: 210px; min-height: 0; margin-top: 20px; }
  .method-card h3 { margin-top: 22px; }
  .method-card > p { min-height: 0; }
  .time-machine { min-height: auto; padding-bottom: 110px; }
  .era-facts { grid-template-columns: .8fr 1.2fr; }
  .era-facts strong { font-size: 16px; }
  .timeline-stage { min-height: 420px; padding: 250px 18px 18px; }
  .year-ghost { font-size: 120px; top: 24px; }
  .timeline-route { top: 145px; }
  .timeline-ticks { font-size: 7px; }
  .evidence { padding-left: 16px; padding-right: 16px; }
  .book-stack { min-height: 420px; padding-left: 4px; padding-right: 4px; }
  .book { height: 270px; padding: 15px 7px; }
  .book-a { height: 300px; }.book-b { height: 330px; }.book-c { height: 275px; }.book-d { height: 315px; }
  .book strong { font-size: 15px; }
  .question { margin-left: 35px; }
  .answer { padding: 20px 18px 12px; }
  .citation-chip { width: 100%; margin-right: 0; text-align: left; }
  .citation-panel { margin-left: 12px; margin-right: 12px; }
  .age-tabs { grid-template-columns: 1fr 1fr; }
  .age-tabs button:nth-child(2) { border-right: 0; }
  .age-tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .age-answer { min-height: 340px; padding: 32px 24px 26px; }
  .age-answer p { min-height: 150px; }
  .closing { min-height: 670px; padding-left: 16px; padding-right: 16px; }
  .closing h2 { font-size: clamp(43px, 13vw, 64px); }
  .closing > p:not(.kicker) { font-size: 12px; }
  .closing .button { width: min(100%, 350px); }
  footer { grid-template-columns: 1fr; }
  footer > div { justify-self: start; align-items: flex-start; }
}

@media (max-width: 350px) {
  .brand-words small { display: none; }
  .hero h1 { font-size: 39px; }
  .hero-lead { font-size: 14px; }
  .hero-atlas { min-height: 430px; }
  .age-tabs button { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .atlas-light-canvas, .atlas-aperture, .atlas-scan, .atlas-gesture { display: none; }
  .js:not(.is-ready) .product-globe-frame { clip-path: none; filter: none; }
}

@media (max-width: 820px), (update: slow) {
  .site-header.is-scrolled, .globe-hud, .showcase-note { backdrop-filter: none; }
  .atlas-lens-a { box-shadow: 0 0 8px #fff, 0 0 30px rgba(215,173,93,.48); }
  .age-console::before { display: none; }
  .closing::after { box-shadow: none; }
}

:root[data-visual-quality="static"] .atlas-light-canvas,
:root[data-visual-quality="static"] .atlas-aperture,
:root[data-visual-quality="static"] .atlas-scan,
:root[data-visual-quality="static"] .atlas-gesture { display: none; }

@supports not (backdrop-filter: blur(18px)) {
  .site-header.is-scrolled { background: #080b12; }
}