:root {
    /* Compliance language: IBM Plex Mono sparingly only as etched glyphs; IBM Plex Sans Condensed Condensedd Condense* Condensed** for narrow spectrograph labels to create a poetic scientific mood; Space Grotesk Groteskk Grotesk* Grotesk** for crisp interface annotations. */
    --void: #05070B;
    --deep: #071A2E;
    --phosphor: #B7FF6A;
    --cyan: #2BD8FF;
    --violet: #8A5CFF;
    --cream: #F2F0D8;
    --rose: #FF7EDB;
    --glass: #1A2533;
    --progress: 0;
    --beam-width: 12vw;
    --dimmer: .2;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--void);
    color: var(--cream);
    font-family: "Space Grotesk", sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 13% 86%, rgba(183, 255, 106, .2), transparent 24%),
        radial-gradient(circle at 74% 25%, rgba(43, 216, 255, .09), transparent 28%),
        linear-gradient(130deg, rgba(5, 7, 11, .42), rgba(7, 26, 46, .92));
    filter: brightness(calc(.65 + var(--dimmer)));
    z-index: -5;
}

.darkroom { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--void), var(--deep) 42%, var(--void)); }

.ambient {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(48px);
    opacity: .45;
    z-index: -3;
}

.ambient-one { width: 38vw; height: 38vw; left: -18vw; bottom: -14vw; background: rgba(183, 255, 106, .34); }
.ambient-two { width: 30vw; height: 30vw; right: -12vw; top: 15vh; background: rgba(138, 92, 255, .22); }

.diagonal-beam {
    position: fixed;
    left: -18vw;
    top: 12vh;
    width: 145vw;
    height: var(--beam-width);
    transform: rotate(-28deg);
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, rgba(183,255,106,.05), rgba(43,216,255,.18), rgba(138,92,255,.11), transparent);
    filter: blur(calc(18px + var(--progress) * 16px));
    opacity: calc(.22 + var(--progress) * .48);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    left: 50%;
    top: 44%;
    background: var(--phosphor);
    box-shadow: 0 0 15px var(--phosphor), 0 0 35px var(--cyan), 0 0 70px var(--violet);
    transform: translate(-50%, -50%);
    z-index: 8;
    mix-blend-mode: screen;
    pointer-events: none;
}

.phosphor-nav {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    display: grid;
    gap: 18px;
}

.nav-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(242, 240, 216, .24);
    box-shadow: 0 0 0 rgba(183, 255, 106, 0);
    position: relative;
    transition: .5s ease;
}

.nav-dot span {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font: 500 11px/1 "IBM Plex Sans Condensed", sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(242, 240, 216, .45);
    opacity: 0;
    transition: .35s ease;
}

.nav-dot.active { background: var(--phosphor); box-shadow: 0 0 16px var(--phosphor), 0 0 35px rgba(43,216,255,.5); }
.nav-dot.active span, .nav-dot:hover span { opacity: 1; color: var(--cream); }

.chapter {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 9vh 8vw;
    overflow: hidden;
}

.chapter::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(242,240,216,.22) 1px, transparent 1px);
    background-size: 110px 110px;
    opacity: .035;
    pointer-events: none;
}

.orbit-field { position: relative; width: min(84vw, 980px); height: min(72vh, 680px); display: grid; place-items: center; }
.orbit-ring { position: absolute; border: 1px solid rgba(43,216,255,.18); border-radius: 50%; filter: drop-shadow(0 0 18px rgba(43,216,255,.24)); }
.ring-one { width: 78%; height: 52%; transform: rotate(-14deg); }
.ring-two { width: 57%; height: 72%; transform: rotate(32deg); border-color: rgba(183,255,106,.13); }

.wordmark-wrap { text-align: center; transform: translateY(2vh); }
.eyebrow, .plate-label {
    font: 500 12px/1.2 "IBM Plex Sans Condensed", sans-serif;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--phosphor);
}

