:root {
  /* Design typography trace: Space Grotesk** from Google Fonts for the main wordmark clipped by layered translucent panels; Inter** from Google Fonts for explanatory text; IBM Plex Mono** from Google Fonts for probability fragments. */
  --lacquer: #090605;
  --umber: #1A1110;
  --orange: #C95A1A;
  --gold: #F0A13A;
  --copper: #8F351C;
  --parchment: #F5E6D0;
  --cyan: #8DF4FF;
  --lilac: #C7A3FF;
  --rose: #FF8BBE;
  --holo: linear-gradient(135deg, #C95A1A, #F0A13A 42%, #8DF4FF 70%, #C7A3FF);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--parchment);
  background: radial-gradient(circle at 70% 8%, rgba(201, 90, 26, 0.18), transparent 30%), radial-gradient(circle at 20% 70%, rgba(199, 163, 255, 0.08), transparent 34%), var(--lacquer);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

.design-trace { display: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.21;
  z-index: 50;
  background-image: repeating-radial-gradient(circle at 11% 12%, rgba(245, 230, 208, 0.12) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.minimal-nav {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0.38;
  transition: opacity 500ms ease;
}

.minimal-nav:hover { opacity: 1; }

.nav-seal, .signature-seal {
  color: var(--parchment);
  text-decoration: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  border: 1px solid rgba(245, 230, 208, 0.28);
  padding: 8px 10px;
  background: rgba(26, 17, 16, 0.54);
  box-shadow: 0 0 24px rgba(201, 90, 26, 0.12), inset 0 0 16px rgba(240, 161, 58, 0.08);
}

.nav-dots { display: flex; gap: 11px; }

.nav-dot {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 999px;
  border: 1px solid rgba(245, 230, 208, 0.5);
  background: transparent;
  position: relative;
  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.nav-dot::after {
  content: attr(data-label);
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 230, 208, 0.62);
  font: 10px 'IBM Plex Mono', monospace;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.nav-dot:hover::after { opacity: 1; }
.nav-dot.active { background: var(--gold); box-shadow: 0 0 16px var(--orange); transform: scale(1.35); }

.progress-rail { width: 92px; height: 1px; background: rgba(245, 230, 208, 0.18); }
.progress-rail span { display: block; width: 0%; height: 100%; background: var(--holo); box-shadow: 0 0 12px rgba(141, 244, 255, 0.6); }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 9vw;
  background: linear-gradient(180deg, rgba(9, 6, 5, 0) 0%, rgba(26, 17, 16, 0.42) 100%);
}

.chamber::before {
  content: attr(data-chamber);
  position: absolute;
  right: 5vw;
  top: 5vw;
  font: 500 11px 'IBM Plex Mono', monospace;
  color: rgba(245, 230, 208, 0.27);
  letter-spacing: 0.5em;
}

.eyebrow, .section-label, .relic span, .orbital-note {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: rgba(245, 230, 208, 0.62);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 11px;
}

h1, h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.86;
}

h1 {
  font-size: clamp(78px, 18vw, 260px);
  color: rgba(245, 230, 208, 0.93);
  text-shadow: 0 0 50px rgba(240, 161, 58, 0.16), -2px 0 rgba(141, 244, 255, 0.34), 2px 0 rgba(255, 139, 190, 0.22);
}

h2 { font-size: clamp(52px, 8vw, 132px); max-width: 850px; }
p { font-size: clamp(16px, 1.45vw, 22px); line-height: 1.75; color: rgba(245, 230, 208, 0.68); }

.hero-copy {
  position: relative;
  z-index: 4;
  width: min-content;
  padding-top: 20vh;
}
.inscription { max-width: 510px; margin-left: 1vw; }

.ember-disc {
  position: absolute;
  width: 42vmin;
  height: 42vmin;
  right: 16vw;
  top: 17vh;
  border-radius: 50%;
  background: radial-gradient(circle, #F0A13A 0%, #C95A1A 35%, rgba(143, 53, 28, 0.48) 58%, transparent 71%);
  filter: blur(3px);
  opacity: 0.74;
  box-shadow: 0 0 120px rgba(201, 90, 26, 0.5);
}

.pane, .curtain {
  position: absolute;
  border: 1px solid rgba(141, 244, 255, 0.18);
  background: linear-gradient(135deg, rgba(245, 230, 208, 0.05), rgba(141, 244, 255, 0.08), rgba(199, 163, 255, 0.05));
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 26px rgba(255, 139, 190, 0.06), 0 0 40px rgba(141, 244, 255, 0.08);
  mix-blend-mode: screen;
}
.pane-a { width: 32vw; height: 54vh; left: 24vw; top: 17vh; transform: rotate(-7deg); }
.pane-b { width: 22vw; height: 66vh; left: 54vw; top: 12vh; transform: rotate(9deg); }
.pane-c { width: 13vw; height: 34vh; left: 13vw; top: 45vh; transform: rotate(15deg); }

svg { overflow: visible; }
.branch-vellum { position: absolute; inset: 14vh 5vw auto auto; width: 58vw; height: auto; z-index: 6; opacity: 0.78; }
.draw-svg path, .draw-svg circle, .draw-svg ellipse, .draw-svg line {
  fill: none;
  stroke: rgba(245, 230, 208, 0.58);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1800ms cubic-bezier(.2,.7,.1,1), stroke 350ms ease, filter 350ms ease;
}
.draw-svg.in-view path, .draw-svg.in-view circle, .draw-svg.in-view ellipse { stroke-dashoffset: 0; }
.draw-svg text { fill: var(--parchment); font: 500 24px 'IBM Plex Mono', monospace; text-anchor: middle; }
.holo-path { stroke: var(--cyan); filter: drop-shadow(0 0 8px rgba(141,244,255,.6)); }

.formula-cloud { position: absolute; right: 7vw; bottom: 10vh; display: grid; gap: 18px; z-index: 8; }
.formula-cloud span, .bead {
  font: 500 13px 'IBM Plex Mono', monospace;
  color: var(--parchment);
  border: 1px solid rgba(240, 161, 58, 0.32);
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(26, 17, 16, 0.52);
  box-shadow: 0 0 24px rgba(201, 90, 26, 0.16);
}

.forking { padding-top: 18vh; }
.forking-text { position: relative; z-index: 5; margin-left: 8vw; max-width: 760px; }
.fork-svg { position: absolute; width: 94vw; left: 2vw; top: 11vh; opacity: 0.78; }
.fork-svg path:hover, .draw-svg:hover path { stroke: var(--cyan); filter: drop-shadow(0 0 10px rgba(141,244,255,.55)); }
.seal-group circle { fill: rgba(143, 53, 28, 0.36); stroke: var(--gold); }
.seal-group { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 500ms ease, filter 500ms ease; }
.seal-group:hover { transform: rotate(8deg) scale(1.16); filter: drop-shadow(0 0 12px rgba(240,161,58,.65)); }
.bead { position: absolute; cursor: pointer; transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; }
.bead:hover { border-color: var(--cyan); box-shadow: 0 0 28px rgba(141,244,255,.3); transform: translateY(-6px); }
.bead-one { right: 16vw; top: 23vh; }
.bead-two { left: 16vw; bottom: 22vh; }
.bead-three { right: 28vw; bottom: 14vh; }

.reliquary { min-height: 120vh; }
.reliquary-intro { max-width: 450px; margin-top: 6vh; }
.relic {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 18px;
  color: var(--parchment);
  padding: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 161, 58, 0.13), transparent 66%);
  transition: transform 600ms ease, filter 600ms ease;
}
.relic:hover { transform: translateY(-12px) rotate(2deg); filter: drop-shadow(0 0 32px rgba(240,161,58,.36)); }
.relic svg { width: clamp(190px, 24vw, 330px); height: auto; }
.coin { left: 9vw; top: 32vh; }
.urn { left: 42vw; top: 16vh; }
.fan { right: 7vw; top: 46vh; }

.horizon { min-height: 115vh; display: grid; align-items: center; }
.horizon-plane { position: absolute; width: 150vw; height: 24vh; left: -25vw; bottom: 17vh; background: linear-gradient(90deg, transparent, rgba(143, 53, 28, 0.4), #F0A13A, rgba(141, 244, 255, 0.28), transparent); filter: blur(12px); }
.curtain { width: 26vw; height: 110vh; top: 3vh; }
.curtain-one { left: 8vw; transform: skewX(-12deg); }
.curtain-two { left: 42vw; transform: skewX(8deg); }
.curtain-three { right: 4vw; transform: skewX(-5deg); }
.horizon-copy { position: relative; z-index: 5; max-width: 960px; margin-left: 9vw; }
.tick-field { position: absolute; right: 13vw; top: 13vh; display: flex; gap: 16px; height: 58vh; align-items: stretch; }
.tick-field span { width: 1px; background: repeating-linear-gradient(to bottom, rgba(245,230,208,.45) 0 8px, transparent 8px 23px); }

.throne { display: grid; place-items: center; text-align: center; }
.scale-svg { position: absolute; width: min(76vw, 1040px); top: 7vh; opacity: 0.8; }
.scale-svg path, .scale-svg ellipse { stroke: rgba(245, 230, 208, 0.5); }
.throne-copy { position: relative; z-index: 5; margin-top: 22vh; display: grid; justify-items: center; }
.throne-copy p { max-width: 580px; }
.signature-seal { margin-top: 24px; color: var(--gold); border-color: rgba(240, 161, 58, 0.52); }
.orbital-note { position: absolute; right: 12vw; bottom: 18vh; color: var(--cyan); }

.depth { will-change: transform; }

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}
.formula-cloud span, .relic, .bead, .orbital-note { animation: drift 7s ease-in-out infinite; }
.formula-cloud span:nth-child(2), .urn { animation-delay: -2s; }
.formula-cloud span:nth-child(3), .fan { animation-delay: -4s; }

@media (max-width: 760px) {
  .minimal-nav { left: 14px; top: 14px; gap: 10px; }
  .progress-rail { width: 40px; }
  .chamber { padding: 22vh 7vw 12vh; }
  .hero-copy { padding-top: 8vh; }
  .pane-a, .pane-b, .pane-c { width: 52vw; }
  .branch-vellum, .fork-svg { width: 130vw; left: -18vw; }
  .forking-text, .horizon-copy { margin-left: 0; }
  .relic { position: relative; left: auto; right: auto; top: auto; margin: 8vh auto; }
  .reliquary { min-height: auto; }
  .curtain { width: 42vw; }
}