:root {
  /* Compliance typography tokens from DESIGN.md: Space Mono** and IBM Plex Mono** */
  --pearl: #FFF1B8;
  --violet: #21003B;
  --silver: #DDE7FF;
  --pink: #FF2BD6;
  --black: #05020A;
  --green: #B7FF00;
  --cyan: #00F5FF;
  --display: "Space Mono", monospace;
  --mono: "IBM Plex Mono", monospace;
  --ornament: "Syne Mono", monospace;
  --design-font-token: "Mono** Mono* Monoo*";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--silver);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,43,214,0.22), transparent 30rem),
    radial-gradient(circle at 82% 35%, rgba(0,245,255,0.16), transparent 28rem),
    linear-gradient(135deg, var(--black), var(--violet) 62%, var(--black));
  font-family: var(--mono);
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255,241,184,0.9) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(0,245,255,0.7) 0 1px, transparent 1.6px);
  background-size: 92px 92px, 137px 137px;
  opacity: 0.28;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.ambient, .orb, .cursor-star { pointer-events: none; }

.ambient { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(42px); opacity: 0.35; animation: drift 18s ease-in-out infinite alternate; }
.orb-a { width: 28vw; height: 28vw; left: -8vw; top: 20vh; background: var(--pink); }
.orb-b { width: 24vw; height: 24vw; right: -7vw; top: 6vh; background: var(--cyan); animation-delay: -5s; }
.orb-c { width: 18vw; height: 18vw; right: 22vw; bottom: -7vw; background: var(--green); animation-delay: -9s; opacity: 0.16; }

.masthead {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 11px 14px;
  border: 1px solid rgba(221,231,255,0.55);
  border-radius: 999px;
  color: var(--pearl);
  background: linear-gradient(90deg, rgba(5,2,10,0.72), rgba(221,231,255,0.14), rgba(5,2,10,0.72));
  box-shadow: inset 0 0 18px rgba(221,231,255,0.25), 0 0 28px rgba(255,43,214,0.18);
  backdrop-filter: blur(18px);
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mast-right { text-align: right; color: var(--cyan); }
.issue-nav { display: flex; gap: 8px; }
.issue-nav a {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221,231,255,0.45);
  border-radius: 50%;
  color: var(--silver);
  transition: 240ms ease;
}
.issue-nav a.active, .issue-nav a:hover { color: var(--black); background: var(--green); box-shadow: 0 0 18px var(--green); }

.spread {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(92px, 11vh, 132px) clamp(20px, 5vw, 76px) clamp(42px, 7vh, 76px);
  overflow: hidden;
  border-bottom: 1px solid rgba(221,231,255,0.18);
}

.spread::after {
  content: attr(data-chapter);
  position: absolute;
  right: clamp(18px, 3vw, 44px);
  bottom: 18px;
  font: 700 11px var(--display);
  letter-spacing: 0.2em;
  color: rgba(255,241,184,0.5);
  text-transform: uppercase;
}