.wordmark {
    margin: 0;
    font-family: "Instrument Serif", serif;
    font-size: clamp(76px, 14vw, 190px);
    font-weight: 400;
    letter-spacing: -.065em;
    color: rgba(242, 240, 216, .92);
    text-shadow: -3px 0 22px rgba(43,216,255,.42), 3px 0 26px rgba(255,126,219,.28), 0 0 70px rgba(183,255,106,.22);
    opacity: .18;
    filter: blur(8px);
    transition: opacity 1.8s ease, filter 1.8s ease, text-shadow 1.8s ease;
}

body.loaded .wordmark { opacity: 1; filter: blur(0); text-shadow: -2px 0 15px rgba(43,216,255,.76), 2px 0 18px rgba(255,126,219,.5), 0 0 55px rgba(183,255,106,.45); }
.charged-i { position: relative; color: var(--cream); }
.charged-i::after { content: ""; position: absolute; width: .13em; height: .13em; border-radius: 50%; background: var(--phosphor); left: .32em; top: .02em; box-shadow: 0 0 20px var(--phosphor), 0 0 42px var(--cyan); }
.intro-copy { max-width: 560px; margin: 18px auto 0; color: rgba(242,240,216,.64); font-size: clamp(16px, 2vw, 21px); line-height: 1.55; }

.spectral-scale { position: absolute; left: 7vw; bottom: 8vh; display: flex; gap: 14px; align-items: center; font: 500 11px/1 "IBM Plex Sans Condensed", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,240,216,.42); }
.spectral-scale i { display: block; width: 80px; height: 2px; background: linear-gradient(90deg, var(--phosphor), var(--cyan), var(--violet)); box-shadow: 0 0 18px var(--cyan); }

.vertical-caption { position: absolute; left: 4vw; top: 18vh; writing-mode: vertical-rl; font: 500 12px/1 "IBM Plex Sans Condensed", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(43,216,255,.55); }
.aperture { grid-template-columns: 1fr 1.05fr; gap: 5vw; }
.aperture-device { position: relative; width: min(45vw, 500px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(5,7,11,.1) 12%, rgba(26,37,51,.54) 38%, rgba(5,7,11,.95) 65%); box-shadow: inset 0 0 60px rgba(5,7,11,.9), 0 0 80px rgba(43,216,255,.12); overflow: hidden; }
.blade { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,37,51,.92), rgba(5,7,11,.94)); transition: clip-path 1.2s ease; }
.blade-a { clip-path: polygon(0 0, 68% 0, 52% 48%, 0 38%); }
.blade-b { clip-path: polygon(100% 0, 100% 62%, 52% 52%, 68% 0); }
.blade-c { clip-path: polygon(100% 100%, 31% 100%, 48% 52%, 100% 62%); }
.blade-d { clip-path: polygon(0 100%, 0 38%, 48% 48%, 31% 100%); }
.aperture.in-view .blade-a { clip-path: polygon(0 0, 58% 0, 43% 44%, 0 31%); }
.aperture.in-view .blade-b { clip-path: polygon(100% 0, 100% 70%, 57% 58%, 58% 0); }
.aperture.in-view .blade-c { clip-path: polygon(100% 100%, 22% 100%, 43% 58%, 100% 70%); }
.aperture.in-view .blade-d { clip-path: polygon(0 100%, 0 31%, 43% 44%, 22% 100%); }
.slit-light { position: absolute; left: 47%; top: 8%; width: 6%; height: 84%; background: linear-gradient(180deg, transparent, rgba(183,255,106,.88), rgba(43,216,255,.9), transparent); filter: blur(8px); box-shadow: 0 0 42px var(--cyan); transform: rotate(12deg); }

.reveal-plate { position: relative; z-index: 3; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(43,216,255,.2); background: linear-gradient(135deg, rgba(26,37,51,.36), rgba(5,7,11,.24)); backdrop-filter: blur(16px); box-shadow: 0 24px 80px rgba(0,0,0,.35), inset 0 0 40px rgba(43,216,255,.045); opacity: .2; transform: translateY(26px) scale(.985); transition: opacity 1.1s ease, transform 1.1s ease, box-shadow 1.1s ease; }
.chapter.in-view .reveal-plate { opacity: 1; transform: none; box-shadow: 0 24px 100px rgba(0,0,0,.42), inset 0 0 55px rgba(43,216,255,.1), 0 0 44px rgba(43,216,255,.08); }
.reveal-plate h2 { font-family: "Instrument Serif", serif; font-size: clamp(43px, 6vw, 86px); line-height: .95; letter-spacing: -.035em; font-weight: 400; margin: 16px 0 18px; color: var(--cream); }
.reveal-plate p { color: rgba(242,240,216,.68); font-size: clamp(15px, 1.7vw, 20px); line-height: 1.55; }

