/* skeleton-loading bars labeled `hypothesis`; IBM Plex Mono** 400/500 specimen IDs; Space Grotesk** 600/700 weights for `scientific.quest` */
:root {
  --void: #05040B;
  --indigo: #171044;
  --amethyst: #7C3AED;
  --emerald: #00A676;
  --ruby: #D7265E;
  --sapphire: #2457FF;
  --chalk: #E9E4D8;
  --brass: #B88A2D;
  --display: "Space Grotesk", "Space", "Inter", system-ui, sans-serif;
  --editorial: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--void);
  color: var(--chalk);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--display);
  background:
    radial-gradient(circle at 50% 45%, rgba(124, 58, 237, .13), transparent 23rem),
    radial-gradient(circle at 18% 72%, rgba(36, 87, 255, .1), transparent 18rem),
    linear-gradient(180deg, var(--void), #070512 38%, var(--void));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(233, 228, 216, .52) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(184, 138, 45, .35) 0 1px, transparent 1.5px);
  background-size: 97px 97px, 151px 151px;
  background-position: 12px 19px, 71px 45px;
  opacity: .18;
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(233, 228, 216, .025), transparent);
  opacity: .55;
}

.quest { position: relative; z-index: 2; }
.type-proof { display: none; }

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

.scene::before {
  content: "";
  position: absolute;
  width: min(72vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(233, 228, 216, .09);
  border-radius: 50%;
  transform: rotate(var(--spin, 0deg));
  box-shadow: inset 0 0 70px rgba(124, 58, 237, .06), 0 0 0 34px rgba(23, 16, 68, .05);
  z-index: -1;
}

.center-lock, .chapter-core {
  position: relative;
  z-index: 4;
  text-align: center;
  max-width: 920px;
}

.mono, .specimen, .coordinate {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(.62rem, 1vw, .78rem);
  color: var(--brass);
}

.overline { margin: 0 0 1.1rem; color: rgba(184, 138, 45, .9); }

.wordmark, .split-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.075em;
  text-transform: lowercase;
}

.wordmark {
  font-size: clamp(3.2rem, 12.5vw, 13rem);
  text-shadow: 0 0 26px rgba(124, 58, 237, .28), 0 0 2px var(--chalk);
}

.split-title {
  font-size: clamp(3rem, 9vw, 10rem);
  max-width: 980px;
}

.kinetic .letter {
  display: inline-block;
  transform: translate3d(calc(var(--mx, 0px) * .018), calc(var(--my, 0px) * .015), 0) rotate(calc(var(--i) * .18deg));
  animation: letterOrbit 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -90ms);
}

.kinetic.disrupted .letter { color: var(--ruby); transform: translateY(calc((var(--i) % 5) * -2px)) skewX(-8deg); }

@keyframes letterOrbit {
  0%, 100% { translate: 0 0; font-stretch: 100%; }
  45% { translate: calc(sin(var(--i)) * 4px) calc(cos(var(--i)) * 5px); }
  70% { translate: 0 1px; }
}

.load-rack {
  width: min(520px, 82vw);
  margin: 2.1rem auto 0;
  display: grid;
  gap: .65rem;
}

.load-row {
  display: grid;
  grid-template-columns: 9.7rem 1fr;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(233, 228, 216, .64);
}

.load-row b {
  height: .62rem;
  border: 1px solid rgba(233, 228, 216, .12);
  background: linear-gradient(90deg, rgba(124,58,237,.12), var(--amethyst), var(--emerald), var(--sapphire), rgba(233,228,216,.1));
  background-size: 260% 100%;
  animation: shimmer 2.2s ease-in-out infinite;
  clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%);
}

.load-row.contradiction b { background-image: linear-gradient(90deg, rgba(215,38,94,.12), var(--ruby), var(--brass), rgba(233,228,216,.1)); }

@keyframes shimmer { 0% { background-position: 0 0; } 100% { background-position: 260% 0; } }

.load-rack.snapped .load-row b {
  width: .55rem;
  border-radius: 50%;
  justify-self: center;
  clip-path: none;
  animation: pulsePoint 1.8s ease-in-out infinite;
}

@keyframes pulsePoint { 50% { box-shadow: 0 0 24px currentColor; transform: scale(1.45); } }

.radial-map, .fixed-orbit, .constellation, .model-object, .final-chart { pointer-events: none; }

