:root {
    --void: #050509;
    --chalk: #F2EFE5;
    --lime: #B9FF2F;
    --red: #FF3B30;
    --cobalt: #182BFF;
    --graphite: #2A2A31;
    --mx: 18%;
    --my: 72%;
    --scene-tilt: 0deg;
}

/* DESIGN typography parser tokens: IBM Plex Sans** San* for lab labels */

* { box-sizing: border-box; }

html {
    background: var(--void);
    color: var(--chalk);
    font-family: "IBM Plex Sans", sans-serif;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(185, 255, 47, 0.16) 0 1.5%, rgba(24, 43, 255, 0.16) 12%, transparent 34%),
        linear-gradient(120deg, #050509 0%, #050509 54%, #0b0b13 100%);
}

#filing-canvas {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
}

.global-field {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.86;
}

.field-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 18px rgba(242, 239, 229, 0.06));
}

.field-line {
    fill: none;
    stroke: var(--chalk);
    stroke-width: 1;
    stroke-dasharray: 9 24;
    opacity: 0.18;
    animation: drawField 14s linear infinite;
}

.line-b { stroke: var(--cobalt); opacity: 0.22; animation-duration: 18s; }
.line-c { stroke-dasharray: 2 18; animation-duration: 11s; }
.line-d { stroke: var(--lime); opacity: 0.09; animation-duration: 22s; }