.refraction { grid-template-columns: 1fr 1.15fr; gap: 3vw; }
.prism-stage { position: relative; width: min(44vw, 520px); height: 440px; }
.prism { position: absolute; left: 34%; top: 23%; width: 250px; height: 250px; clip-path: polygon(50% 0, 100% 88%, 0 88%); background: linear-gradient(135deg, rgba(242,240,216,.08), rgba(43,216,255,.2), rgba(138,92,255,.12)); border: 1px solid rgba(242,240,216,.28); filter: drop-shadow(0 0 34px rgba(43,216,255,.22)); }
.incoming-ray, .split-ray { position: absolute; height: 3px; transform-origin: left center; mix-blend-mode: screen; }
.incoming-ray { width: 48%; left: -5%; top: 50%; background: linear-gradient(90deg, transparent, var(--cream)); transform: rotate(-8deg); box-shadow: 0 0 18px var(--cream); }
.split-ray { left: 58%; top: 50%; width: 52%; }
.ray-green { background: var(--phosphor); transform: rotate(-24deg); box-shadow: 0 0 20px var(--phosphor); }
.ray-cyan { background: var(--cyan); transform: rotate(-6deg); box-shadow: 0 0 20px var(--cyan); }
.ray-violet { background: var(--violet); transform: rotate(14deg); box-shadow: 0 0 20px var(--violet); }
.split-title { position: relative; }
.split-title::before, .split-title::after { content: attr(data-text); position: absolute; inset: 0; opacity: .55; mix-blend-mode: screen; transition: transform 1s ease; }
.split-title::before { color: var(--cyan); transform: translate(-7px, 3px); }
.split-title::after { color: var(--rose); transform: translate(8px, -3px); }
.refraction.in-view .split-title::before, .refraction.in-view .split-title::after { transform: translate(0,0); opacity: .24; }
.path-list { display: grid; gap: 10px; margin-top: 28px; }
.path-list p { margin: 0; font-family: "IBM Plex Sans Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.path-list span { color: var(--phosphor); margin-right: 14px; }

.exposure { grid-template-columns: 1.2fr .95fr; gap: 4vw; }
.darkroom-tray { position: relative; width: min(55vw, 680px); height: 480px; border: 1px solid rgba(255,126,219,.16); background: linear-gradient(145deg, rgba(26,37,51,.42), rgba(5,7,11,.78)); transform: rotate(-5deg); box-shadow: inset 0 0 90px rgba(5,7,11,.9), 0 0 80px rgba(255,126,219,.08); }
.tray-liquid { position: absolute; inset: 38px; background: radial-gradient(circle at 28% 30%, rgba(43,216,255,.2), transparent 28%), linear-gradient(135deg, rgba(7,26,46,.9), rgba(43,216,255,.08)); filter: blur(.4px); }
.cyanotype-plate { position: absolute; background: linear-gradient(145deg, rgba(7,26,46,.88), rgba(43,216,255,.16)); border: 1px solid rgba(43,216,255,.28); box-shadow: inset 0 0 35px rgba(43,216,255,.12), 0 0 42px rgba(43,216,255,.12); overflow: hidden; }
.plate-one { left: 13%; top: 16%; width: 54%; height: 56%; transform: rotate(9deg); }
.plate-two { right: 8%; bottom: 12%; width: 38%; height: 42%; transform: rotate(-11deg); }
.cyanotype-plate::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(242,240,216,.22), transparent); transform: translateX(-120%); transition: transform 1.6s ease; }
.exposure.in-view .cyanotype-plate::before { transform: translateX(130%); }
.cyanotype-plate pre { position: absolute; left: 18px; bottom: 16px; margin: 0; color: rgba(242,240,216,.75); font: 500 13px/1.55 "IBM Plex Mono", monospace; text-shadow: 0 0 14px rgba(183,255,106,.36); }
.botanical { position: absolute; width: 2px; height: 70%; bottom: 14%; background: rgba(183,255,106,.45); filter: blur(.3px); }
.stem-a { left: 62%; transform: rotate(-16deg); }
.stem-b { left: 74%; height: 52%; transform: rotate(18deg); }
.botanical::before, .botanical::after { content: ""; position: absolute; width: 38px; height: 16px; border-radius: 50%; background: rgba(183,255,106,.2); }
.botanical::before { top: 20%; left: -34px; transform: rotate(-28deg); }
.botanical::after { top: 42%; left: 2px; transform: rotate(24deg); }
.oscilloscope { position: absolute; inset: 24px; background: repeating-linear-gradient(90deg, rgba(183,255,106,.12) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(43,216,255,.1) 0 1px, transparent 1px 22px); }
.oscilloscope::after { content: ""; position: absolute; left: 8%; right: 8%; top: 48%; height: 40px; border-top: 3px solid var(--phosphor); border-radius: 50%; filter: drop-shadow(0 0 12px var(--phosphor)); transform: skewX(-18deg); }
.plate-two p { position: absolute; bottom: 10px; left: 16px; font: 500 12px/1 "IBM Plex Sans Condensed", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,240,216,.55); }

