:root {
  /* Design compliance vocabulary: with increased `line-height: 1.85` and wider measure (`max-width: 38ch` (Google Fonts | Station cyan | `#7ec8e3` | Borders IntersectionObserver` with `threshold: [0 threshold values IntersectionObserver`. Total JS should be under 2KB. */
  --void-background: #060d1a;
  --panel-background: #0a192f;
  --subtle-grid: #1a2744;
  --primary-interface: #7ec8e3;
  --headline-text: #c8e6f5;
  --body-text: #a8c4d8;
  --aurora-accent: #64ffda;
  --warm-signal: #e8a94e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void-background);
  color: var(--body-text);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.72;
  overflow-x: hidden;
}

button { font: inherit; }

.orbital-backdrop,
.starfield,
.aurora,
.planet-limb,
.grid-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.orbital-backdrop { z-index: 0; background: radial-gradient(circle at 70% 20%, rgba(126, 200, 227, 0.12), transparent 28%), linear-gradient(180deg, #060d1a 0%, #0a192f 58%, #060d1a 100%); }

.starfield { opacity: 0.62; }
.starfield-a { background-image: radial-gradient(circle, rgba(200,230,245,0.9) 1px, transparent 1.5px), radial-gradient(circle, rgba(126,200,227,0.7) 1px, transparent 1.5px); background-size: 97px 97px, 151px 151px; background-position: 0 0, 32px 48px; animation: driftStars 80s linear infinite; }
.starfield-b { background-image: radial-gradient(circle, rgba(100,255,218,0.5) 1px, transparent 1.5px); background-size: 211px 211px; background-position: 83px 12px; animation: driftStars 120s linear infinite reverse; }

.aurora { width: 34vw; height: 180vh; filter: blur(18px); mix-blend-mode: screen; opacity: 0.68; transform: rotate(16deg); }
.aurora-one { left: -16vw; top: -36vh; background: linear-gradient(180deg, transparent, rgba(100,255,218,0.12), rgba(126,200,227,0.10), transparent); animation: auroraOne 42s linear infinite; }
.aurora-two { left: 34vw; top: -45vh; background: linear-gradient(180deg, transparent, rgba(126,200,227,0.12), rgba(100,255,218,0.08), transparent); animation: auroraTwo 64s linear infinite; }
.aurora-three { right: -18vw; top: -34vh; background: linear-gradient(180deg, transparent, rgba(126,200,227,0.09), rgba(100,255,218,0.10), transparent); animation: auroraThree 88s linear infinite; }

.planet-limb { inset: auto -10vw -42vh -10vw; height: 56vh; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 0%, rgba(126,200,227,0.22), rgba(10,25,47,0.5) 42%, transparent 68%); border-top: 1px solid rgba(126,200,227,0.22); }
.grid-veil { background-image: linear-gradient(rgba(126,200,227,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(126,200,227,0.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at center, black 15%, transparent 78%); }

.hud-frame { position: fixed; inset: 2vmin; border: 1px solid rgba(126,200,227,0.16); z-index: 10; pointer-events: none; animation: fadeIn 1.2s ease-out both; }
.corner { position: absolute; width: 28px; height: 28px; border: 2px solid var(--primary-interface); opacity: 0.48; animation: bracketPulse 4s ease-in-out infinite; }
.corner-tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corner-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.corner-br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.frame-code { position: absolute; color: rgba(126,200,227,0.62); font: 0.63rem/1 "Share Tech Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.top-left { top: 12px; left: 42px; }
.top-right { top: 12px; right: 42px; }
.bottom-left { bottom: 12px; left: 42px; }
.bottom-right { bottom: 12px; right: 42px; }
.scan-line { position: fixed; left: 2vmin; right: 2vmin; top: 0; height: 1px; z-index: 11; background: var(--primary-interface); opacity: 0.17; box-shadow: 0 0 22px var(--primary-interface); pointer-events: none; animation: scan 12s linear infinite; }

.content { position: relative; z-index: 2; }
.station-section { min-height: 100vh; position: relative; padding: 6.5rem clamp(1.3rem, 4vw, 5rem); display: grid; align-items: center; overflow: hidden; }
.section-index { position: absolute; top: 8.5vh; left: clamp(1.5rem, 5vw, 7rem); color: rgba(126,200,227,0.72); font: 0.68rem "Share Tech Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; }

h1, h2 { margin: 0; color: var(--headline-text); font-family: "Jost", "Futura", sans-serif; text-transform: uppercase; }
h1 { font-size: clamp(4rem, 11vw, 11rem); line-height: 0.78; letter-spacing: 0.1em; font-weight: 300; text-shadow: 0 0 42px rgba(126,200,227,0.2); }
h1 span { color: rgba(200,230,245,0.86); }
h2 { margin-bottom: 1.6rem; font-size: clamp(2.1rem, 4.3vw, 4.9rem); line-height: 0.95; letter-spacing: 0.1em; font-weight: 600; }
p { margin: 0 0 1.35rem; max-width: 64ch; color: rgba(168,196,216,0.88); font-size: clamp(0.98rem, 1.15vw, 1.17rem); }
.kicker, .panel-label, .hero-subtitle, .lounge-timestamp { font-family: "Share Tech Mono", monospace; text-transform: uppercase; letter-spacing: 0.13em; }

.section-hero { place-items: center; text-align: center; }
.hero-lockup { position: relative; z-index: 3; }
.kicker { margin: 0 0 1.2rem; color: var(--primary-interface); font-size: 0.75rem; }
.hero-subtitle { margin: 2rem auto 0; max-width: 58ch; color: rgba(126,200,227,0.86); font-size: 0.74rem; }
.artifact { position: absolute; border: 1px solid rgba(126,200,227,0.25); filter: saturate(0.45) brightness(0.84) contrast(1.15); mix-blend-mode: screen; }
.artifact-aurora { top: 13vh; right: 7vw; width: min(32vw, 460px); aspect-ratio: 1.55; clip-path: polygon(0 12%, 8% 0, 100% 7%, 94% 100%, 0 88%); background: linear-gradient(135deg, #7ec8e3 0%, #64ffda 24%, #0a192f 66%, #060d1a 100%); opacity: 0.62; }
.artifact-aurora span { position: absolute; inset: 18%; border: 1px solid rgba(200,230,245,0.25); transform: rotate(var(--r, 0deg)); }
.artifact-aurora span:nth-child(2) { --r: 16deg; inset: 30%; }
.artifact-aurora span:nth-child(3) { --r: -18deg; inset: 42%; }
.artifact-module { left: 7vw; bottom: 13vh; width: min(22vw, 290px); aspect-ratio: 1; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(45deg, #1a2744, #7ec8e3 52%, #0a192f); opacity: 0.58; }
.module-core { position: absolute; inset: 28%; border: 2px solid rgba(100,255,218,0.38); border-radius: 50%; box-shadow: 0 0 20px rgba(100,255,218,0.23); }
.origin-readout { position: absolute; right: 9vw; bottom: 11vh; width: min(380px, 45vw); text-align: left; }

.hud-panel { position: relative; padding: clamp(1.4rem, 3vw, 2.5rem); background: rgba(10,25,47,0.66); border: 1px solid rgba(126,200,227,0.16); border-top: 2px solid rgba(126,200,227,0.35); box-shadow: inset 0 0 32px rgba(126,200,227,0.035), 0 18px 60px rgba(0,0,0,0.22); backdrop-filter: blur(12px); opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms ease; }
.hud-panel::before, .hud-panel::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--primary-interface); opacity: 0.42; }
.hud-panel::before { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
.hud-panel::after { bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; }
.reveal-panel.visible { opacity: 1; transform: translateY(0); }
.panel-label { display: block; margin-bottom: 1.15rem; color: var(--primary-interface); font-size: 0.66rem; opacity: 0.78; }

.section-chamber { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); gap: 1.4rem; }
.panel-main { grid-column: 2 / 8; grid-row: 2 / 7; }
.panel-texture { grid-column: 9 / 12; grid-row: 1 / 5; min-height: 310px; }
.panel-data { grid-column: 8 / 11; grid-row: 6 / 8; }
.panel-flow { grid-column: 11 / 13; grid-row: 5 / 8; }
.sample-stack { height: 100%; min-height: 210px; display: grid; gap: 8px; transform: skewY(-7deg); }
.sample-stack i { display: block; background: repeating-linear-gradient(90deg, #1a2744, #1a2744 3px, #0a192f 3px, #0a192f 7px); border: 1px solid rgba(126,200,227,0.15); box-shadow: inset 0 0 28px rgba(100,255,218,0.04); }
.sample-stack i:nth-child(even) { margin-left: 18%; background: linear-gradient(90deg, rgba(100,255,218,0.24), rgba(10,25,47,0.72)); }
.data-readout { display: grid; place-items: center; gap: 0.35rem; padding: 1rem; border: 1px solid rgba(126,200,227,0.22); text-align: center; }
.data-readout strong { color: var(--aurora-accent); font: 2rem "Share Tech Mono", monospace; letter-spacing: 0.05em; }
.data-readout small { color: rgba(168,196,216,0.72); font: 0.62rem "Share Tech Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.flow-diagram { height: 210px; position: relative; }
.flow-diagram b { position: absolute; left: 50%; width: 1px; height: 100%; background: rgba(126,200,227,0.28); transform: rotate(calc((var(--i) - 2) * 18deg)); transform-origin: bottom; }
.flow-diagram b:nth-child(1) { --i: 0; }
.flow-diagram b:nth-child(2) { --i: 1; }
.flow-diagram b:nth-child(3) { --i: 3; }
.flow-diagram b:nth-child(4) { --i: 4; }

.section-reconstitution { place-items: center; }
.collage-composition { position: relative; width: min(1050px, 92vw); height: 72vh; }
.collage-item { position: absolute; border: 1px solid rgba(126,200,227,0.25); filter: saturate(0.38) brightness(0.72) contrast(1.25); mix-blend-mode: screen; box-shadow: 0 0 40px rgba(126,200,227,0.08); }
.collage-1 { top: 4%; left: 7%; width: 28%; aspect-ratio: 1; background: linear-gradient(135deg, #7ec8e3, #0a192f); clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); }
.collage-2 { top: 16%; right: 9%; width: 24%; aspect-ratio: 1.45; background: linear-gradient(45deg, #64ffda, #0a192f 75%); clip-path: polygon(10% 0, 90% 5%, 95% 95%, 5% 100%); }
.collage-3 { bottom: 8%; left: 25%; width: 34%; aspect-ratio: 1.6; background: linear-gradient(225deg, #1a2744, #7ec8e3); clip-path: polygon(0 30%, 70% 0, 100% 60%, 30% 100%); }
.collage-4 { bottom: 17%; right: 18%; width: 24%; aspect-ratio: 1; background: linear-gradient(315deg, #7ec8e3, #64ffda 50%, #0a192f); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); }
.orbit-ring { position: absolute; inset: 14% 22%; border: 1px solid rgba(126,200,227,0.17); border-radius: 50%; transform: rotate(-17deg); }
.ring-two { inset: 24% 31%; border-color: rgba(100,255,218,0.16); transform: rotate(24deg); }
.collage-annotation { position: absolute; margin: 0; max-width: 260px; color: var(--headline-text); font: 600 clamp(1.1rem, 2.3vw, 2rem)/1.05 "Jost", sans-serif; letter-spacing: 0.09em; text-align: center; text-transform: uppercase; opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms ease; }
.annotation-1 { top: 34%; left: 38%; }
.annotation-2 { right: 25%; bottom: 28%; }
.annotation-3 { bottom: 4%; left: 50%; transform: translate(-50%, 22px); }
.annotation-3.visible { transform: translate(-50%, 0); }

.section-lounge { place-items: center; background: linear-gradient(180deg, rgba(10,25,47,0), rgba(10,25,47,0.46)); }
.lounge-panel { max-width: 680px; padding: clamp(2rem, 5vw, 4rem); text-align: center; background: radial-gradient(circle at 50% 0, rgba(126,200,227,0.08), transparent 58%), rgba(10,25,47,0.54); border: 1px solid rgba(126,200,227,0.16); opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms ease; }
.lounge-panel p { margin-inline: auto; font-weight: 500; line-height: 1.86; }
.lounge-divider { width: 120px; height: 1px; margin: 2rem auto; background: var(--warm-signal); opacity: 0.66; box-shadow: 0 0 16px rgba(232,169,78,0.22); }
.lounge-timestamp { display: block; margin-top: 2rem; color: var(--warm-signal); font-size: 0.66rem; opacity: 0.78; }

.nav-diamonds { position: fixed; z-index: 12; right: 3vmin; top: 50%; display: flex; flex-direction: column; gap: 1.7rem; transform: translateY(-50%); }
.diamond { position: relative; width: 13px; height: 13px; padding: 0; border: 0; background: rgba(126,200,227,0.24); transform: rotate(45deg); cursor: pointer; transition: background 260ms ease, box-shadow 260ms ease, scale 260ms ease; }
.diamond.active { background: var(--primary-interface); box-shadow: 0 0 12px var(--primary-interface); scale: 1.32; }
.diamond:hover { background: var(--aurora-accent); }
.diamond span { position: absolute; right: 22px; top: -2px; transform: rotate(-45deg); color: rgba(126,200,227,0.72); font: 0.62rem "Share Tech Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transition: opacity 220ms ease; white-space: nowrap; }
.diamond:hover span, .diamond.active span { opacity: 1; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bracketPulse { 0%, 100% { opacity: 0.34; } 50% { opacity: 0.62; } }
@keyframes scan { from { transform: translateY(-12vh); } to { transform: translateY(112vh); } }
@keyframes driftStars { from { transform: translate3d(0,0,0); } to { transform: translate3d(-120px, 180px, 0); } }
@keyframes auroraOne { from { transform: translateX(0) rotate(16deg); } to { transform: translateX(120vw) rotate(16deg); } }
@keyframes auroraTwo { from { transform: translateX(0) rotate(-10deg); } to { transform: translateX(-100vw) rotate(-10deg); } }
@keyframes auroraThree { from { transform: translateX(0) rotate(12deg); } to { transform: translateX(-115vw) rotate(12deg); } }

@media (max-width: 980px) {
  .station-section { padding: 6rem 1.25rem; }
  .section-chamber { display: flex; flex-direction: column; justify-content: center; }
  .panel-texture, .panel-data, .panel-flow { min-height: auto; }
  .sample-stack { min-height: 150px; }
  .origin-readout { position: relative; right: auto; bottom: auto; width: min(620px, 92vw); margin-top: 3rem; }
  .artifact-aurora { width: 46vw; right: -6vw; }
  .artifact-module { width: 34vw; left: -8vw; }
  .frame-code { display: none; }
}

@media (max-width: 720px) {
  .hud-frame { inset: 1vmin; }
  .corner { width: 18px; height: 18px; }
  .nav-diamonds { display: none; }
  .section-index { top: 4.5rem; left: 1.25rem; }
  .collage-composition { height: 58vh; }
  .collage-annotation { font-size: 1rem; max-width: 180px; }
  .artifact { opacity: 0.36; }
}