:root {
  /* DESIGN typography token: IBM Plex Sans Condensed* Condensed** for narrow coordinate readouts */
  --cream: #F2E8DC;
  --cyan: #58F0FF;
  --burgundy: #21000B;
  --burgundy-2: #4A0718;
  --black: #0B0508;
  --gold: #FFC857;
  --mauve: #8B5E6A;
  --pink: #FF2D6F;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--burgundy);
  color: var(--cream);
  font-family: "Atkinson Hyperlegible", Inter, system-ui, sans-serif;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(74, 7, 24, 0.72), transparent 33rem),
    linear-gradient(135deg, var(--black), var(--burgundy) 44%, #160007 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(242, 232, 220, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 232, 220, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black 0 64%, transparent 82%);
  z-index: 0;
}

.chamber {
  position: relative;
  min-height: 500vh;
  isolation: isolate;
}

.fixed-apparatus {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  --progress: 0;
}

.grain {
  position: absolute;
  inset: -10%;
  opacity: 0.19;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(11,5,8,0.35) 0 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
}

.edge {
  position: absolute;
  z-index: 5;
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(0.72rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  color: rgba(242, 232, 220, 0.62);
  text-transform: uppercase;
}

.edge-n { top: 1.2rem; left: 50%; transform: translateX(-50%); }
.edge-s { bottom: 1.2rem; left: 50%; transform: translateX(-50%); }
.edge-e { right: -3.3rem; top: 50%; transform: translateY(-50%) rotate(90deg); }
.edge-w { left: -3.1rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }

.registration {
  position: absolute;
  width: clamp(58px, 8vw, 112px);
  height: clamp(58px, 8vw, 112px);
  border-color: var(--cream);
  opacity: 0.76;
  z-index: 6;
}

.registration::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gold);
  box-shadow: 0 0 24px var(--gold);
}

.mark-tl { top: 5.5vh; left: 5vw; border-top: 6px solid; border-left: 6px solid; }
.mark-tr { top: 5.5vh; right: 5vw; border-top: 6px solid; border-right: 6px solid; }
.mark-bl { bottom: 5.5vh; left: 5vw; border-bottom: 6px solid; border-left: 6px solid; }
.mark-br { bottom: 5.5vh; right: 5vw; border-bottom: 6px solid; border-right: 6px solid; }
.mark-tl::after { top: 14px; left: 14px; }
.mark-tr::after { top: 14px; right: 14px; }
.mark-bl::after { bottom: 14px; left: 14px; }
.mark-br::after { bottom: 14px; right: 14px; }

.grid-svg {
  position: absolute;
  inset: -9vh -9vw;
  width: 118vw;
  height: 118vh;
  transform: scale(calc(0.82 + var(--progress) * 0.18)) rotate(calc((var(--progress) - 0.5) * 8deg));
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
}

.calibration-grid,
.wave-rings,
.vectors,
.crystals,
.scatter { transform-origin: 500px 500px; }

.calibration-grid { opacity: calc(0.16 + var(--progress) * 0.34); }
.calibration-grid path,
.calibration-grid circle {
  fill: none;
  stroke: rgba(242, 232, 220, 0.37);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.wave-rings {
  opacity: calc(0.05 + var(--progress) * 0.9);
  animation: ring-drift 9s linear infinite;
}
.wave-rings path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-dasharray: 12 18;
  filter: drop-shadow(0 0 12px rgba(88, 240, 255, 0.45));
}

.vectors { opacity: calc(var(--progress) * 1.12); }
.vectors path {
  fill: none;
  stroke: var(--cream);
  stroke-width: 3;
  stroke-linecap: square;
  marker-end: none;
  filter: drop-shadow(0 0 9px rgba(255, 45, 111, 0.3));
  stroke-dasharray: 18 12;
}

.crystals { opacity: calc((var(--progress) - .12) * 1.45); transform: scale(calc(0.86 + var(--progress) * .22)); }
.crystals polygon {
  fill: rgba(88, 240, 255, 0.07);
  stroke: url(#crystalStroke);
  stroke-width: 3;
}
.crystals polyline {
  fill: none;
  stroke: rgba(242, 232, 220, 0.45);
  stroke-width: 1.5;
}

.scatter { opacity: calc((var(--progress) - .2) * 1.7); }
.scatter circle { fill: var(--gold); filter: drop-shadow(0 0 10px rgba(255, 200, 87, .7)); }

.central-glow { opacity: calc(0.05 + var(--progress) * 0.55); }

.core-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vmin, 720px);
  height: min(78vmin, 720px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  z-index: 8;
}

