:root {
  /* Typography compliance: IBM Plex Mono for specimen numbers; Space Grotesk** for explanatory fragments. */
  --font-token-grotesk: "Grotesk**";
  --void-enamel: #06070A;
  --magnetite: #111927;
  --oxidized-iron: #8A3D2B;
  --rare-violet: #6F4BFF;
  --ion-green: #A9FFCB;
  --chalk-dust: #E8E2D0;
  --warning-amber: #F0B94A;
  --deep-cyan: #2AD8FF;
  --field-x: 58vw;
  --field-y: 56vh;
  --scroll-strength: 0;
}

* { box-sizing: border-box; }

html {
  background: #06070A;
  color: #E8E2D0;
  font-family: "Space Grotesk", sans-serif;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at var(--field-x) var(--field-y), rgba(42, 216, 255, 0.14) 0 1px, transparent 11vw),
    radial-gradient(circle at 68% 65%, rgba(111, 75, 255, 0.18), transparent 34vw),
    linear-gradient(102deg, #06070A 0%, #111927 46%, #06070A 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.48;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(rgba(232,226,208,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,226,208,0.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(6,7,10,0.64) 76%);
  background-size: 43px 43px, 43px 43px, 100% 100%;
}

.field-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.field-background::before {
  content: "";
  position: absolute;
  width: 86vmin;
  height: 86vmin;
  left: calc(var(--field-x) - 43vmin);
  top: calc(var(--field-y) - 43vmin);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from calc(var(--scroll-strength) * 0.16deg), rgba(232,226,208,0.22) 0 0.7deg, transparent 0.7deg 11deg),
    radial-gradient(circle, transparent 0 12%, rgba(42,216,255,0.11) 12.4% 12.8%, transparent 13.2% 29%, rgba(169,255,203,0.11) 29.5% 30%, transparent 30.6% 46%, rgba(240,185,74,0.11) 46.6% 47%, transparent 47.6%);
  filter: blur(0.1px);
  opacity: 0.56;
  transform: rotate(-2deg) scale(calc(1 + var(--scroll-strength) * 0.0008));
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.22;
  mix-blend-mode: screen;
}

.aurora-violet {
  width: 52vw;
  height: 52vw;
  right: -18vw;
  top: 20vh;
  background: #6F4BFF;
}

.aurora-cyan {
  width: 36vw;
  height: 36vw;
  left: 36vw;
  bottom: -16vw;
  background: #2AD8FF;
}