.ring { position: absolute; inset: 50%; border: 1px dashed rgba(233,228,216,.13); border-radius: 50%; transform: translate(-50%, -50%); }
.ring-one { width: 42vw; height: 42vw; animation: rotateSlow 36s linear infinite; }
.ring-two { width: 64vw; height: 64vw; animation: rotateSlow 54s linear infinite reverse; }
@keyframes rotateSlow { to { rotate: 360deg; } }

.star, .node {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--chalk);
  box-shadow: 0 0 16px rgba(233,228,216,.7);
  transform: rotate(45deg);
}
.s1 { left: 23%; top: 34%; } .s2 { right: 27%; top: 24%; background: var(--amethyst); } .s3 { left: 31%; bottom: 21%; background: var(--emerald); } .s4 { right: 22%; bottom: 32%; background: var(--ruby); } .s5 { left: 52%; top: 17%; background: var(--brass); }

.fixed-orbit {
  position: fixed;
  inset: 0;
  z-index: 6;
  color: rgba(233,228,216,.45);
}

.rebel-star, .big-star {
  position: absolute;
  width: 34px; height: 34px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(22deg);
  background: conic-gradient(from 0deg, transparent 0 10deg, var(--brass) 10deg 22deg, transparent 22deg 55deg, var(--chalk) 55deg 67deg, transparent 67deg 100deg, var(--amethyst) 100deg 112deg, transparent 112deg 145deg, var(--ruby) 145deg 160deg, transparent 160deg 360deg);
  clip-path: polygon(50% 0, 58% 35%, 100% 22%, 67% 50%, 88% 88%, 50% 66%, 16% 100%, 33% 55%, 0 50%, 36% 41%);
  opacity: .85;
}

.coordinate { position: fixed; opacity: .5; }
.c1 { top: 2rem; left: 2rem; } .c2 { top: 2rem; right: 2rem; } .c3 { bottom: 2rem; left: 2rem; color: var(--ruby); }

.fragment, .scrap, .annotation, .field-label, .redaction {
  position: absolute;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
}

.paper { padding: 1rem 1.2rem; color: var(--void); background: var(--chalk); transform: rotate(-11deg); box-shadow: 12px 15px 0 rgba(124,58,237,.18); }
.frag-a { left: 10vw; top: 19vh; }
.frag-b { right: 12vw; bottom: 18vh; width: 180px; height: 22px; background: linear-gradient(90deg, var(--amethyst), var(--sapphire), var(--emerald), var(--brass)); transform: rotate(13deg); }

.collage.eclipse { position: absolute; width: min(58vw, 560px); aspect-ratio: 1; }
.moon { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--chalk), #8e877a 58%, transparent 59%); opacity: .28; }
.ruby-cut { position: absolute; width: 38%; height: 38%; background: rgba(215,38,94,.8); right: 14%; top: 32%; clip-path: polygon(50% 0, 100% 35%, 76% 100%, 18% 90%, 0 28%); mix-blend-mode: screen; }
.reticle { position: absolute; inset: 5%; border: 1px solid rgba(0,166,118,.35); border-radius: 50%; }
.reticle::before, .reticle::after { content:""; position:absolute; background: rgba(0,166,118,.35); left:50%; top:0; width:1px; height:100%; }
.reticle::after { left:0; top:50%; width:100%; height:1px; }

.aside {
  margin: 1.6rem auto 0;
  max-width: 560px;
  color: rgba(233,228,216,.78);
  font-family: var(--editorial);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.35;
}

.scrap { right: 9vw; top: 23vh; color: var(--emerald); transform: rotate(8deg); }
.left-note { left: 7vw; bottom: 20vh; color: var(--brass); writing-mode: vertical-rl; }

.ghost-bars { width: min(420px, 70vw); margin: 2rem auto; display: grid; gap: .7rem; }
.ghost-bars span { height: .78rem; background: linear-gradient(90deg, rgba(233,228,216,.08), rgba(124,58,237,.45), rgba(0,166,118,.2)); animation: shimmer 3s linear infinite; }
.ghost-bars span:nth-child(2) { width: 83%; justify-self: center; animation-delay: -.5s; }
.ghost-bars span:nth-child(3) { width: 64%; justify-self: center; animation-delay: -1s; }
.ghost-bars span:nth-child(4) { width: 41%; justify-self: center; animation-delay: -1.5s; }

