:root {
  /* Typography tokens mirrored from DESIGN.md: IBM Plex Mono** only for chemical symbols; IBM Plex Sans** for quiet coordinates. */
  --deep-vault: #07111F;
  --midnight-plane: #0C1E33;
  --carbon-black: #020509;
  --graphite: #31445A;
  --cyan: #5CE1E6;
  --violet: #6B5CFF;
  --bone: #E7ECEF;
  --ember: #C07A3A;
  --font-primary: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --font-ui: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--bone);
  background:
    radial-gradient(circle at 18% 12%, rgba(49, 68, 90, 0.38), transparent 32vw),
    radial-gradient(circle at 78% 46%, rgba(107, 92, 255, 0.16), transparent 28vw),
    linear-gradient(180deg, var(--carbon-black) 0%, var(--deep-vault) 46%, #040911 100%);
  font-family: var(--font-primary);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 21%, rgba(92, 225, 230, 0.035) 21.2% 21.7%, transparent 22%),
    linear-gradient(64deg, transparent 0 57%, rgba(192, 122, 58, 0.03) 57.1% 57.6%, transparent 58%),
    radial-gradient(circle at 52% 34%, rgba(2, 5, 9, 0.18), transparent 33%);
  mix-blend-mode: screen;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    radial-gradient(circle at 12% 19%, rgba(231, 236, 239, 0.42) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 72% 41%, rgba(92, 225, 230, 0.22) 0 0.6px, transparent 0.8px),
    radial-gradient(circle at 35% 82%, rgba(192, 122, 58, 0.18) 0 0.7px, transparent 0.9px);
  background-size: 17px 19px, 23px 29px, 31px 37px;
  animation: dustDrift 19s steps(3) infinite;
}

.smoke-field {
  position: fixed;
  inset: -10vh -10vw;
  z-index: 1;
  pointer-events: none;
  opacity: 0.46;
  filter: blur(28px);
  background:
    radial-gradient(ellipse at 20% 18%, rgba(49, 68, 90, 0.22), transparent 34%),
    radial-gradient(ellipse at 82% 78%, rgba(2, 5, 9, 0.7), transparent 42%),
    radial-gradient(ellipse at 55% 55%, rgba(12, 30, 51, 0.34), transparent 38%);
  transform: translate3d(var(--smoke-x, 0), var(--smoke-y, 0), 0);
  transition: transform 600ms ease-out;
}

.corner-nav,
.site-code,
.pressure-gauge {
  position: fixed;
  z-index: 90;
  font-family: var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  font-size: 11px;
  color: rgba(231, 236, 239, 0.56);
}

.corner-nav {
  top: 28px;
  right: 30px;
  display: flex;
  gap: 18px;
}

.corner-nav a {
  color: inherit;
  text-decoration: none;
  transition: color 450ms ease, text-shadow 450ms ease;
}

.corner-nav a.active,
.corner-nav a:hover {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(92, 225, 230, 0.45);
}

.site-code { left: 30px; top: 28px; }
.site-code span { color: var(--ember); }

.pressure-gauge {
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 13px;
  justify-items: center;
}

.gauge-label { writing-mode: vertical-rl; }
.gauge-track {
  width: 2px;
  height: 38vh;
  display: block;
  background: rgba(49, 68, 90, 0.55);
  overflow: hidden;
  box-shadow: 0 0 18px rgba(12, 30, 51, 0.8);
}
.gauge-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--cyan), var(--violet), var(--ember));
  box-shadow: 0 0 15px rgba(92, 225, 230, 0.9);
}
.gauge-mark { font-family: var(--font-mono); color: rgba(231, 236, 239, 0.35); }

main { position: relative; z-index: 5; }

.chamber {
  position: relative;
  min-height: 106vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  margin-top: -6vh;
  overflow: hidden;
}

.chamber:first-child { margin-top: 0; }

.chamber::before {
  content: attr(data-chapter) " / " attr(data-code);
  position: absolute;
  left: clamp(24px, 6vw, 86px);
  bottom: 8vh;
  z-index: 9;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(231, 236, 239, 0.31);
}

.chamber::after {
  content: "";
  position: absolute;
  left: 4vw;
  right: 4vw;
  top: 2vh;
  height: 14vh;
  z-index: -1;
  border: 1px solid rgba(49, 68, 90, 0.16);
  background: linear-gradient(180deg, rgba(231, 236, 239, 0.03), transparent);
  transform: skewX(-8deg);
}

.depth {
  position: absolute;
  width: 74vw;
  height: 58vh;
  border: 1px solid rgba(49, 68, 90, 0.26);
  background:
    linear-gradient(135deg, rgba(12, 30, 51, 0.62), rgba(2, 5, 9, 0.18)),
    radial-gradient(circle at 70% 20%, rgba(92, 225, 230, 0.045), transparent 28%);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.58), inset 0 0 80px rgba(49, 68, 90, 0.18);
  transform: translate3d(var(--deep-x, 0), var(--deep-y, 0), 0) rotate(-3deg);
  transition: transform 900ms cubic-bezier(.2, 1.1, .25, 1);
}