.meridian-wire {
  position: fixed;
  top: -10vh;
  left: calc(var(--field-x) - 2px);
  width: 1px;
  height: 120vh;
  background: linear-gradient(180deg, transparent, rgba(232,226,208,0.46), #A9FFCB, rgba(111,75,255,0.5), transparent);
  box-shadow: 0 0 18px rgba(42,216,255,0.32);
  transform: rotate(-1.4deg);
  transform-origin: 50% 56vh;
}

.singularity {
  position: fixed;
  left: calc(var(--field-x) - 16px);
  top: calc(var(--field-y) - 16px);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #06070A 0 32%, #2AD8FF 34% 38%, #A9FFCB 40% 42%, transparent 45%);
  box-shadow: 0 0 38px rgba(42,216,255,0.6), 0 0 90px rgba(111,75,255,0.35);
  transform: scale(calc(0.75 + var(--scroll-strength) * 0.001));
}

.filing-field {
  position: fixed;
  inset: 0;
}

.filing {
  position: absolute;
  width: 2px;
  height: 12px;
  border-radius: 12px;
  background: linear-gradient(#E8E2D0, #8A3D2B);
  opacity: 0.52;
  box-shadow: 0 0 8px rgba(169,255,203,0.25);
  transform-origin: center;
}

.chamber-gauge {
  position: fixed;
  z-index: 5;
  left: 22px;
  right: 22px;
  top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(232,226,208,0.7);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(232,226,208,0.06);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 8vh 6vw;
  border: 1px solid rgba(232,226,208,0.08);
  border-radius: 50%;
  transform: rotate(-1.6deg) translateY(calc(var(--scroll-strength) * -0.02px));
  pointer-events: none;
}

.scene-inner {
  width: min(1180px, 92vw);
  min-height: 78vh;
  position: relative;
  z-index: 2;
}

.field-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.52;
  pointer-events: none;
  mix-blend-mode: screen;
}

.field-svg path {
  fill: none;
  stroke: url(#none);
  stroke: #2AD8FF;
  stroke-width: 1.1;
  stroke-dasharray: 4 11;
  filter: url(#softGlow);
  animation: dashDrift 18s linear infinite;
}

.field-svg path:nth-child(even) { stroke: #A9FFCB; animation-duration: 24s; }
.field-svg path:nth-child(3n) { stroke: #6F4BFF; animation-duration: 31s; }

.intro-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: 7vw;
}

.instrument-plate {
  position: relative;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid rgba(232,226,208,0.18);
  border-radius: 999px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(17,25,39,0.68), rgba(6,7,10,0.08) 68%),
    conic-gradient(from 22deg, transparent, rgba(138,61,43,0.34), transparent, rgba(240,185,74,0.1), transparent);
  box-shadow: inset 0 0 70px rgba(0,0,0,0.78), 0 0 60px rgba(111,75,255,0.12);
}

.compass {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  transform: rotate(calc(var(--scroll-strength) * 0.04deg));
}

.compass-ring, .compass-ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.compass-ring {
  border: 1px solid rgba(232,226,208,0.34);
  box-shadow: inset 0 0 34px rgba(42,216,255,0.08);
}

.compass-ticks {
  background: repeating-conic-gradient(rgba(232,226,208,0.6) 0 1deg, transparent 1deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 0 81%, #000 82% 84%, transparent 85%);
  mask: radial-gradient(circle, transparent 0 81%, #000 82% 84%, transparent 85%);
  animation: precess 24s linear infinite;
}

.needle {
  position: absolute;
  left: calc(50% - 5px);
  top: 10%;
  width: 10px;
  height: 40%;
  border-radius: 100% 100% 10px 10px;
  transform-origin: 50% 100%;
}

.needle-north {
  background: linear-gradient(#A9FFCB, #2AD8FF 52%, transparent);
  box-shadow: 0 0 22px rgba(42,216,255,0.8);
  animation: needleFailure 7.4s cubic-bezier(.72,.01,.21,1) infinite;
}

.needle-scar {
  top: 50%;
  height: 28%;
  background: linear-gradient(transparent, rgba(138,61,43,0.76));
  transform-origin: 50% 0;
  transform: rotate(186deg);
  opacity: 0.42;
}

.north-mark {
  position: absolute;
  left: calc(50% - 14px);
  top: -8px;
  color: #F0B94A;
  font-family: "IBM Plex Mono", monospace;
  font-size: 26px;
  text-shadow: 0 0 18px #F0B94A;
}

.south-erased {
  position: absolute;
  left: 42%;
  bottom: 2%;
  width: 18%;
  height: 16px;
  background: repeating-linear-gradient(-12deg, rgba(138,61,43,0.0), rgba(138,61,43,0.0) 3px, rgba(138,61,43,0.8) 4px, rgba(232,226,208,0.5) 5px);
  filter: blur(0.3px);
}

.mono-note, .chapter-code {
  font-family: "IBM Plex Mono", monospace;
  color: rgba(232,226,208,0.72);
  letter-spacing: 0.16em;
  font-size: 11px;
  text-transform: uppercase;
}

.instrument-plate .mono-note {
  position: absolute;
  left: 10%;
  bottom: 11%;
  width: 80%;
  text-align: center;
}

.title-orbit {
  transform: translateY(5vh) rotate(-1deg);
  max-width: 720px;
}

h1, h2 {
  font-family: "Cinzel", serif;
  font-weight: 700;
  margin: 0;
  color: #E8E2D0;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-shadow: 0 0 1px #E8E2D0, 0 0 38px rgba(111,75,255,0.22);
}

h1 {
  font-size: clamp(64px, 11vw, 172px);
  max-width: 7ch;
}

h2 {
  font-size: clamp(54px, 8vw, 142px);
  max-width: 8ch;
}

.diary {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 38px);
  color: rgba(232,226,208,0.8);
  max-width: 620px;
}

.split-left {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: end;
}

.scene-copy {
  align-self: center;
  transform: translateX(4vw) translateY(7vh) rotate(-1.2deg);
}

.scene-copy p:not(.chapter-code), .descent-copy p:not(.chapter-code):not(.mono-note) {
  max-width: 440px;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.25;
  color: rgba(232,226,208,0.76);
}

.choir-orbits {
  position: relative;
  height: 64vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 58%, transparent 0 17%, rgba(169,255,203,0.08) 17.2% 17.6%, transparent 18%),
    repeating-radial-gradient(circle at 48% 58%, transparent 0 38px, rgba(232,226,208,0.08) 39px, transparent 41px);
  transform: rotate(7deg);
}

.choir-orbits span {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #A9FFCB;
  text-shadow: 0 0 14px rgba(169,255,203,0.54);
}

.choir-orbits span:nth-child(1) { right: 13%; top: 22%; }
.choir-orbits span:nth-child(2) { left: 0; bottom: 28%; color: #2AD8FF; }
.choir-orbits span:nth-child(3) { right: 23%; bottom: 10%; color: #F0B94A; }

.archive-layout {
  display: grid;
  grid-template-columns: 0.72fr 1fr 0.55fr;
  align-items: center;
  gap: 3vw;
}

.scratched-equation {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(36px, 5vw, 82px);
  color: rgba(232,226,208,0.22);
  transform: rotate(-8deg);
  text-decoration: line-through;
  text-decoration-color: #8A3D2B;
}

.scratched-equation span { color: #F0B94A; text-decoration: none; }

.archive-stack {
  padding: 7vh 4vw;
  border-left: 1px solid rgba(240,185,74,0.3);
  border-right: 1px solid rgba(138,61,43,0.45);
  background: linear-gradient(90deg, rgba(17,25,39,0.56), rgba(6,7,10,0.16));
  transform: translateY(4vh) rotate(1.1deg);
}

.specimen-ledger {
  margin-top: 42px;
  max-width: 560px;
  font-family: "Space Grotesk", sans-serif;
  color: rgba(232,226,208,0.78);
}

.specimen-ledger p {
  padding: 14px 0;
  border-top: 1px solid rgba(232,226,208,0.12);
}

.specimen-ledger b {
  font-family: "IBM Plex Mono", monospace;
  color: #2AD8FF;
  font-weight: 400;
}

.rusted-bezel {
  justify-self: center;
  width: min(28vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(138,61,43,0.75);
  display: grid;
  place-items: center;
  color: #8A3D2B;
  font-family: "IBM Plex Mono", monospace;
  box-shadow: inset 0 0 40px rgba(138,61,43,0.28), 0 0 48px rgba(6,7,10,0.78);
}

.rusted-bezel span:last-child {
  position: absolute;
  transform: translateY(38px);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.scene-descent {
  background: radial-gradient(circle at 58% 56%, rgba(6,7,10,0.1) 0 8%, rgba(111,75,255,0.08) 9%, transparent 32%);
}

.nested-rings {
  position: absolute;
  width: 98vmin;
  height: 98vmin;
  left: calc(var(--field-x) - 49vmin);
  top: calc(var(--field-y) - 49vmin);
  transform: rotate(calc(-12deg + var(--scroll-strength) * 0.08deg));
}

.nested-rings div {
  position: absolute;
  inset: calc(var(--i, 0) * 7%);
  border: 1px solid rgba(232,226,208,0.16);
  border-left-color: #2AD8FF;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.nested-rings div:nth-child(1) { --i: 0; }
.nested-rings div:nth-child(2) { --i: 1; border-left-color: #A9FFCB; }
.nested-rings div:nth-child(3) { --i: 2; border-left-color: #6F4BFF; }
.nested-rings div:nth-child(4) { --i: 3; border-left-color: #F0B94A; }
.nested-rings div:nth-child(5) { --i: 4; border-left-color: #2AD8FF; }
.nested-rings div:nth-child(6) { --i: 5; border-left-color: #A9FFCB; }

.descent-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(6vw) translateY(9vh);
}

.final-chamber {
  display: grid;
  align-content: center;
  justify-items: start;
  padding-left: 6vw;
}

.final-chamber h2 {
  max-width: 10ch;
}

.north-scar {
  position: absolute;
  left: calc(var(--field-x) - 7vw);
  top: calc(var(--field-y) - 12vh);
  color: #F0B94A;
  font-family: "Cinzel", serif;
  font-size: clamp(62px, 9vw, 132px);
  text-shadow: 0 0 26px #F0B94A, 0 0 80px rgba(240,185,74,0.46);
}

.final-inscription {
  font-family: "IBM Plex Mono", monospace;
  color: #A9FFCB;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 34px;
}

@keyframes dashDrift { to { stroke-dashoffset: -220; } }
@keyframes precess { to { transform: rotate(360deg); } }
@keyframes needleFailure {
  0% { transform: rotate(12deg); }
  22% { transform: rotate(213deg); }
  42% { transform: rotate(71deg); }
  65% { transform: rotate(388deg); }
  100% { transform: rotate(12deg); }
}

@media (max-width: 820px) {
  :root { --field-x: 58vw; --field-y: 60vh; }
  .intro-grid, .split-left, .archive-layout { grid-template-columns: 1fr; }
  .instrument-plate { width: min(78vw, 390px); justify-self: center; }
  h1 { font-size: clamp(58px, 18vw, 108px); }
  h2 { font-size: clamp(48px, 15vw, 92px); }
  .chamber-gauge { font-size: 9px; flex-direction: column; gap: 6px; }
  .choir-orbits { height: 38vh; }
  .rusted-bezel { display: none; }
}