.cover { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr); align-items: center; gap: 4vw; }
.cover-copy { max-width: 980px; }
.kicker, .chapter-label, .coordinate { color: var(--cyan); text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(10px, 1.2vw, 13px); }
h1, h2 { font-family: var(--display); text-transform: uppercase; margin: 0; line-height: 0.9; }
h1 {
  font-size: clamp(58px, 13.5vw, 188px);
  letter-spacing: -0.1em;
  max-width: 8ch;
  background: linear-gradient(110deg, var(--silver), #ffffff, var(--cyan), var(--pink), var(--pearl));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 25px rgba(0,245,255,0.24));
  animation: chromeGlint 6s linear infinite;
}
h2 { font-size: clamp(42px, 8vw, 112px); letter-spacing: -0.08em; }
.deck { max-width: 560px; font-size: clamp(16px, 2vw, 24px); line-height: 1.45; color: var(--pearl); }

.chrome-rail {
  position: absolute;
  border: 1px solid rgba(221,231,255,0.45);
  background: linear-gradient(180deg, rgba(221,231,255,0.2), rgba(255,43,214,0.08));
  color: var(--silver);
  box-shadow: inset 0 0 20px rgba(221,231,255,0.25);
}
.chrome-rail.vertical { left: 24px; top: 108px; bottom: 40px; width: 34px; writing-mode: vertical-rl; display: grid; place-items: center; letter-spacing: 0.26em; font-size: 11px; }

.portal {
  position: relative;
  min-height: 420px;
  border: 1px solid rgba(221,231,255,0.36);
  border-radius: 55% 45% 62% 38% / 44% 58% 42% 56%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.95), transparent 8%),
    radial-gradient(circle at 66% 30%, rgba(0,245,255,0.78), transparent 20%),
    radial-gradient(circle at 38% 68%, rgba(255,43,214,0.82), transparent 28%),
    radial-gradient(circle at 72% 80%, rgba(183,255,0,0.36), transparent 18%),
    linear-gradient(135deg, rgba(221,231,255,0.76), rgba(33,0,59,0.88));
  box-shadow: inset -28px -20px 50px rgba(5,2,10,0.62), inset 16px 18px 32px rgba(255,255,255,0.22), 0 0 55px rgba(255,43,214,0.35);
  filter: saturate(1.35) contrast(1.08);
  animation: blobMorph 9s ease-in-out infinite alternate;
}
.hero-portal { transform: rotate(8deg); }
.portal::before, .portal::after { content: ""; position: absolute; inset: 9%; border-radius: inherit; border: 1px solid rgba(255,255,255,0.28); filter: blur(0.2px); }
.portal::after { inset: 18%; background: radial-gradient(circle, rgba(5,2,10,0.34), transparent 65%); }
.portal-scene { position: absolute; inset: 15%; z-index: 2; color: var(--black); font-family: var(--display); }
.tiny-crown, .cursor, .moon, .glyph { position: absolute; text-shadow: 0 0 10px var(--pearl); }
.tiny-crown { left: 16%; top: 18%; font-size: 48px; color: var(--pearl); }
.cursor { right: 19%; top: 35%; font-size: 42px; color: var(--green); transform: rotate(26deg); }
.moon { left: 45%; bottom: 15%; font-size: 58px; color: var(--cyan); }
.stick { position: absolute; width: 32px; height: 58px; bottom: 22%; border-left: 3px solid var(--black); }
.stick::before { content: ""; position: absolute; top: -20px; left: -12px; width: 22px; height: 22px; border: 3px solid var(--black); border-radius: 50%; background: var(--pearl); }
.stick-one { left: 22%; transform: rotate(-8deg); }
.stick-two { right: 29%; transform: rotate(9deg); }
.loading-ring { position: absolute; right: 25%; bottom: 18%; width: 82px; height: 82px; border-radius: 50%; border: 6px solid rgba(5,2,10,0.25); border-top-color: var(--pink); animation: spin 3.2s linear infinite; }
.loading-ring.small { right: 34%; bottom: 34%; width: 58px; height: 58px; border-width: 4px; }

.artifact, .orbit-box, .gloss-page, .annotation-stack div, .oracle-notes {
  border: 1px solid rgba(221,231,255,0.4);
  background: linear-gradient(135deg, rgba(221,231,255,0.12), rgba(5,2,10,0.62));
  box-shadow: inset 0 0 25px rgba(221,231,255,0.14), 0 0 24px rgba(0,245,255,0.12);
  backdrop-filter: blur(12px);
}
.issue-card { position: absolute; right: 8vw; bottom: 8vh; width: min(340px, 72vw); padding: 18px; color: var(--pearl); }
.issue-card span { color: var(--green); letter-spacing: 0.2em; }