.constellation { position: absolute; width: min(72vw, 720px); height: 44vh; opacity: .72; }
.constellation svg { position: absolute; inset: 0; overflow: visible; }
.constellation path { fill: none; stroke: var(--sapphire); stroke-width: 1.2; stroke-dasharray: 680; stroke-dashoffset: var(--dash, 680); filter: drop-shadow(0 0 8px rgba(36,87,255,.65)); }
.constellation .break-line { stroke: var(--ruby); opacity: calc(var(--break, 0) * 1); stroke-dashoffset: calc(300 - var(--break, 0) * 300); }
.node { background: var(--chalk); }
.n1 { left: 11%; top: 72%; } .n2 { left: 30%; top: 25%; } .n3 { left: 47%; top: 51%; } .n4 { left: 67%; top: 20%; } .n5 { left: 87%; top: 67%; }
.redaction { bottom: 18vh; right: 10vw; color: var(--ruby); border-bottom: 8px solid var(--ruby); padding-bottom: .1rem; opacity: .7; }

.model-object { position: absolute; width: min(58vw, 610px); aspect-ratio: 1; transform: rotate(var(--model-rot, 0deg)); }
.axis { position: absolute; inset: 50% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--ruby), transparent); }
.shard { position: absolute; padding: .7rem 1rem; border: 1px solid rgba(233,228,216,.2); background: rgba(23,16,68,.64); font-family: var(--mono); font-size: .68rem; color: var(--chalk); }
.shard-one { left: 12%; top: 18%; transform: rotate(-12deg); }
.shard-two { right: 10%; top: 26%; transform: rotate(9deg); color: var(--ruby); }
.shard-three { left: 20%; bottom: 18%; transform: rotate(15deg); color: var(--sapphire); }
.shard-four { right: 18%; bottom: 14%; transform: rotate(-19deg); color: var(--brass); }
.ruby { color: var(--ruby); }
.waveform { position: absolute; bottom: 16vh; display: flex; gap: .38rem; align-items: center; }
.waveform span { width: 4px; height: 52px; background: var(--ruby); animation: wave 1.2s ease-in-out infinite; }
.waveform span:nth-child(2) { animation-delay: -.2s; height: 84px; background: var(--amethyst); }
.waveform span:nth-child(3) { animation-delay: -.4s; height: 34px; }
.waveform span:nth-child(4) { animation-delay: -.6s; height: 74px; background: var(--emerald); }
.waveform span:nth-child(5) { animation-delay: -.8s; height: 46px; background: var(--brass); }
@keyframes wave { 50% { transform: scaleY(.35); opacity: .5; } }

.final-chart { position: absolute; width: min(65vw, 670px); aspect-ratio: 1; }
.big-star { width: 118px; height: 118px; opacity: .38; }
.orbit { position: absolute; inset: 50%; border: 1px solid rgba(184,138,45,.22); border-radius: 50%; transform: translate(-50%, -50%); }
.o1 { width: 25%; height: 25%; } .o2 { width: 54%; height: 54%; border-color: rgba(124,58,237,.25); } .o3 { width: 82%; height: 82%; border-style: dashed; border-color: rgba(233,228,216,.16); }
.observatory-link { display: inline-block; margin-top: 2rem; color: var(--chalk); text-decoration: none; font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; border: 1px solid rgba(233,228,216,.24); padding: .9rem 1.1rem; background: rgba(5,4,11,.55); box-shadow: 0 0 0 1px rgba(184,138,45,.12), 0 0 24px rgba(124,58,237,.12); transition: color .25s ease, background .25s ease, transform .25s ease; }
.observatory-link:hover { color: var(--void); background: var(--chalk); }
.field-label { bottom: 3rem; color: rgba(233,228,216,.5); }

.cursor-field {
  position: fixed;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(215,38,94,.18);
  border-radius: 50%;
  left: var(--cursor-x, 50%);
  top: var(--cursor-y, 50%);
  translate: -50% -50%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(215,38,94,.13), transparent 62%);
  opacity: .55;
}

.scene.is-visible .chapter-core { animation: assemble .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes assemble { from { opacity: .15; transform: translateY(28px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (max-width: 720px) {
  .load-row { grid-template-columns: 1fr; gap: .35rem; text-align: left; }
  .coordinate, .fragment, .scrap, .annotation, .redaction { display: none; }
  .scene { padding-inline: 1.2rem; }
  .wordmark { font-size: clamp(2.7rem, 16vw, 5rem); }
}