:root {
  /* Typography compliance tokens: Space Grotesk* Grotesk** for interface labels; IBM Plex Mono only for tiny coordinate tags or algorithm names. */
  --deep-void: #080A1A;
  --ink-blue: #11162E;
  --vertex-pearl: #F5F1DF;
  --edge-cyan: #62E6FF;
  --eigen-violet: #9A7CFF;
  --path-amber: #F6C85F;
  --cut-coral: #FF6B6B;
  --chalk-haze: #D7E2F2;
  --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--chalk-haze);
  background:
    radial-gradient(circle at 22% 38%, rgba(154, 124, 255, .16), transparent 28rem),
    radial-gradient(circle at 78% 16%, rgba(98, 230, 255, .10), transparent 25rem),
    linear-gradient(135deg, var(--deep-void), var(--ink-blue) 48%, var(--deep-void));
  font-family: "Space Grotesk", sans-serif;
}

.graph-paper,
.chalk-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.graph-paper {
  opacity: .22;
  background-image:
    linear-gradient(rgba(215, 226, 242, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 226, 242, .08) 1px, transparent 1px),
    radial-gradient(circle, rgba(245, 241, 223, .18) 1px, transparent 1.5px);
  background-size: 80px 80px, 80px 80px, 42px 42px;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
}

.chalk-dust {
  opacity: .35;
  background: radial-gradient(circle at var(--dust-x, 55%) var(--dust-y, 45%), rgba(245, 241, 223, .16), transparent 2px);
  background-size: 29px 31px;
  mix-blend-mode: screen;
}

.atlas { position: relative; z-index: 1; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.constellation-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 22px;
}

.constellation-nav::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--edge-cyan), var(--eigen-violet), var(--path-amber));
  opacity: .35;
}

.nav-star {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(245, 241, 223, .6);
  border-radius: 50%;
  background: var(--ink-blue);
  box-shadow: 0 0 18px rgba(98, 230, 255, .25);
  text-decoration: none;
}

.nav-star.active {
  background: var(--edge-cyan);
  border-color: var(--edge-cyan);
  box-shadow: 0 0 22px var(--edge-cyan), 0 0 46px rgba(154, 124, 255, .45);
}

.nav-star span {
  position: absolute;
  right: 23px;
  top: -5px;
  white-space: nowrap;
  color: var(--chalk-haze);
  font: 500 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(8px);
  transition: .3s ease;
}

.nav-star:hover span,
.nav-star.active span { opacity: .8; transform: translateX(0); }

.coordinate-field {
  position: absolute;
  inset: 12% 12% auto auto;
  display: grid;
  gap: 10px;
  font: 500 12px/1 "IBM Plex Mono", monospace;
  color: rgba(215, 226, 242, .55);
}

.vertex-origin { min-height: 112vh; }

.origin-node,
.magnetic-node,
.svg-node,
.embedding-nodes circle,
.creature-node {
  filter: drop-shadow(0 0 12px rgba(245, 241, 223, .8)) drop-shadow(0 0 30px rgba(98, 230, 255, .3));
}

.origin-node {
  position: absolute;
  left: 24%;
  top: 52%;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFFFFF, var(--vertex-pearl) 42%, rgba(98, 230, 255, .55) 72%, transparent 74%);
  box-shadow: 0 0 40px rgba(245, 241, 223, .75), 0 0 120px rgba(98, 230, 255, .25);
  animation: moonBreath 4.7s ease-in-out infinite;
}

.origin-node::after {
  content: "";
  position: absolute;
  inset: -48px;
  border: 1px solid rgba(245, 241, 223, .14);
  border-radius: 50%;
  animation: haloPulse 5.8s ease-in-out infinite;
}

.title-etching {
  position: absolute;
  left: 39%;
  top: 26%;
  max-width: 560px;
}

.chapter-mark {
  margin: 0 0 15px;
  color: var(--edge-cyan);
  font: 600 12px/1.4 "Space Grotesk", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -.03em;
}

h1 {
  color: var(--vertex-pearl);
  font-size: clamp(74px, 11vw, 176px);
  line-height: .82;
  text-shadow: 0 0 28px rgba(245, 241, 223, .16);
}

