:root {
  /* DESIGN typography token: IBM Plex Mono** for node labels */
  --black: #030303;
  --graphite: #11100D;
  --gold: #C8A24A;
  --ivory: #E8DFC8;
  --bronze: #7A5A24;
  --blue: #6FA8FF;
  --wine: #1A0710;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --body: "Libre Baskerville", Georgia, serif;
  --mono: "IBM Plex Mono", "Space Mono", monospace;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--black);
  color: var(--ivory);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: var(--body);
  background:
    radial-gradient(circle at 50% 22%, rgba(122, 90, 36, 0.13), transparent 28rem),
    radial-gradient(circle at 50% 58%, rgba(26, 7, 16, 0.44), transparent 34rem),
    linear-gradient(180deg, #030303 0%, #11100D 43%, #030303 100%);
}

.lacquer-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(232, 223, 200, 0.018) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(200, 162, 74, 0.012) 0 1px, transparent 1px 11px),
    radial-gradient(circle at center, transparent 0 22%, rgba(3, 3, 3, 0.74) 72%);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.lacquer-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(232, 223, 200, 0.08) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(200, 162, 74, 0.08) 0 1px, transparent 1.2px);
  background-size: 83px 83px, 137px 137px;
  background-position: 7px 19px, 41px 53px;
  opacity: 0.18;
}

.cursor-orbit {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 22rem;
  height: 22rem;
  margin: -11rem 0 0 -11rem;
  border: 1px solid rgba(200, 162, 74, 0.13);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--cursor-scale, 1));
  transition: transform 700ms cubic-bezier(.2,.7,.1,1), opacity 500ms ease;
  opacity: 0.55;
  box-shadow: inset 0 0 44px rgba(200, 162, 74, 0.04), 0 0 60px rgba(111, 168, 255, 0.025);
}

.engine { width: 100%; }

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6vw;
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 10vh 7vw;
  border-top: 1px solid rgba(122, 90, 36, 0.34);
  border-bottom: 1px solid rgba(122, 90, 36, 0.18);
  opacity: 0.42;
  pointer-events: none;
}

.aperture-chamber {
  background: radial-gradient(circle at center, rgba(200, 162, 74, 0.13), rgba(3, 3, 3, 0.2) 19rem, transparent 34rem);
}

.aperture-stage {
  position: relative;
  width: min(86vw, 780px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: scale(var(--aperture-scale, 1));
  transition: transform 900ms cubic-bezier(.2,.7,.1,1), filter 900ms ease;
}

.aperture-stage:hover,
.diagram-hover:hover { transform: scale(1.035); }

.aperture-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 24px rgba(200, 162, 74, 0.16));
}

.title-seal {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: sealResolve 2300ms cubic-bezier(.2,.7,.1,1) both;
}