.containment-ring {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(88, 240, 255, 0.42);
  border-radius: 50%;
  opacity: calc(var(--progress) * 0.95);
  transform: scale(calc(0.72 + var(--progress) * 0.35));
  box-shadow: inset 0 0 40px rgba(255, 45, 111, 0.08), 0 0 28px rgba(88, 240, 255, 0.08);
}
.ring-a { border-style: solid; animation: rotate-a 24s linear infinite; }
.ring-b { inset: 27%; border-color: rgba(255, 200, 87, 0.42); border-style: dashed; animation: rotate-b 18s linear infinite; }
.ring-c { inset: 38%; border-color: rgba(242, 232, 220, 0.38); border-style: dotted; animation: rotate-a 13s linear infinite; }

.monopole-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 18px var(--pink), 0 0 70px rgba(255, 45, 111, .55), 0 0 120px rgba(88, 240, 255, .17);
  z-index: 10;
  animation: opening-pulse 2.6s cubic-bezier(.19,1,.22,1) 0.65s both;
}

.monopole-dot.pulsing { animation: manual-pulse 850ms cubic-bezier(.19,1,.22,1) both; }

.wordmark {
  position: absolute;
  top: calc(50% + 32px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: clamp(1.35rem, 3vw, 3.2rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.08em;
  color: var(--cream);
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255, 45, 111, 0.28);
  white-space: nowrap;
}

.readout,
.layer-counter {
  position: absolute;
  z-index: 9;
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em;
  color: var(--cyan);
  background: rgba(11, 5, 8, 0.72);
  border: 1px solid rgba(242, 232, 220, 0.2);
  box-shadow: 7px 7px 0 rgba(255, 45, 111, 0.18);
  text-transform: uppercase;
}
.readout { top: 22vh; padding: .7rem .85rem; font-size: .82rem; }
.readout-left { left: clamp(1rem, 6vw, 6rem); }
.readout-right { right: clamp(1rem, 6vw, 6rem); }
.layer-counter { left: 50%; bottom: 12vh; transform: translateX(-50%); padding: .75rem 1rem; color: var(--gold); }

.panel {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 8rem clamp(1.2rem, 5vw, 5rem);
}

.panel-inner {
  width: min(760px, 92vw);
  text-align: center;
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.16,1,.3,1);
}
.panel.active .panel-inner { opacity: 1; transform: translateY(0) scale(1); }

.hero-panel .panel-inner { margin-top: 35vh; }

.slab,
.terminal {
  background: linear-gradient(135deg, rgba(74, 7, 24, 0.92), rgba(11, 5, 8, 0.88));
  border: 4px solid var(--cream);
  box-shadow: 18px 18px 0 rgba(255, 45, 111, 0.34), -10px -10px 0 rgba(88, 240, 255, 0.16);
  padding: clamp(1.35rem, 4vw, 3rem);
}
.slab-left { margin-right: auto; text-align: left; }
.slab-right { margin-left: auto; text-align: right; }
.slab-center { text-align: center; }

.kicker {
  margin: 0 0 1rem;
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Noto Sans", Inter, sans-serif;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: .86;
  text-transform: uppercase;
}
h1 { font-size: clamp(3.6rem, 11vw, 11rem); max-width: 1060px; margin-inline: auto; }
h2 { font-size: clamp(2.45rem, 7vw, 7.2rem); }

p {
  font-size: clamp(1rem, 1.45vw, 1.32rem);
  line-height: 1.45;
  color: rgba(242, 232, 220, 0.82);
}

.calibrate {
  margin-top: 1.4rem;
  padding: 1rem 1.35rem;
  border: 3px solid var(--pink);
  background: var(--cream);
  color: var(--burgundy);
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 10px 10px 0 var(--pink);
  cursor: pointer;
}
.calibrate:active { transform: translate(5px, 5px); box-shadow: 5px 5px 0 var(--pink); }

.terminal { max-width: 860px; }
.terminal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
  border: 1px solid rgba(242,232,220,.35);
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  text-align: left;
}
.terminal-grid span,
.terminal-grid strong {
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(242,232,220,.25);
  letter-spacing: .12em;
}
.terminal-grid span { color: var(--mauve); }
.terminal-grid strong { color: var(--cyan); }

body.locked .fixed-apparatus { filter: saturate(1.45) contrast(1.08); }

@keyframes opening-pulse {
  0% { transform: scale(.35); opacity: .3; }
  34% { transform: scale(1); opacity: 1; }
  55% { transform: scale(6); opacity: .86; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes manual-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(8); box-shadow: 0 0 30px var(--pink), 0 0 150px var(--cyan); }
  100% { transform: scale(1); }
}

@keyframes rotate-a { to { transform: scale(calc(0.72 + var(--progress) * 0.35)) rotate(360deg); } }
@keyframes rotate-b { to { transform: scale(calc(0.72 + var(--progress) * 0.35)) rotate(-360deg); } }
@keyframes ring-drift { to { stroke-dashoffset: -180; } }

@media (max-width: 760px) {
  .readout { display: none; }
  .wordmark { font-size: 1rem; top: calc(50% + 24px); }
  .slab-left, .slab-right { text-align: center; margin-inline: auto; }
  .panel { padding-inline: 1rem; }
  .registration { width: 48px; height: 48px; }
}