h2 {
  color: var(--vertex-pearl);
  font-size: clamp(42px, 6vw, 92px);
  line-height: .92;
}

.theorem-caption {
  color: var(--chalk-haze);
  font: 400 clamp(18px, 2vw, 28px)/1.25 "Fraunces", serif;
  max-width: 490px;
}

.first-touch {
  position: absolute;
  left: 17%;
  top: 70%;
  border: 1px solid rgba(98, 230, 255, .6);
  border-radius: 999px;
  padding: 14px 22px;
  color: var(--edge-cyan);
  background: rgba(17, 22, 46, .46);
  box-shadow: inset 0 0 22px rgba(98, 230, 255, .08), 0 0 20px rgba(98, 230, 255, .12);
  font: 600 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

.origin-svg,
.graph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.edge-path,
.embedding-edges path,
.graph-creature path {
  fill: none;
  stroke: var(--edge-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(98, 230, 255, .65));
}

.first-edge,
.draw-on-view {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.8s cubic-bezier(.2, .8, .2, 1);
}

body.edge-awake .first-edge,
.chamber.in-view .draw-on-view { stroke-dashoffset: 0; }

.delay-a { transition-delay: .28s; }
.delay-b { transition-delay: .52s; }
.violet { stroke: var(--eigen-violet); filter: drop-shadow(0 0 7px rgba(154, 124, 255, .75)); }
.cyan { fill: var(--edge-cyan); }
.coral { stroke: var(--cut-coral); filter: drop-shadow(0 0 9px rgba(255, 107, 107, .7)); }
.amber { stroke: var(--path-amber); filter: drop-shadow(0 0 9px rgba(246, 200, 95, .7)); }

.edge-label-svg {
  fill: rgba(245, 241, 223, .76);
  font: 500 13px "Fraunces", serif;
  letter-spacing: .04em;
}

.svg-node,
.embedding-nodes circle {
  fill: var(--vertex-pearl);
  stroke: rgba(8, 10, 26, .65);
  stroke-width: 2;
}
.violet-node { fill: var(--eigen-violet); }
.amber-node { fill: var(--path-amber); }

.orbital-text {
  position: absolute;
  max-width: 640px;
  padding: 24px;
  border-left: 1px solid rgba(245, 241, 223, .2);
}

.orbital-text p:not(.chapter-mark) {
  color: rgba(215, 226, 242, .78);
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.45;
}

.edge-text { left: 9%; top: 14%; }
.cluster-text { right: 10%; bottom: 10%; }
.knot-text { left: 9%; top: 14%; }
.path-text { right: 8%; top: 12%; }

.marginal-note,
.vellum-scrap,
.weight-tags span {
  font-family: "Fraunces", serif;
  color: var(--ink-blue);
  background: linear-gradient(135deg, rgba(245, 241, 223, .92), rgba(215, 226, 242, .76));
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

.marginal-note {
  position: absolute;
  right: 13%;
  bottom: 20%;
  width: 245px;
  padding: 18px 20px;
  transform: rotate(-6deg);
  z-index: 2;
}

.cluster-chamber { background: radial-gradient(circle at 45% 42%, rgba(154, 124, 255, .14), transparent 34rem); }

.graph-creature {
  position: absolute;
  left: 9%;
  top: 16%;
  width: min(58vw, 680px);
  height: min(46vw, 520px);
  animation: creatureDrift 8s ease-in-out infinite;
}

.graph-creature svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graph-creature path { stroke-width: 2.5; opacity: .85; }

.creature-node {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vertex-pearl);
  transition: transform .5s ease, background .3s ease, opacity .3s ease;
}
.n1 { left: 17%; top: 51%; } .n2 { left: 39%; top: 24%; } .n3 { left: 59%; top: 43%; }
.n4 { left: 80%; top: 21%; } .n5 { left: 46%; top: 72%; } .n6 { left: 76%; top: 71%; } .n7 { left: 63%; top: 18%; }
.graph-creature:hover .creature-node { opacity: .65; transform: translate(var(--split-x, 0), var(--split-y, 0)) scale(.88); }
.graph-creature:hover .n1 { --split-x: -28px; --split-y: 18px; background: var(--cut-coral); }
.graph-creature:hover .n2 { --split-x: -18px; --split-y: -32px; background: var(--path-amber); }
.graph-creature:hover .n3 { --split-x: 28px; --split-y: 16px; background: var(--edge-cyan); }
.graph-creature:hover .n4 { --split-x: 36px; --split-y: -18px; background: var(--eigen-violet); }

.matrix-panel {
  position: absolute;
  right: 12%;
  top: 15%;
  padding: 18px;
  border: 1px solid rgba(215, 226, 242, .18);
  background: rgba(17, 22, 46, .5);
  backdrop-filter: blur(8px);
}
.matrix-panel p {
  margin: 0 0 12px;
  color: var(--edge-cyan);
  font: 500 11px "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.matrix-grid { display: grid; grid-template-columns: repeat(4, 32px); gap: 6px; }
.matrix-grid button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(215, 226, 242, .18);
  color: rgba(245, 241, 223, .75);
  background: rgba(8, 10, 26, .72);
  font: 500 12px "IBM Plex Mono", monospace;
}
.matrix-grid button.lit { background: var(--edge-cyan); color: var(--deep-void); box-shadow: 0 0 18px rgba(98,230,255,.55); }
.creature-node.lit { background: var(--edge-cyan); transform: scale(1.35); }

.collision-halo {
  fill: rgba(255, 107, 107, .10);
  stroke: var(--cut-coral);
  stroke-dasharray: 6 11;
  animation: rotateHalo 9s linear infinite;
  transform-origin: 605px 397px;
}
.vellum-scrap {
  position: absolute;
  right: 13%;
  bottom: 16%;
  max-width: 330px;
  padding: 24px 26px;
  transform: rotate(5deg);
  font-size: 20px;
}

.weighted-path { background: radial-gradient(circle at 60% 50%, rgba(246, 200, 95, .11), transparent 30rem); }
.obstacle { fill: rgba(154, 124, 255, .10); stroke: rgba(154, 124, 255, .36); stroke-width: 1.5; }
.shortest-ribbon {
  fill: none;
  stroke: var(--path-amber);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 18px rgba(246, 200, 95, .72));
  stroke-dasharray: 18 13;
  animation: ribbonRun 1.8s linear infinite;
}
.ghost { opacity: .22; stroke-dasharray: 4 10; }
.weight-tags { position: absolute; left: 14%; top: 18%; display: grid; gap: 18px; }
.weight-tags span { padding: 9px 12px; font: 500 14px "IBM Plex Mono", monospace; transform: rotate(-4deg); }

