:root {
  --teal: #5EEAD4;
  --walnut: #21140F;
  --parchment: #D8C7A3;
  --ember: #F29A38;
  --orange: #C65A1E;
  --obsidian: #090706;
  --oxblood: #5A1F18;
  --violet: #31243D;
  --display: 'Bungee Shade', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --body: 'IBM Plex Serif', Georgia, serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

/* DESIGN FONT TOKENS: IBM Plex Serif** Serif* for readable paragraphs with a research-note cadence. Interface and annotation type: **Space Mono** Mono* for HUD labels; coordinates update in the corners. Space Mono diagnostics. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--parchment);
  background: var(--obsidian);
  font-family: var(--body);
  overflow-x: hidden;
}

.font-sentinel {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(242,154,56,.28), transparent 22rem),
    radial-gradient(circle at 18% 82%, rgba(90,31,24,.68), transparent 34rem),
    radial-gradient(circle at 76% 22%, rgba(49,36,61,.7), transparent 36rem),
    linear-gradient(125deg, var(--obsidian), var(--walnut) 48%, #120906);
  z-index: -4;
  transition: background-position .3s ease;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  z-index: 20;
  background-image: repeating-radial-gradient(circle at 12% 18%, rgba(216,199,163,.18) 0 1px, transparent 1px 4px), repeating-linear-gradient(97deg, transparent 0 7px, rgba(216,199,163,.08) 7px 8px);
  mix-blend-mode: overlay;
}

.cursor-glow {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(242,154,56,.24), rgba(198,90,30,.10) 38%, transparent 70%);
  filter: blur(8px);
  z-index: 2;
}

.hud-frame { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.corner { position: absolute; width: 5.6rem; height: 5.6rem; border-color: rgba(242,154,56,.72); }
.corner-tl { top: 1.1rem; left: 1.1rem; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 1.1rem; right: 1.1rem; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 1.1rem; left: 1.1rem; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: 1.1rem; right: 1.1rem; border-bottom: 1px solid; border-right: 1px solid; }
.rule { position: absolute; background: repeating-linear-gradient(90deg, rgba(242,154,56,.42) 0 1px, transparent 1px 18px); opacity: .75; }
.rule-top, .rule-bottom { left: 8rem; right: 8rem; height: 1px; }
.rule-top { top: 2.2rem; } .rule-bottom { bottom: 2.2rem; }
.rule-left, .rule-right { top: 8rem; bottom: 8rem; width: 1px; background: repeating-linear-gradient(0deg, rgba(242,154,56,.42) 0 1px, transparent 1px 18px); }
.rule-left { left: 2.2rem; } .rule-right { right: 2.2rem; }
.coord { position: absolute; font: 700 .68rem/1 var(--mono); color: rgba(94,234,212,.86); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(94,234,212,.45); }
.coord-nw { top: 3rem; left: 3rem; } .coord-ne { top: 3rem; right: 3rem; }
.coord-sw { bottom: 3rem; left: 3rem; } .coord-se { bottom: 3rem; right: 3rem; }
.aperture { position: fixed; left: 50%; top: 50%; width: min(44vw, 34rem); aspect-ratio: 1; margin: -17rem 0 0 min(-22vw, -17rem); border: 1px solid rgba(242,154,56,.34); border-radius: 50%; animation: apertureSpin 36s linear infinite; }
.aperture::before, .aperture::after, .aperture span { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(216,199,163,.18); border-radius: 50%; }
.aperture::after { inset: 34%; border-style: solid; border-color: rgba(94,234,212,.25); }
.aperture span { inset: -1px 50%; width: 1px; border: 0; background: linear-gradient(transparent, rgba(242,154,56,.55), transparent); }

.annotation-rail { position: fixed; z-index: 12; right: 3rem; top: 50%; transform: translateY(-50%); display: grid; gap: .9rem; padding: 1rem .9rem; border-left: 1px solid rgba(242,154,56,.35); background: linear-gradient(90deg, transparent, rgba(9,7,6,.34)); }
.annotation-rail a, .rail-title { font-family: var(--mono); font-size: .67rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(216,199,163,.68); text-decoration: none; writing-mode: vertical-rl; }
.rail-title { color: var(--ember); }

.chamber { min-height: 100vh; position: relative; display: grid; align-items: center; padding: 8rem clamp(2rem, 6vw, 7rem); overflow: hidden; isolation: isolate; }
.mesh { position: absolute; inset: -20%; z-index: -3; filter: blur(36px); opacity: .78; animation: meshDrift 22s ease-in-out infinite alternate; }
.mesh-ember { background: radial-gradient(circle at 22% 62%, var(--orange), transparent 30%), radial-gradient(circle at 72% 32%, var(--violet), transparent 35%), radial-gradient(circle at 46% 80%, var(--oxblood), transparent 34%); }
.mesh-oxblood { background: radial-gradient(circle at 18% 20%, var(--oxblood), transparent 35%), radial-gradient(circle at 72% 72%, var(--orange), transparent 28%); }
.mesh-violet { background: radial-gradient(circle at 50% 45%, var(--violet), transparent 38%), radial-gradient(circle at 20% 72%, var(--orange), transparent 24%); }
.mesh-glass { background: radial-gradient(circle at 70% 30%, rgba(94,234,212,.5), transparent 22%), radial-gradient(circle at 42% 62%, var(--orange), transparent 30%); }
.mesh-seal { background: radial-gradient(circle at 50% 50%, var(--ember), transparent 25%), radial-gradient(circle at 48% 52%, var(--oxblood), transparent 48%); }
.desk-shadow { position: absolute; inset: 8% -10%; background: linear-gradient(115deg, transparent 18%, rgba(33,20,15,.75) 19% 48%, transparent 49%); z-index: -2; }

.wordmark-wrap { align-self: end; max-width: 64rem; transform: translateY(-7vh); }
.kicker, .folio, .diagnostic, .chapter-number { font: 700 .75rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.wordmark { margin: .3rem 0; font-family: var(--display); font-size: clamp(4.8rem, 15vw, 13.5rem); line-height: .86; color: var(--ember); text-shadow: 0 0 28px rgba(242,154,56,.55), 0 14px 0 rgba(90,31,24,.35); }
.scan-text { position: relative; animation: scanReveal 2.4s ease both; }
.scan-text::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8%; background: linear-gradient(90deg, transparent, rgba(94,234,212,.85), transparent); box-shadow: 0 0 24px var(--teal); animation: scanner 4.8s ease-in-out infinite; }
.theorem { max-width: 48rem; font: italic 600 clamp(1.55rem, 3vw, 2.55rem)/1.05 var(--serif); color: rgba(216,199,163,.92); }

.float-field { position: absolute; inset: 0; pointer-events: none; perspective: 900px; }
.slip { position: absolute; min-width: 10rem; padding: .9rem 1rem; color: var(--walnut); background: linear-gradient(135deg, rgba(216,199,163,.95), rgba(216,199,163,.62)); border: 1px solid rgba(242,154,56,.38); box-shadow: 0 18px 50px rgba(0,0,0,.45); font: 700 .82rem var(--mono); text-transform: uppercase; letter-spacing: .14em; animation: float 9s ease-in-out infinite; }
.slip span { color: var(--orange); margin-right: .7rem; }
.slip-a { left: 58%; top: 24%; transform: rotate(-7deg); }
.slip-b { left: 72%; top: 58%; animation-delay: -2s; transform: rotate(9deg); }
.slip-c { left: 18%; top: 24%; animation-delay: -4s; transform: rotate(5deg); }
.slip-d { left: 44%; top: 72%; animation-delay: -6s; transform: rotate(-11deg); }

.manuscript-stack { position: relative; width: min(62rem, 78vw); min-height: 32rem; }
.vellum { position: absolute; padding: clamp(1.4rem, 3vw, 3rem); background: linear-gradient(135deg, rgba(216,199,163,.9), rgba(216,199,163,.54)); color: var(--walnut); border: 1px solid rgba(242,154,56,.45); box-shadow: 0 35px 90px rgba(0,0,0,.5); backdrop-filter: blur(5px); }
.vellum-large { left: 5%; top: 8%; width: min(43rem, 68vw); transform: rotate(-2.5deg); }
.vellum-small { right: 0; bottom: 0; width: min(30rem, 52vw); transform: rotate(4deg); }
h2 { margin: .45rem 0 1rem; font: 600 clamp(2.6rem, 6vw, 6rem)/.9 var(--serif); color: var(--parchment); }
.vellum h2 { color: var(--oxblood); }
p { font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.65; }
.equation { font-family: var(--mono); font-size: .9rem; line-height: 1.8; }
.counter-cluster { position: absolute; right: 15%; bottom: 17%; display: grid; gap: .8rem; }
.counter { padding: .7rem 1rem; border: 1px solid rgba(242,154,56,.5); background: rgba(9,7,6,.62); color: var(--ember); font: 700 .86rem var(--mono); text-transform: uppercase; box-shadow: 0 0 22px rgba(242,154,56,.22); }
.counter.flash, .decimal.flash { color: var(--teal); text-shadow: 0 0 18px var(--teal); }

.star-map { position: absolute; left: 8%; top: 12%; width: min(62vw, 48rem); aspect-ratio: 1; opacity: .9; }
.orbit { position: absolute; inset: 12%; border: 1px solid rgba(216,199,163,.32); border-radius: 50%; transform: rotate(18deg); animation: apertureSpin 40s linear infinite reverse; }
.orbit-two { inset: 25%; border-color: rgba(242,154,56,.42); animation-duration: 28s; }
.orbit-three { inset: 39%; border-style: dashed; border-color: rgba(94,234,212,.4); animation-duration: 18s; }
.star { position: absolute; width: .42rem; height: .42rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 20px var(--teal); }
.s1 { left: 24%; top: 18%; } .s2 { left: 66%; top: 29%; } .s3 { left: 42%; top: 72%; } .s4 { left: 78%; top: 61%; }
.chapter { margin-left: auto; max-width: 36rem; }
.library-card { position: absolute; left: 12%; bottom: 14%; padding: 1.2rem; background: rgba(216,199,163,.76); color: var(--walnut); font: .82rem/1.8 var(--mono); transform: rotate(-5deg); }

.glass-panel { max-width: 43rem; margin-left: 8%; padding: clamp(1.8rem, 4vw, 4rem); border: 1px solid rgba(94,234,212,.3); background: linear-gradient(135deg, rgba(9,7,6,.64), rgba(49,36,61,.33)); box-shadow: inset 0 0 50px rgba(94,234,212,.07), 0 30px 80px rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.logic-readout { position: absolute; right: 13%; top: 28%; display: grid; gap: 1rem; }
.logic-readout div { min-width: 15rem; padding: 1rem; border: 1px solid rgba(242,154,56,.38); background: rgba(33,20,15,.66); }
.logic-readout span { display: block; font: .67rem var(--mono); color: rgba(216,199,163,.68); text-transform: uppercase; letter-spacing: .14em; }
.logic-readout strong { display: block; margin-top: .35rem; font: 700 2rem var(--mono); color: var(--ember); }

.proof-seal { position: relative; margin: auto; width: min(54vw, 34rem); aspect-ratio: 1; display: grid; place-items: center; }
.seal-ring, .proof-seal::before, .proof-seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(242,154,56,.65); box-shadow: 0 0 50px rgba(242,154,56,.22); animation: apertureSpin 22s linear infinite; }
.proof-seal::before { inset: 14%; border-style: dashed; border-color: rgba(216,199,163,.45); animation-direction: reverse; }
.proof-seal::after { inset: 31%; border-color: rgba(94,234,212,.5); animation-duration: 14s; }
.seal-core { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(4rem, 10vw, 9rem); color: var(--ember); text-shadow: 0 0 35px var(--orange); }
.final-copy { position: absolute; left: 8%; bottom: 13%; max-width: 43rem; }

@keyframes apertureSpin { to { transform: rotate(360deg); } }
@keyframes meshDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes scanner { 0%, 100% { top: 0; opacity: 0; } 15%, 70% { opacity: 1; } 85% { top: 96%; opacity: 0; } }
@keyframes scanReveal { from { opacity: 0; filter: blur(10px); letter-spacing: .08em; } to { opacity: 1; filter: blur(0); letter-spacing: 0; } }
@keyframes float { 0%, 100% { translate: 0 0 0; } 50% { translate: 0 -1.2rem 2rem; } }

@media (max-width: 800px) {
  .annotation-rail { display: none; }
  .coord { font-size: .56rem; }
  .aperture { width: 80vw; margin: -40vw 0 0 -40vw; }
  .chamber { padding: 7rem 1.5rem; }
  .slip { opacity: .72; }
  .counter-cluster, .logic-readout, .library-card, .final-copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 2rem; }
  .manuscript-stack { width: 100%; min-height: 43rem; }
  .vellum-large, .vellum-small { width: 100%; left: 0; right: auto; }
  .glass-panel { margin-left: 0; }
}