.noise {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(90deg, rgba(242,239,229,0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(242,239,229,0.025) 1px, transparent 1px),
        radial-gradient(circle at 20% 80%, rgba(185,255,47,0.22), transparent 18%);
    background-size: 83px 83px, 83px 83px, 100% 100%;
    transform: skewY(-4deg);
}

.compass-strip {
    position: fixed;
    top: 22px;
    left: 24px;
    right: 24px;
    z-index: 10;
    display: grid;
    grid-template-columns: auto 54px 1fr;
    gap: 18px;
    align-items: center;
    color: var(--chalk);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    mix-blend-mode: difference;
}

.strip-label {
    border: 1px solid rgba(242,239,229,0.28);
    padding: 9px 12px;
    background: rgba(5,5,9,0.58);
}

.compass-body {
    position: relative;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(242,239,229,0.35);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(42,42,49,0.35);
}

.compass-body span { color: var(--red); font-weight: 600; font-size: 10px; transform: translateY(-14px); }

.compass-needle {
    position: absolute;
    width: 3px;
    height: 31px;
    background: linear-gradient(var(--red) 0 46%, var(--chalk) 47% 100%);
    transform-origin: 50% 50%;
    transform: rotate(28deg);
    transition: transform 420ms cubic-bezier(.2,.7,.1,1);
}

.compass-strip ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.compass-strip li {
    cursor: pointer;
    color: rgba(242,239,229,0.55);
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    transition: color 240ms ease, border-color 240ms ease;
}

.compass-strip li.active { color: var(--lime); border-color: var(--red); }

.scene {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 3;
    isolation: isolate;
    transform: rotate(var(--scene-tilt));
    transform-origin: 18% 72%;
    transition: transform 900ms cubic-bezier(.16,.84,.24,1);
    border-bottom: 1px solid rgba(242,239,229,0.08);
}

.scene::before {
    content: "";
    position: absolute;
    inset: 9vh 7vw;
    border: 1px solid rgba(242,239,229,0.1);
    border-left-color: rgba(185,255,47,0.28);
    transform: skew(-8deg) rotate(-2deg);
    z-index: -1;
}

.lab-kicker, .coordinate-tag, .marginal-note, .logbook p, .lab-tape {
    font-family: "IBM Plex Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    color: rgba(242,239,229,0.7);
}

h1, h2 { font-family: "Syne", sans-serif; margin: 0; line-height: 0.9; letter-spacing: -0.055em; }
h1 { font-size: clamp(68px, 13vw, 188px); font-weight: 800; }
h2 { font-size: clamp(46px, 8.5vw, 126px); font-weight: 700; }
p { line-height: 1.55; }

.theorem, .fraunces-line, .sealed-window h2 {
    font-family: "Fraunces", serif;
    font-variation-settings: "WONK" 1, "SOFT" 75;
}

.null-field {
    min-height: 112vh;
    background: radial-gradient(circle at 18% 72%, rgba(185,255,47,0.2) 0%, rgba(24,43,255,0.12) 18%, transparent 45%);
}

.singularity {
    position: absolute;
    left: 18%;
    top: 72%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 24px var(--lime), 0 0 130px rgba(24,43,255,0.7);
}

.singularity span {
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    border: 1px dashed rgba(242,239,229,0.36);
    animation: spin 9s linear infinite;
}

.hero-title {
    position: absolute;
    left: 31vw;
    top: 19vh;
    max-width: 930px;
}

.hero-title .theorem {
    max-width: 590px;
    margin: 24px 0 0 8vw;
    font-size: clamp(24px, 3.2vw, 46px);
    color: rgba(242,239,229,0.88);
}

.coordinate-tag {
    position: absolute;
    border: 1px solid rgba(242,239,229,0.18);
    padding: 10px 13px;
    background: rgba(5,5,9,0.62);
}
.tag-a { left: 8vw; top: 62vh; color: var(--lime); }
.tag-b { right: 11vw; bottom: 18vh; color: var(--red); transform: rotate(6deg); }

.specimen-window {
    position: absolute;
    right: 9vw;
    bottom: 12vh;
    width: 290px;
    border: 1px solid rgba(242,239,229,0.18);
    background: linear-gradient(135deg, rgba(42,42,49,0.72), rgba(24,43,255,0.1));
    padding: 18px;
    transform: rotate(-4deg);
}
.specimen-window span { color: var(--lime); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

.chapter-copy {
    position: absolute;
    max-width: 620px;
    color: rgba(242,239,229,0.84);
}

.chapter-copy p:not(.lab-kicker):not(.fraunces-line) { font-size: clamp(17px, 1.35vw, 22px); }
.tilted-left { left: 9vw; top: 18vh; transform: rotate(-5deg); }
.right-pane { right: 9vw; top: 23vh; }
.compressed { left: 34vw; top: 22vh; max-width: 730px; }
.bottom-left { left: 8vw; bottom: 11vh; }

.compass-panic { background: radial-gradient(circle at 74% 36%, rgba(255,59,48,0.13), transparent 28%); }
.panic-rig {
    position: absolute;
    right: 9vw;
    top: 15vh;
    width: min(47vw, 670px);
    height: 62vh;
    border: 1px solid rgba(242,239,229,0.15);
    transform: rotate(7deg);
}

.dial {
    position: absolute;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(242,239,229,0.34);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(42,42,49,0.4), transparent 70%);
}
.dial::before { content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(242,239,229,0.16); border-radius: 50%; }
.dial i { width: 4px; height: 118px; background: linear-gradient(var(--red), var(--chalk)); animation: panicNeedle 2.7s ease-in-out infinite; }
.dial b { position: absolute; top: 24px; color: var(--red); font-family: "Syne"; }
.dial-one { left: 8%; top: 10%; }
.dial-two { right: 8%; top: 28%; width: 210px; height: 210px; }
.dial-three { left: 34%; bottom: 7%; width: 138px; height: 138px; }
.dial-two i { animation-delay: -.8s; }
.dial-three i { animation-delay: -1.4s; }
.red-tick { position: absolute; background: var(--red); box-shadow: 0 0 18px rgba(255,59,48,0.7); }
.tick-one { width: 90px; height: 3px; left: 30%; top: 16%; transform: rotate(-18deg); }
.tick-two { width: 3px; height: 120px; right: 19%; bottom: 10%; transform: rotate(22deg); }
.tick-three { width: 70px; height: 3px; left: 8%; bottom: 25%; transform: rotate(42deg); }
.marginal-note { position: absolute; right: 11vw; bottom: 9vh; color: var(--red); }

.filing-bloom { background: radial-gradient(circle at 34% 49%, rgba(185,255,47,0.13), transparent 36%); }
.bloom-diagram { position: absolute; left: 7vw; top: 10vh; width: 58vw; height: 78vh; }
.bloom-core { position: absolute; left: 43%; top: 54%; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 44px var(--lime), 0 0 180px var(--cobalt); }
.ring { position: absolute; border: 1px dashed rgba(242,239,229,0.23); border-radius: 50%; transform: translate(-50%, -50%) rotate(-12deg); left: 43%; top: 54%; }
.ring-one { width: 210px; height: 150px; animation: spin 18s linear infinite; }
.ring-two { width: 440px; height: 310px; animation: spin 29s linear infinite reverse; }
.ring-three { width: 680px; height: 510px; border-color: rgba(24,43,255,0.32); animation: spin 43s linear infinite; }
.particle-ray { position: absolute; left: 43%; top: 54%; width: 38vw; height: 1px; transform-origin: 0 0; background: repeating-linear-gradient(90deg, rgba(242,239,229,0.8) 0 3px, transparent 3px 16px); }
.ray-a { transform: rotate(-22deg); }
.ray-b { transform: rotate(18deg); }
.ray-c { transform: rotate(67deg); }
.ray-d { transform: rotate(132deg); }

.unpaired-north { background: radial-gradient(circle at 87% 24%, rgba(24,43,255,0.22), transparent 34%); }
.north-mark {
    position: absolute;
    left: 8vw;
    top: 12vh;
    font-family: "Syne";
    font-size: clamp(170px, 30vw, 430px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--red);
    text-shadow: 0 0 60px rgba(255,59,48,0.2);
    transform: rotate(-11deg);
}
.fraunces-line { font-size: clamp(28px, 4vw, 64px); color: var(--lime); margin: 22px 0; line-height: 1.02; }
.lab-tape { position: absolute; padding: 13px 38px; color: var(--void); background: var(--chalk); font-weight: 600; }
.tape-one { right: 12vw; bottom: 28vh; transform: rotate(11deg); }
.tape-two { left: 22vw; bottom: 13vh; transform: rotate(-7deg); background: var(--lime); }

.alignment-room { background: radial-gradient(circle at 63% 45%, rgba(24,43,255,0.18), transparent 40%); }
.alignment-grid { position: absolute; right: 7vw; top: 11vh; width: 58vw; height: 69vh; border: 1px solid rgba(242,239,229,0.13); transform: perspective(900px) rotateX(58deg) rotateZ(-18deg); transform-style: preserve-3d; }
.axis { position: absolute; background: rgba(242,239,229,0.28); }
.axis.horizontal { left: 0; right: 0; top: 50%; height: 1px; }
.axis.vertical { top: 0; bottom: 0; left: 50%; width: 1px; }
.model-orbit { position: absolute; border: 1px solid rgba(185,255,47,0.34); border-radius: 50%; animation: orbitPulse 5s ease-in-out infinite; }
.model-orbit span { position: absolute; right: 10%; top: 7%; font-family: "IBM Plex Sans"; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: var(--chalk); }
.orbit-one { inset: 14% 23%; }
.orbit-two { inset: 24% 10%; border-color: rgba(24,43,255,0.55); animation-delay: -1.3s; }
.orbit-three { inset: 33% 34%; border-color: rgba(255,59,48,0.55); animation-delay: -2.1s; }

.containment-log { min-height: 106vh; background: radial-gradient(circle at 50% 54%, rgba(185,255,47,0.1), transparent 28%), var(--void); }
.sealed-window { position: absolute; left: 50%; top: 50%; width: min(72vw, 980px); min-height: 420px; transform: translate(-50%, -50%) rotate(-1.5deg); border: 1px solid rgba(242,239,229,0.22); display: grid; place-items: center; text-align: center; padding: 56px; background: linear-gradient(145deg, rgba(42,42,49,0.58), rgba(5,5,9,0.9)); overflow: hidden; }
.sealed-window::before { content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(242,239,229,0.18); }
.window-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--lime), rgba(24,43,255,0.38) 44%, transparent 70%); filter: blur(18px); opacity: 0.65; animation: breathe 4s ease-in-out infinite; }
.sealed-window p { position: relative; z-index: 1; align-self: end; margin: 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--lime); }
.sealed-window h2 { position: relative; z-index: 1; max-width: 780px; font-size: clamp(42px, 6vw, 96px); letter-spacing: -0.04em; }
.logbook { position: absolute; left: 7vw; bottom: 8vh; border-left: 2px solid var(--red); padding-left: 18px; color: rgba(242,239,229,0.74); }
.logbook ul { margin: 10px 0 0; padding-left: 18px; }

@keyframes drawField { to { stroke-dashoffset: -240; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(348deg); } }
@keyframes panicNeedle { 0%,100% { transform: rotate(30deg); } 40% { transform: rotate(138deg); } 55% { transform: rotate(119deg); } 70% { transform: rotate(153deg); } }
@keyframes orbitPulse { 50% { transform: translateZ(42px) scale(1.06); opacity: .64; } }
@keyframes breathe { 50% { transform: scale(1.22); opacity: .88; } }

@media (max-width: 800px) {
    .compass-strip { grid-template-columns: 1fr 46px; right: 14px; left: 14px; }
    .compass-strip ol { grid-column: 1 / -1; justify-content: flex-start; gap: 9px; }
    .hero-title, .chapter-copy, .compressed, .bottom-left, .right-pane, .tilted-left { left: 8vw; right: 8vw; top: 18vh; max-width: none; transform: none; }
    .specimen-window, .panic-rig, .bloom-diagram, .alignment-grid { opacity: 0.55; right: auto; left: 8vw; width: 84vw; }
    .north-mark { opacity: 0.36; }
}