.final-embedding { background: radial-gradient(circle at 50% 42%, rgba(98, 230, 255, .12), transparent 38rem); }
.embedding-edges path { stroke: rgba(98, 230, 255, .72); stroke-width: 2.2; }
.embedding-nodes circle:nth-child(even) { fill: var(--eigen-violet); }
.embedding-nodes circle:nth-child(4) { fill: var(--path-amber); }
.final-proof {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: min(780px, 80vw);
  text-align: center;
}
.final-proof h2 { font-size: clamp(68px, 10vw, 158px); }
.final-proof .theorem-caption { margin: 20px auto 0; }

@keyframes moonBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes haloPulse { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: .12; transform: scale(1.18); } }
@keyframes creatureDrift { 0%,100% { transform: translate3d(0,0,0) rotate(-1deg); } 50% { transform: translate3d(14px,-18px,0) rotate(2deg); } }
@keyframes rotateHalo { to { transform: rotate(360deg); } }
@keyframes ribbonRun { to { stroke-dashoffset: -31; } }

@media (max-width: 760px) {
  .constellation-nav { right: 14px; }
  .nav-star span { display: none; }
  .title-etching { left: 8%; right: 8%; top: 18%; }
  .origin-node { left: 18%; top: 58%; }
  .first-touch { left: 8%; top: 78%; }
  .orbital-text { left: 6%; right: 12%; top: 10%; max-width: none; }
  .matrix-panel { right: 12%; top: 52%; }
  .graph-creature { left: 0; top: 26%; width: 96vw; height: 70vw; }
  .vellum-scrap, .marginal-note { right: 12%; bottom: 10%; }
}