.wafer {
  position: absolute;
  z-index: 2;
  width: min(72vw, 950px);
  height: 22vh;
  border: 1px solid rgba(231, 236, 239, 0.08);
  background:
    linear-gradient(90deg, rgba(2, 5, 9, 0.78), rgba(12, 30, 51, 0.58), rgba(49, 68, 90, 0.14)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(92, 225, 230, 0.025) 13px 14px);
  box-shadow: 0 24px 70px rgba(2, 5, 9, 0.62), inset 0 0 42px rgba(92, 225, 230, 0.035);
  backdrop-filter: blur(8px);
  transform: translate3d(var(--wafer-x, 0), var(--wafer-y, 0), 0) rotate(var(--rot, 0deg));
  transition: transform 1000ms cubic-bezier(.22, 1.4, .28, 1), opacity 800ms ease;
}

.wafer-a { --rot: -7deg; top: 27vh; left: 8vw; }
.wafer-b { --rot: 5deg; bottom: 24vh; right: 11vw; opacity: 0.72; }
.wafer-c { --rot: 8deg; width: 64vw; right: 12vw; top: 34vh; }
.wafer-d { --rot: -4deg; width: 58vw; left: 18vw; bottom: 21vh; }
.wafer-e { --rot: 3deg; width: 70vw; top: 36vh; left: 14vw; }
.compressed { height: 16vh; filter: saturate(1.2); }

body.pressurized .wafer-a { --wafer-x: 2vw; --wafer-y: 4vh; }
body.pressurized .wafer-b { --wafer-x: -3vw; --wafer-y: -3vh; }
body.pressurized .trace { stroke-dashoffset: 0; opacity: 1; }
body.pressurized .nodes circle { opacity: 1; transform: scale(1); }

.bond-map {
  position: absolute;
  z-index: 3;
  width: min(78vw, 1040px);
  height: auto;
  opacity: 0.86;
  overflow: visible;
  transform: translate3d(var(--map-x, 0), var(--map-y, 0), 0);
  transition: transform 900ms cubic-bezier(.18, 1.2, .28, 1);
}
.bond-map.offset { left: 9vw; top: 16vh; }
.final-map { filter: drop-shadow(0 0 20px rgba(92, 225, 230, 0.13)); }

.trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 980;
  stroke-dashoffset: 980;
  opacity: 0.24;
  transition: stroke-dashoffset 1800ms cubic-bezier(.2, 1.1, .25, 1), opacity 900ms ease;
}
.trace.primary { stroke: var(--cyan); stroke-width: 2; filter: drop-shadow(0 0 12px rgba(92, 225, 230, 0.55)); }
.trace.secondary { stroke: rgba(107, 92, 255, 0.58); stroke-width: 1.2; }
.chamber.active .trace { stroke-dashoffset: 0; opacity: 1; }

.nodes circle {
  fill: rgba(92, 225, 230, 0.8);
  stroke: rgba(231, 236, 239, 0.42);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.48);
  opacity: 0.18;
  transition: transform 900ms cubic-bezier(.2, 1.6, .24, 1), opacity 700ms ease;
}
.chamber.active .nodes circle { transform: scale(1); opacity: 1; }

.label-plane {
  position: relative;
  z-index: 8;
  width: min(58vw, 760px);
  margin-left: -18vw;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(231, 236, 239, 0.09);
  background: linear-gradient(135deg, rgba(7, 17, 31, 0.76), rgba(12, 30, 51, 0.34));
  box-shadow: 0 32px 120px rgba(2, 5, 9, 0.75), inset 0 1px 0 rgba(231, 236, 239, 0.08);
  backdrop-filter: blur(12px);
  transform: translate3d(var(--label-x, 0), var(--label-y, 0), 0);
  transition: transform 800ms cubic-bezier(.2, 1.1, .25, 1), border-color 600ms ease;
}

.chamber.active .label-plane { border-color: rgba(92, 225, 230, 0.22); }
.label-plane.slim { margin-left: 16vw; width: min(48vw, 640px); }
.label-plane.high { margin-left: -8vw; margin-top: -12vh; }
.label-plane.narrow { width: min(44vw, 590px); margin-left: 24vw; }
.final-label { margin-left: -8vw; text-align: left; }

.kicker {
  display: block;
  margin-bottom: 22px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ember);
  text-transform: lowercase;
}