.kicker {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: clamp(0.66rem, 1vw, 0.82rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  color: var(--ivory);
}

h1 {
  font-size: clamp(4.6rem, 13vw, 10.5rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-shadow: 0 0 32px rgba(200, 162, 74, 0.18);
}

h2 {
  max-width: 850px;
  font-size: clamp(2.6rem, 6.8vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

p {
  color: rgba(232, 223, 200, 0.75);
  font-size: clamp(0.98rem, 1.35vw, 1.18rem);
  line-height: 1.85;
}

.seal-line {
  width: min(34rem, 80vw);
  margin: 1.35rem auto 0;
  color: rgba(232, 223, 200, 0.66);
  font-size: 0.92rem;
}

.margin-note {
  position: absolute;
  max-width: 15rem;
  color: rgba(232, 223, 200, 0.42);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.margin-note span { color: var(--blue); }
.note-left { left: 7vw; top: 24vh; }
.note-right { right: 7vw; bottom: 24vh; text-align: right; }

svg { overflow: visible; }
.ring, .ticks path, .circuit-lines path, .draw-path, .tree-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.ring.dim, .dead { stroke: var(--bronze); opacity: 0.25; }
.ring.bronze { stroke: var(--bronze); opacity: 0.55; }
.ticks path { stroke: var(--bronze); opacity: 0.7; }
.blue-thread { stroke: var(--blue); opacity: 0.9; filter: drop-shadow(0 0 9px rgba(111, 168, 255, 0.55)); }
.origin-point, .node, .solder-points circle {
  fill: var(--gold);
  filter: drop-shadow(0 0 10px rgba(200, 162, 74, 0.48));
}
.dead-node { fill: var(--bronze); opacity: 0.34; }
.blue-node { fill: var(--blue); filter: drop-shadow(0 0 14px rgba(111, 168, 255, 0.72)); }

.draw-path {
  stroke-dasharray: var(--path-length, 900);
  stroke-dashoffset: var(--path-length, 900);
  animation: drawLine 2600ms cubic-bezier(.45,0,.05,1) forwards;
}

.pulse { animation: nodeBreath 3600ms ease-in-out infinite; transform-origin: center; }

.premise-chamber,
.constellation-chamber {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
  gap: 7vw;
}

.branch-chamber {
  grid-template-columns: minmax(22rem, 1.15fr) minmax(18rem, 0.85fr);
  gap: 6vw;
}

.chamber-copy { max-width: 36rem; }
.chamber-copy p:last-child { max-width: 31rem; }
.side-copy { justify-self: start; }

.logic-node, .proof-tree, .constellation, .matrix-card, .answer-seal {
  position: relative;
  width: min(74vw, 620px);
  transition: transform 800ms cubic-bezier(.2,.7,.1,1), filter 800ms ease;
}

.proof-tree { width: min(78vw, 760px); }
.constellation { width: min(82vw, 790px); }

.mono-label {
  position: absolute;
  right: 6%;
  bottom: 9%;
  color: rgba(232, 223, 200, 0.48);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.matrix-chamber {
  background: radial-gradient(circle at center, rgba(26, 7, 16, 0.6), transparent 36rem);
}

.matrix-card {
  width: min(86vw, 720px);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid rgba(122, 90, 36, 0.56);
  background:
    linear-gradient(135deg, rgba(17, 16, 13, 0.94), rgba(3, 3, 3, 0.82)),
    radial-gradient(circle at 76% 20%, rgba(200, 162, 74, 0.12), transparent 16rem);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.82), inset 0 0 40px rgba(200, 162, 74, 0.035);
}

.matrix-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(232, 223, 200, 0.48);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 2rem 0;
  border: 1px solid rgba(122, 90, 36, 0.26);
  background: rgba(122, 90, 36, 0.18);
}

.matrix-grid span {
  aspect-ratio: 1.35;
  background: rgba(3, 3, 3, 0.82);
  box-shadow: inset 0 0 22px rgba(200, 162, 74, 0.025);
  transition: transform 500ms ease, background 500ms ease;
}
.matrix-grid span:hover { transform: scale(1.04); background: rgba(200, 162, 74, 0.12); }
.matrix-grid .lit { background: rgba(200, 162, 74, 0.3); box-shadow: inset 0 0 30px rgba(200, 162, 74, 0.2); }
.matrix-grid .blue { background: rgba(111, 168, 255, 0.28); box-shadow: inset 0 0 35px rgba(111, 168, 255, 0.24); }
.matrix-grid .void { background: #1A0710; }
.matrix-grid .bronze-cell { background: rgba(122, 90, 36, 0.26); }

.theorem-line {
  margin: 0;
  color: var(--ivory);
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.1vw, 3.2rem);
  line-height: 1.08;
}

.answer-chamber {
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(200, 162, 74, 0.11), rgba(3, 3, 3, 0.1) 26rem, #030303 100%);
}

.answer-seal { width: min(86vw, 760px); }
.answer-seal h2 { margin: 0 auto; font-size: clamp(2.5rem, 6vw, 5.5rem); }
.final-path { stroke-width: 1.8; }

.engraved-seal {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.82rem 1.2rem;
  color: var(--gold);
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  background: rgba(17, 16, 13, 0.52);
  transition: transform 550ms ease, color 550ms ease, border-color 550ms ease;
}
.engraved-seal:hover { transform: translateX(-50%) scale(1.04); color: var(--ivory); border-color: var(--blue); }

.is-visible .draw-path { animation-play-state: running; }
.is-muted { opacity: 0.42; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes nodeBreath { 0%, 100% { transform: scale(1); opacity: 0.86; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes sealResolve { 0% { opacity: 0; transform: scale(0.94); filter: blur(10px); } 58% { opacity: 0.72; } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }

@media (max-width: 860px) {
  .premise-chamber, .branch-chamber, .constellation-chamber { grid-template-columns: 1fr; text-align: center; }
  .branch-chamber .proof-tree { order: 2; }
  .side-copy, .chamber-copy { justify-self: center; }
  .margin-note { display: none; }
  .chamber { padding: 5rem 1.25rem; }
  .chamber::before { inset: 6vh 1.2rem; }
  .cursor-orbit { display: none; }
}