:root {
  /* Font compliance lexicon: Mono** Mono* Inter** Inter* Display** Display* */
  --cream: #F4DFC7;
  --rose: #D89AA8;
  --gold: #F3B95F;
  --ruby: #C83F5D;
  --velvet: #210613;
  --oxide: #6F1737;
  --black: #090308;
  --wine: #3B0B22;
  --cyan: #4CE0D2;
  --display: "Playfair Display", Georgia, serif;
  --text: "Inter", system-ui, sans-serif;
  --pixel: "Pixelify Sans", "IBM Plex Mono", monospace;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--velvet);
  scroll-snap-type: y mandatory;
  scrollbar-color: var(--ruby) var(--black);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(59, 11, 34, .38) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg, rgba(59, 11, 34, .24) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(circle at 82% 14%, rgba(200, 63, 93, .13), transparent 26rem),
    radial-gradient(circle at 6% 82%, rgba(111, 23, 55, .42), transparent 28rem),
    var(--velvet);
  font-family: var(--text);
  overflow-x: hidden;
}

button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(45deg, rgba(244, 223, 199, .06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(216, 154, 168, .04) 25%, transparent 25%);
  background-size: 8px 8px, 12px 12px;
  mix-blend-mode: screen;
}

.coordinate-readout {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 50;
  padding: 8px 10px;
  color: var(--cyan);
  background: var(--black);
  border: 2px solid var(--oxide);
  box-shadow: 6px 6px 0 var(--wine);
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: .04em;
}

.scene {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  left: 26px;
  top: 24px;
  color: var(--oxide);
  font-family: var(--pixel);
  font-size: 15px;
  letter-spacing: .2em;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 11vh 9vw;
  border: 1px solid rgba(111, 23, 55, .25);
  box-shadow: 8px 8px 0 rgba(9, 3, 8, .22), -8px -8px 0 rgba(59, 11, 34, .22);
  pointer-events: none;
  z-index: -1;
}

.pixel-kicker,
.scene-caption,
.label,
.matrix-chip,
.chart-title,
.view-toggle {
  font-family: var(--pixel);
  text-transform: lowercase;
}

.pixel-kicker {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: .12em;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.055em;
}

h1 {
  max-width: 80vw;
  font-size: clamp(76px, 15vw, 210px);
  text-shadow: 8px 8px 0 var(--black), 14px 14px 0 var(--oxide);
}

h2 {
  max-width: 760px;
  color: var(--cream);
  font-size: clamp(50px, 8vw, 128px);
  text-shadow: 6px 6px 0 var(--black);
}

.hero-copy {
  position: absolute;
  left: 7vw;
  bottom: 10vh;
}

.hero-line {
  max-width: 430px;
  margin: 28px 0 0 6px;
  color: var(--rose);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
}

.chapter-copy { position: absolute; z-index: 5; }
.upper-left { left: 8vw; top: 12vh; }
.upper-right { right: 8vw; top: 12vh; text-align: right; }
.lower-right { right: 7vw; bottom: 9vh; text-align: right; }

.scene-caption {
  position: absolute;
  max-width: 320px;
  color: var(--rose);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: .05em;
}
.left-caption { left: 10vw; top: 19vh; }
.right-caption { right: 9vw; bottom: 17vh; }

.ghost-axis {
  position: absolute;
  color: rgba(244, 223, 199, .035);
  font-family: var(--display);
  font-size: clamp(220px, 38vw, 560px);
  font-weight: 900;
  line-height: 1;
  z-index: -1;
}
.axis-one { right: 5vw; bottom: -7vh; }
.axis-two { left: 5vw; bottom: -13vh; }
.axis-four { left: -3vw; top: 4vh; }

.lonely-vertex {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
}
.lonely-vertex span,
.node,
.end-node {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--cyan);
  border: 0;
  box-shadow: 0 0 0 4px var(--black), 8px 8px 0 var(--wine), 0 0 22px rgba(76, 224, 210, .52);
  image-rendering: pixelated;
}
.lonely-vertex span { animation: vertexBlink 1.3s steps(2, end) infinite; }