h1, h2, p { margin: 0; }
h1 {
  font-weight: 800;
  font-size: clamp(68px, 12vw, 178px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: rgba(231, 236, 239, 0.94);
  text-shadow: 0 0 40px rgba(92, 225, 230, 0.08);
  clip-path: inset(0 0 var(--reveal, 100%) 0);
  animation: pressureReveal 1800ms cubic-bezier(.2, 1.1, .2, 1) 260ms forwards;
}

h2 {
  font-weight: 800;
  font-size: clamp(38px, 6.2vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: 850px;
}

p {
  margin-top: 28px;
  max-width: 520px;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.25;
  color: rgba(231, 236, 239, 0.68);
}

.mono-note {
  position: absolute;
  left: 11vw;
  top: 18vh;
  z-index: 9;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(92, 225, 230, 0.48);
}
.mono-note.right { left: auto; right: 11vw; top: auto; bottom: 17vh; }

.hex-field {
  position: absolute;
  inset: 14vh 12vw;
  z-index: 3;
  opacity: 0.58;
}
.hex-field span {
  position: absolute;
  width: 150px;
  height: 132px;
  border: 1px solid rgba(92, 225, 230, 0.18);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: inset 0 0 36px rgba(107, 92, 255, 0.08), 0 0 28px rgba(92, 225, 230, 0.04);
  animation: hexBreathe 6s ease-in-out infinite;
}
.hex-field span:nth-child(1) { left: 12%; top: 16%; }
.hex-field span:nth-child(2) { left: 28%; top: 28%; animation-delay: -1s; }
.hex-field span:nth-child(3) { left: 45%; top: 11%; animation-delay: -2s; }
.hex-field span:nth-child(4) { left: 57%; top: 38%; animation-delay: -3s; }
.hex-field span:nth-child(5) { left: 70%; top: 20%; animation-delay: -4s; }
.hex-field span:nth-child(6) { left: 36%; top: 54%; animation-delay: -5s; }

.lattice-shadow { background-image: linear-gradient(135deg, rgba(2, 5, 9, 0.72), rgba(12, 30, 51, 0.26)); }

.node-cluster {
  position: absolute;
  width: min(74vw, 980px);
  height: 62vh;
  z-index: 4;
}
.node-cluster i,
.node-cluster b {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: rgba(92, 225, 230, 0.72);
  box-shadow: 0 0 23px rgba(92, 225, 230, 0.34);
  transform: translate3d(var(--cluster-x, 0), var(--cluster-y, 0), 0);
  transition: transform 900ms cubic-bezier(.2, 1.3, .25, 1);
}
.node-cluster i { width: 13px; height: 13px; }
.node-cluster b { width: 80px; height: 1px; border-radius: 0; opacity: 0.32; transform-origin: left center; }
.node-cluster i:nth-child(1) { left: 10%; top: 45%; }
.node-cluster i:nth-child(2) { left: 20%; top: 35%; }
.node-cluster i:nth-child(3) { left: 34%; top: 55%; }
.node-cluster i:nth-child(4) { left: 44%; top: 28%; }
.node-cluster i:nth-child(5) { left: 58%; top: 48%; }
.node-cluster i:nth-child(6) { left: 68%; top: 38%; }
.node-cluster i:nth-child(7) { left: 78%; top: 58%; }
.node-cluster i:nth-child(8) { left: 88%; top: 31%; }
.node-cluster b:nth-of-type(1) { left: 20%; top: 37%; transform: rotate(23deg); }
.node-cluster b:nth-of-type(2) { left: 44%; top: 31%; transform: rotate(34deg); width: 150px; }
.node-cluster b:nth-of-type(3) { left: 67%; top: 41%; transform: rotate(22deg); width: 120px; }
.chamber.active .node-cluster i { --cluster-y: -1.2vh; }

.facet { clip-path: polygon(11% 18%, 72% 5%, 95% 46%, 66% 88%, 18% 72%); }

.quiet-entry {
  display: inline-block;
  margin-top: 38px;
  color: var(--cyan);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(92, 225, 230, 0.5);
  padding-bottom: 8px;
  transition: color 400ms ease, border-color 400ms ease, transform 400ms ease;
}
.quiet-entry:hover { color: var(--bone); border-color: var(--ember); transform: translateX(8px); }

@keyframes pressureReveal {
  from { clip-path: inset(0 0 100% 0); filter: blur(10px); transform: translateY(18px) scaleY(0.88); }
  72% { clip-path: inset(0 0 -4% 0); transform: translateY(-3px) scaleY(1.05); }
  to { clip-path: inset(0 0 0 0); filter: blur(0); transform: translateY(0) scaleY(1); }
}

@keyframes dustDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-11px, 7px, 0); }
}

@keyframes hexBreathe {
  0%, 100% { transform: scale(0.96) rotate(0deg); opacity: 0.32; }
  50% { transform: scale(1.06) rotate(2deg); opacity: 0.72; }
}

@media (max-width: 760px) {
  .corner-nav { right: 18px; gap: 10px; font-size: 9px; }
  .site-code { left: 18px; }
  .pressure-gauge { display: none; }
  .chamber { min-height: 100vh; margin-top: 0; }
  .label-plane, .label-plane.slim, .label-plane.high, .label-plane.narrow, .final-label {
    width: calc(100vw - 36px);
    margin-left: 0;
    padding: 28px;
  }
  h1 { font-size: clamp(58px, 18vw, 96px); }
  h2 { font-size: clamp(36px, 11vw, 58px); }
  p { font-size: 18px; }
  .wafer { width: 92vw; left: 4vw; right: auto; }
  .bond-map { width: 112vw; }
  .mono-note, .mono-note.right { left: 22px; right: auto; top: auto; bottom: 8vh; }
}