.page-button, .artifact-button, .reset-star {
  border: 1px solid var(--silver);
  color: var(--black);
  background: linear-gradient(90deg, var(--pearl), var(--silver), var(--cyan));
  border-radius: 999px;
  padding: 13px 20px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  box-shadow: 0 0 22px rgba(0,245,255,0.28), inset 0 0 10px rgba(255,255,255,0.8);
  cursor: none;
}
.page-button { position: absolute; left: clamp(56px, 7vw, 112px); bottom: 8vh; }
.starburst { position: absolute; color: var(--pearl); font-size: clamp(42px, 8vw, 100px); text-shadow: 0 0 18px var(--pink), 0 0 36px var(--cyan); animation: twinkle 2.5s ease-in-out infinite alternate; }
.star-a { right: 24%; top: 20%; }
.star-b { left: 14%; bottom: 22%; animation-delay: -1s; }

.loop { display: grid; grid-template-columns: 0.9fr 1.1fr; grid-template-rows: auto 1fr; gap: 28px; }
.gutters { grid-column: 1 / 3; max-width: 1180px; color: var(--silver); transform: skewX(-4deg); text-shadow: 0 0 20px rgba(255,43,214,0.24); }
.caption-column { max-width: 420px; line-height: 1.7; color: var(--pearl); }
.constellation { position: relative; min-height: 360px; }
.constellation span { position: absolute; left: var(--x); top: var(--y); color: var(--green); font: 700 18px var(--display); text-shadow: 0 0 16px var(--green); }
.constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.constellation path { fill: none; stroke: var(--cyan); stroke-width: 0.35; stroke-dasharray: 220; stroke-dashoffset: var(--line-offset, 220); filter: drop-shadow(0 0 4px var(--cyan)); transition: stroke-dashoffset 1.4s ease; }
.orbit-box { position: absolute; right: 7vw; bottom: 10vh; width: min(350px, 74vw); padding: 20px; }
.halo { position: relative; width: 150px; height: 150px; margin: auto; border: 1px solid rgba(221,231,255,0.45); border-radius: 50%; animation: spin 8s linear infinite; }
.halo span { position: absolute; color: var(--pink); text-shadow: 0 0 12px var(--pink); }
.halo span:nth-child(1) { left: 50%; top: -10px; }
.halo span:nth-child(2) { right: -8px; top: 50%; }
.halo span:nth-child(3) { left: 50%; bottom: -12px; }
.halo span:nth-child(4) { left: -10px; top: 50%; color: var(--cyan); }