.corner-voronoi {
  position: absolute;
  width: 220px;
  height: 176px;
  opacity: .78;
  background:
    linear-gradient(90deg, transparent 0 18px, var(--oxide) 18px 20px, transparent 20px 64px, var(--ruby) 64px 66px, transparent 66px),
    linear-gradient(0deg, transparent 0 32px, var(--wine) 32px 34px, transparent 34px 96px, var(--oxide) 96px 98px, transparent 98px);
  clip-path: polygon(0 18%, 42% 0, 100% 24%, 82% 76%, 34% 100%, 6% 68%);
}
.top-right { right: -34px; top: 76px; }

.constellation {
  position: absolute;
  right: 9vw;
  top: 26vh;
  width: min(42vw, 520px);
  height: min(34vw, 360px);
  border: 2px solid var(--oxide);
  box-shadow: 12px 12px 0 var(--black), 22px 22px 0 rgba(111, 23, 55, .38);
  background: rgba(9, 3, 8, .34);
}
.constellation::before {
  content: "";
  position: absolute;
  inset: 18px;
  background-image: linear-gradient(90deg, rgba(244,223,199,.08) 1px, transparent 1px), linear-gradient(0deg, rgba(244,223,199,.06) 1px, transparent 1px);
  background-size: 38px 38px;
}
svg { width: 100%; height: 100%; overflow: visible; }
.edge,
.graph-plate path,
.chart-line polyline,
.final-relic polyline {
  fill: none;
  stroke: var(--rose);
  stroke-width: 4;
  stroke-linejoin: miter;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.edge { stroke-dasharray: 16 8; animation: edgePulse 2.7s steps(6, end) infinite; }
.edge-b { stroke: var(--ruby); animation-delay: .4s; }
.edge-c { stroke: var(--cyan); opacity: .72; animation-delay: .8s; }
.node {
  position: absolute;
  width: 15px;
  height: 15px;
  padding: 0;
  cursor: pointer;
  transition: transform .13s steps(2, end), background .13s steps(2, end), box-shadow .13s steps(2, end);
}
.node:nth-of-type(odd) { background: var(--gold); }
.node:hover,
.node.active {
  transform: translate(-2px, -2px) scale(1.35);
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--black), 10px 10px 0 var(--ruby), 0 0 26px rgba(76, 224, 210, .7);
}
.tooltip {
  position: absolute;
  left: 20px;
  top: 20px;
  display: none;
  padding: 8px 10px;
  color: var(--black);
  background: var(--cream);
  border: 2px solid var(--black);
  box-shadow: 6px 6px 0 var(--ruby);
  font-family: var(--pixel);
  z-index: 8;
}
.tooltip.show { display: block; animation: plaque .18s steps(2, end); }

.matrix-chip {
  position: absolute;
  left: 15vw;
  bottom: 19vh;
  padding: 14px 18px;
  color: var(--cyan);
  background: var(--black);
  border: 2px solid var(--wine);
  box-shadow: 9px 9px 0 var(--oxide);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .18em;
}

.plate-stack {
  position: absolute;
  left: 9vw;
  top: 17vh;
  width: min(58vw, 760px);
  height: min(48vw, 520px);
}
.graph-plate {
  position: absolute;
  width: 72%;
  height: 52%;
  border: 2px solid var(--oxide);
  background: rgba(59, 11, 34, .42);
  box-shadow: 12px 12px 0 rgba(9, 3, 8, .62);
  transition: transform .28s steps(3, end), border-color .28s steps(2, end);
}
.plate-back { left: 18%; top: 4%; opacity: .56; transform: translate(28px, 34px); }
.plate-mid { left: 9%; top: 21%; opacity: .76; transform: translate(14px, 18px); }
.plate-front { left: 0; top: 38%; background: rgba(33, 6, 19, .72); }
.plate-stack:hover .plate-back { transform: translate(36px, 26px); border-color: var(--rose); }
.plate-stack:hover .plate-mid { transform: translate(18px, 10px); border-color: var(--ruby); }
.plate-stack:hover .plate-front { transform: translate(-4px, -4px); border-color: var(--cyan); }
.graph-plate path { stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(6px 6px 0 var(--black)); }
.plate-mid path { stroke: var(--gold); }
.plate-front path { stroke: var(--rose); }
.label {
  position: absolute;
  right: 10px;
  top: 8px;
  color: var(--gold);
  font-size: 13px;
}