.afterimage { min-height: 110vh; }
.afterglow-archive { position: absolute; inset: 8vh 8vw; opacity: .62; filter: blur(.3px); }
.ghost { position: absolute; mix-blend-mode: screen; opacity: .22; }
.ghost-aperture { width: 34vw; height: 34vw; border-radius: 50%; left: 6vw; top: 10vh; border: 1px solid var(--phosphor); box-shadow: 0 0 45px rgba(183,255,106,.24); }
.ghost-prism { width: 25vw; height: 25vw; right: 14vw; top: 12vh; clip-path: polygon(50% 0, 100% 90%, 0 90%); background: linear-gradient(135deg, rgba(43,216,255,.08), rgba(138,92,255,.16)); }
.ghost-plate { width: 42vw; height: 22vw; left: 28vw; bottom: 9vh; border: 1px solid rgba(255,126,219,.35); transform: rotate(-8deg); box-shadow: 0 0 60px rgba(255,126,219,.16); }
.final-message { width: min(760px, 84vw); text-align: center; }
.glass-tab { display: inline-block; margin-top: 18px; padding: 12px 20px; color: var(--cream); text-decoration: none; font: 600 12px/1 "Space Grotesk", sans-serif; letter-spacing: .18em; text-transform: uppercase; border: 1px solid rgba(183,255,106,.42); background: linear-gradient(90deg, rgba(183,255,106,.12), rgba(43,216,255,.08)); box-shadow: inset 0 0 20px rgba(183,255,106,.08), 0 0 28px rgba(183,255,106,.16); }
.retinal-lines { position: absolute; left: 8vw; right: 8vw; bottom: 7vh; display: grid; gap: 9px; opacity: .45; }
.retinal-lines span { height: 1px; background: linear-gradient(90deg, transparent, var(--rose), var(--cyan), transparent); filter: blur(.2px); }

@keyframes drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(18px,-22px,0); } }
.ambient-one { animation: drift 13s ease-in-out infinite; }
.ambient-two { animation: drift 16s ease-in-out infinite reverse; }

@media (max-width: 820px) {
    .chapter, .aperture, .refraction, .exposure { grid-template-columns: 1fr; padding: 11vh 7vw; }
    .phosphor-nav { right: 12px; }
    .nav-dot span { display: none; }
    .aperture-device, .prism-stage, .darkroom-tray { width: 86vw; max-width: none; }
    .darkroom-tray { height: 420px; }
    .spectral-scale { left: 7vw; right: 7vw; flex-wrap: wrap; }
}