.excuse { background: linear-gradient(100deg, rgba(5,2,10,0.72) 0 48%, rgba(33,0,59,0.86) 48% 100%); }
.side-note { position: absolute; left: 5vw; top: 18vh; color: var(--green); writing-mode: vertical-rl; letter-spacing: 0.18em; }
.split-page { display: grid; grid-template-columns: 1fr 0.58fr; gap: 32px; align-items: end; min-height: 62vh; margin-left: clamp(26px, 7vw, 120px); }
.gloss-page { padding: clamp(24px, 5vw, 62px); border-radius: 28px; }
.gloss-page h2 { color: transparent; background: linear-gradient(110deg, var(--pearl), var(--pink), var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.pull { font: clamp(22px, 3vw, 42px) var(--ornament); color: var(--pearl); line-height: 1.18; }
.annotation-stack { display: grid; gap: 14px; }
.annotation-stack div { padding: 18px; color: var(--silver); }
.annotation-stack b { color: var(--pink); margin-right: 12px; }
.rhinestone-border { position: absolute; left: 12vw; right: 8vw; bottom: 8vh; display: flex; justify-content: space-between; color: var(--pearl); font-size: 25px; border-top: 1px solid rgba(221,231,255,0.28); padding-top: 16px; }

.oracle { display: grid; align-items: center; }
.oracle-title { max-width: 1140px; color: var(--silver); margin-bottom: 28px; }
.oracle-layout { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(280px, 0.75fr); gap: 5vw; align-items: center; }
.oracle-portal { min-height: 520px; transform: rotate(-5deg); }
.dense .glyph { font-size: clamp(30px, 6vw, 70px); color: var(--pearl); }
.dense .glyph:nth-child(1) { left: 18%; top: 22%; }
.dense .glyph:nth-child(2) { right: 20%; top: 18%; color: var(--green); }
.dense .glyph:nth-child(3) { left: 26%; bottom: 23%; color: var(--cyan); }
.dense .glyph:nth-child(4) { right: 18%; bottom: 26%; color: var(--pink); }
.oracle-notes { padding: clamp(22px, 4vw, 44px); line-height: 1.75; color: var(--pearl); }
.glitch-readout { margin-top: 20px; color: var(--green); min-height: 1.6em; }
.glitch-readout.glitching { animation: textGlitch 450ms steps(2, end) 3; }

.reset { display: grid; place-items: center; text-align: center; }
.reset-copy { max-width: 980px; }
.reset h2 { color: transparent; background: linear-gradient(90deg, var(--silver), var(--pearl), var(--pink)); -webkit-background-clip: text; background-clip: text; }
.reset p:not(.kicker) { color: var(--pearl); font-size: clamp(16px, 2vw, 22px); line-height: 1.6; }
.reset-star { margin-top: 28px; }
.final-sigil { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.16; font-size: 18vw; color: var(--cyan); }
.final-sigil span { position: absolute; animation: orbitSigil 15s linear infinite; transform-origin: 0 35vh; }
.final-sigil span:nth-child(2) { animation-delay: -3.75s; color: var(--pink); }
.final-sigil span:nth-child(3) { animation-delay: -7.5s; color: var(--green); }
.final-sigil span:nth-child(4) { animation-delay: -11.25s; color: var(--pearl); }

.reveal-item { opacity: 0; transform: translateY(42px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.9,.2,1); }
.reveal-item.visible { opacity: 1; transform: translateY(0); }
.cursor-star { position: fixed; z-index: 40; left: 0; top: 0; color: var(--pearl); text-shadow: 0 0 14px var(--pink), 0 0 28px var(--cyan); transform: translate(-50%, -50%); font-size: 24px; }

@keyframes blobMorph {
  0% { border-radius: 55% 45% 62% 38% / 44% 58% 42% 56%; transform: rotate(6deg) scale(1); }
  50% { border-radius: 38% 62% 43% 57% / 63% 36% 64% 37%; }
  100% { border-radius: 63% 37% 54% 46% / 42% 67% 33% 58%; transform: rotate(-4deg) scale(1.04); }
}
@keyframes chromeGlint { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 20px rgba(0,245,255,0.2)); } 50% { filter: hue-rotate(18deg) drop-shadow(0 0 28px rgba(255,43,214,0.32)); } 100% { filter: hue-rotate(0deg) drop-shadow(0 0 20px rgba(0,245,255,0.2)); } }
@keyframes drift { to { transform: translate3d(8vw, -5vh, 0) scale(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { from { transform: scale(0.9) rotate(0deg); opacity: 0.62; } to { transform: scale(1.12) rotate(18deg); opacity: 1; } }
@keyframes textGlitch { 0%,100% { transform: skewX(0); color: var(--green); } 50% { transform: skewX(-8deg); color: var(--pink); } }
@keyframes orbitSigil { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  body { cursor: auto; }
  .cursor-star { display: none; }
  .masthead { grid-template-columns: 1fr; border-radius: 24px; text-align: center; }
  .mast-left, .mast-right { text-align: center; }
  .issue-nav { justify-content: center; }
  .cover, .loop, .split-page, .oracle-layout { grid-template-columns: 1fr; }
  .gutters { grid-column: auto; }
  .chrome-rail.vertical, .side-note { display: none; }
  .issue-card, .orbit-box, .page-button { position: relative; left: auto; right: auto; bottom: auto; margin-top: 20px; }
  .portal, .oracle-portal { min-height: 340px; }
  .spread { padding-top: 176px; }
  .split-page { margin-left: 0; }
}