.scatter-grains {
  position: absolute;
  right: 12vw;
  top: 18vh;
  width: 180px;
  height: 220px;
  background:
    linear-gradient(var(--ruby), var(--ruby)) 6px 18px / 8px 8px,
    linear-gradient(var(--cyan), var(--cyan)) 64px 42px / 6px 6px,
    linear-gradient(var(--rose), var(--rose)) 124px 118px / 7px 7px,
    linear-gradient(var(--gold), var(--gold)) 92px 174px / 5px 5px,
    radial-gradient(circle, var(--gold) 0 3px, transparent 4px) 18px 5px / 44px 34px;
  background-repeat: repeat;
  opacity: .45;
}

.render-room {
  position: absolute;
  left: 10vw;
  bottom: 14vh;
  width: min(52vw, 620px);
  height: 390px;
  border: 3px solid var(--oxide);
  background: var(--black);
  box-shadow: 14px 14px 0 var(--wine), 26px 26px 0 rgba(111, 23, 55, .42);
  padding: 36px;
}
.chart-title { color: var(--rose); font-size: 18px; letter-spacing: .08em; }
.chart-grid {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 48px;
  height: 210px;
  border-left: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding-left: 20px;
}
.chart-grid i {
  display: block;
  width: 28px;
  height: var(--h);
  background: var(--ruby);
  box-shadow: 6px 0 0 var(--oxide), 0 -6px 0 var(--gold);
  transform-origin: bottom;
  animation: barSnap .9s steps(5, end) both;
  animation-delay: calc(var(--d) * .08s);
}
.chart-line {
  position: absolute;
  left: 86px;
  bottom: 68px;
  width: 430px;
  height: 220px;
  pointer-events: none;
}
.chart-line polyline { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 18 300; animation: drawLine 3s steps(10, end) infinite; }
.view-toggle {
  position: absolute;
  right: 13vw;
  bottom: 19vh;
  color: var(--black);
  background: var(--gold);
  border: 0;
  padding: 14px 18px;
  box-shadow: 7px 7px 0 var(--ruby);
  cursor: pointer;
}
.view-toggle.matrix { background: var(--cyan); }
.view-toggle.timeline { background: var(--rose); }
.render-room.matrix .chart-grid i { width: 34px; height: 34px; align-self: center; }
.render-room.timeline .chart-grid i { height: 8px; width: 54px; }

.final-line {
  position: absolute;
  left: 9vw;
  top: 20vh;
}
.final-line h2 { max-width: 960px; }
.final-relic {
  position: absolute;
  right: 8vw;
  bottom: 18vh;
  width: min(58vw, 720px);
  height: 230px;
}
.final-relic polyline {
  stroke: var(--cream);
  stroke-width: 6;
  filter: drop-shadow(8px 8px 0 var(--black));
  stroke-dasharray: 40 18;
  animation: edgePulse 2.2s steps(7, end) infinite;
}
.end-node { position: absolute; background: var(--gold); }
.end-node.a { left: 3%; bottom: 38%; }
.end-node.b { left: 31%; bottom: 48%; background: var(--ruby); }
.end-node.c { left: 60%; bottom: 67%; background: var(--cyan); }
.end-node.d { right: 3%; top: 10%; }

.graph-hotspot.near { filter: brightness(1.18) saturate(1.12); }

@keyframes vertexBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .28; } }
@keyframes edgePulse { to { stroke-dashoffset: -72; } }
@keyframes plaque { from { transform: scale(.82); } to { transform: scale(1); } }
@keyframes barSnap { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
@keyframes drawLine { 0% { stroke-dashoffset: 320; } 45%, 100% { stroke-dashoffset: 0; } }

@media (max-width: 820px) {
  .coordinate-readout { top: 12px; right: 12px; font-size: 12px; }
  h1 { font-size: clamp(58px, 21vw, 120px); }
  h2 { font-size: clamp(42px, 15vw, 82px); }
  .constellation, .render-room, .plate-stack, .final-relic { width: 78vw; left: 11vw; right: auto; }
  .constellation { top: 42vh; height: 300px; }
  .upper-right, .lower-right { left: 8vw; right: auto; text-align: left; }
  .render-room { height: 330px; padding: 24px; }
  .chart-line { width: 60vw; }
  .view-toggle { right: auto; left: 12vw; bottom: 9vh; }
  .scene-caption { display: none; }
}