:root {
    /* IntersectionObserver` configured on the horizontal axis (observe elements within the scroll container and trigger when they enter the viewport from the right. JetBrains Mono (400 JetBrains Mono" (Google Fonts */
    --void-black: #0a0617;
    --parchment: #f0e4cc;
    --ghost-white: #e0ddd5;
    --neon-cyan: #00f5d4;
    --neon-magenta: #f72585;
    --neon-yellow: #fee440;
    --circuit-purple: #7b2ff7;
    --sepia-ink: #3d2b1f;
    --display-font: "Share Tech Mono", "JetBrains Mono", "Courier New", monospace;
    --code-font: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --body-font: "Crimson Pro", Georgia, "Times New Roman", serif;
    --note-font: Caveat, "Comic Sans MS", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; height: 100%; overflow: hidden; background: var(--void-black); }

body { color: var(--ghost-white); font: 400 1.05rem/1.75 var(--body-font); cursor: default; }

.scroll-container { display: flex; flex-wrap: nowrap; height: 100vh; width: 100vw; overflow: hidden; scroll-behavior: auto; }

.panel { position: relative; flex: 0 0 100vw; width: 100vw; height: 100vh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }

.paper-field, .void-field { position: absolute; inset: 0; z-index: -4; }

.paper-field {
    background-color: var(--parchment);
    background-image:
        radial-gradient(circle at 15% 22%, rgba(61,43,31,.055) 0 1px, transparent 1.5px),
        radial-gradient(circle at 80% 70%, rgba(61,43,31,.04) 0 1px, transparent 1.5px),
        radial-gradient(circle at 45% 45%, rgba(123,47,247,.035) 0 2px, transparent 2.5px),
        linear-gradient(90deg, rgba(61,43,31,.1), transparent 10%, transparent 90%, rgba(61,43,31,.16));
    background-size: 37px 37px, 63px 63px, 121px 121px, 100% 100%;
    filter: sepia(.12);
}

.void-field {
    background:
        radial-gradient(circle at 52% 50%, rgba(123,47,247,.16), transparent 34%),
        radial-gradient(circle at 20% 80%, rgba(247,37,133,.08), transparent 30%),
        linear-gradient(180deg, #0a0617 0%, #12091f 50%, #0a0617 100%);
}

.paper-grain::after, .void-field::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240,228,204,.055) 0 1px, transparent 1.5px); background-size: 46px 46px; opacity: .45; }

.transition-paper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,6,23,.92), rgba(240,228,204,0) 24vw, rgba(240,228,204,0)); }
.transition-void::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240,228,204,.95), rgba(10,6,23,0) 22vw, rgba(10,6,23,0)); }
.darkening::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(10,6,23,.78)); }
.final-void { background: radial-gradient(circle at center, rgba(0,245,212,.055), transparent 22%), var(--void-black); }

.edge-burn { position: absolute; left: 0; width: 100%; height: 14vh; z-index: -2; opacity: .45; filter: blur(6px); background: linear-gradient(var(--sepia-ink), transparent); }
.edge-burn.top { top: -4vh; }
.edge-burn.bottom { bottom: -4vh; transform: rotate(180deg); }

.pcb-strip { position: absolute; left: 4vw; right: 4vw; height: 32px; opacity: .75; z-index: -1; }
.pcb-strip.top { top: 5vh; }
.pcb-strip.bottom { bottom: 5vh; }
.pcb-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--circuit-purple), transparent); box-shadow: 0 0 8px var(--neon-cyan); }
.pcb-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 8%, var(--neon-cyan) 8% 8.4%, transparent 8.4% 22%, var(--neon-cyan) 22% 22.4%, transparent 22.4% 40%, var(--neon-cyan) 40% 40.4%, transparent 40.4% 67%, var(--neon-cyan) 67% 67.4%, transparent 67.4%); }

.corner-trace { position: absolute; width: 115px; height: 115px; border-color: rgba(123,47,247,.35); border-style: solid; z-index: 1; }
.corner-trace.top-left { top: 7vh; left: 6vw; border-width: 2px 0 0 2px; }
.corner-trace.bottom-right { right: 6vw; bottom: 7vh; border-width: 0 2px 2px 0; }
.corner-trace::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--circuit-purple); box-shadow: 0 0 14px var(--circuit-purple); }
.top-left::after { left: -7px; top: -7px; } .bottom-right::after { right: -7px; bottom: -7px; }

.threshold-content { position: relative; text-align: center; display: grid; justify-items: center; gap: 2rem; }
.lambda-watermark, .lambda-sigil { position: absolute; font-family: var(--display-font); font-size: min(72vh, 42rem); line-height: .8; color: rgba(123,47,247,.035); z-index: -1; animation: sigilWaver 9s ease-in-out infinite; }
.lambda-watermark { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lambda-sigil { inset: auto auto 1vh 4vw; color: rgba(123,47,247,.055); }
.lambda-sigil.pale { right: 8vw; left: auto; color: rgba(61,43,31,.035); }

.wordmark { font: 400 clamp(4rem, 10vw, 9rem)/1 var(--display-font); letter-spacing: .12em; color: var(--neon-cyan); text-shadow: 0 0 4px var(--neon-cyan), 0 0 12px var(--neon-cyan), 0 0 24px rgba(0,245,212,.75); }
.wordmark span { display: inline-block; animation: phosphor 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .13s); }
.wordmark span:nth-child(1) { --i: 1; } .wordmark span:nth-child(2) { --i: 4; } .wordmark span:nth-child(3) { --i: 2; } .wordmark span:nth-child(4) { --i: 7; } .wordmark span:nth-child(5) { --i: 3; } .wordmark span:nth-child(6) { --i: 5; } .wordmark span:nth-child(7) { --i: 8; } .wordmark span:nth-child(8) { --i: 6; } .wordmark span:nth-child(9) { --i: 9; }

.luminous-thread { width: 70vw; height: 28px; position: relative; }
.luminous-thread::before { content: ""; position: absolute; left: 8vw; top: 13px; width: 62vw; height: 2px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), transparent); box-shadow: 0 0 12px var(--neon-cyan); }
.luminous-thread span { position: absolute; top: 8px; left: 8vw; width: 12px; height: 12px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 18px var(--neon-cyan); animation: beadTravel 3.8s ease-in-out infinite; }
.scroll-arrow { color: var(--neon-magenta); font: 400 2rem var(--display-font); text-shadow: 0 0 14px var(--neon-magenta); animation: arrowPulse 1.8s ease-in-out infinite; }

.concept-block { width: min(78vw, 980px); display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.concept-block.ink { color: var(--sepia-ink); }
.chapter-mark { font: 400 .85rem var(--code-font); letter-spacing: .22em; text-transform: uppercase; color: rgba(224,221,213,.58); }
.ink .chapter-mark, .parchment-mode .chapter-mark { color: rgba(61,43,31,.62); }
h2 { font: 700 clamp(2.5rem, 6vw, 6.6rem)/.95 var(--code-font); letter-spacing: .03em; color: var(--neon-cyan); text-shadow: 0 0 4px currentColor, 0 0 18px rgba(0,245,212,.55); }
.functions-panel h2 { color: var(--sepia-ink); text-shadow: 0 0 12px rgba(247,37,133,.25); }
.composition-panel h2 { color: var(--neon-magenta); text-shadow: 0 0 22px rgba(247,37,133,.62); }
.concept-block p:not(.chapter-mark) { max-width: 36rem; font-size: clamp(1.05rem, 1.7vw, 1.45rem); }
.sig-line { display: block; padding: .6rem 1rem; border: 1px solid rgba(247,37,133,.35); background: rgba(10,6,23,.14); font: 400 clamp(.85rem,1.45vw,1.2rem) var(--code-font); color: var(--neon-magenta); box-shadow: inset 0 0 20px rgba(247,37,133,.08); }

.diagram { width: min(78vw, 860px); height: min(45vh, 430px); overflow: visible; }
.trace, .halo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace { stroke: var(--neon-cyan); stroke-width: 4; filter: url(#cyanGlow); stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.halo { stroke: var(--neon-cyan); stroke-width: 13; opacity: .22; }
.magenta { stroke: var(--neon-magenta); filter: url(#magentaGlow); }
.purple { stroke: var(--circuit-purple); filter: drop-shadow(0 0 8px var(--circuit-purple)); }
.pad, .nodes circle { fill: var(--neon-cyan); filter: drop-shadow(0 0 9px currentColor); opacity: .86; }
.pad.magenta { fill: var(--neon-magenta); } .pad.purple { fill: var(--circuit-purple); }
.diagram text { font: 400 22px var(--code-font); fill: var(--ghost-white); text-shadow: 0 0 8px var(--neon-cyan); }
.functions-panel .diagram text { fill: var(--sepia-ink); text-shadow: none; }
.bloom { fill: var(--neon-yellow); opacity: .78; filter: drop-shadow(0 0 20px var(--neon-yellow)); animation: bloomPulse 2.4s ease-in-out infinite; }
.panel.visible .flow { animation: circuitFlow 2s ease-in-out forwards; }

.chapel-arch { position: absolute; width: 72vw; height: 78vh; border: 1px solid rgba(123,47,247,.28); border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: inset 0 0 45px rgba(123,47,247,.08), 0 0 55px rgba(0,245,212,.05); }
.monad-stage, .type-altar { width: min(84vw, 980px); text-align: center; display: grid; justify-items: center; gap: 2rem; }
.monad-stage h2 { font-size: clamp(1.8rem, 4vw, 4.2rem); color: var(--ghost-white); text-shadow: 0 0 22px rgba(123,47,247,.75); }
.glyph-field { display: flex; gap: clamp(1rem, 4vw, 5rem); align-items: stretch; justify-content: center; flex-wrap: wrap; }
.glyph { min-width: 170px; padding: 1.2rem; display: grid; gap: .45rem; border: 1px solid rgba(224,221,213,.14); background: rgba(224,221,213,.025); position: relative; }
.glyph b { font: 700 .88rem var(--code-font); color: var(--ghost-white); }
.glyph span { font: 400 clamp(2.8rem, 7vw, 6rem) var(--display-font); line-height: 1; }
.glyph small { font: 400 .78rem/1.5 var(--code-font); color: rgba(224,221,213,.66); }
.glyph.cyan span { color: var(--neon-cyan); text-shadow: 0 0 18px var(--neon-cyan); }
.glyph.magenta span { color: var(--neon-magenta); text-shadow: 0 0 18px var(--neon-magenta); }
.glyph.yellow span { color: var(--neon-yellow); text-shadow: 0 0 18px var(--neon-yellow); }

.type-altar { position: relative; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(0,245,212,.28); background: radial-gradient(circle at center, rgba(123,47,247,.18), rgba(10,6,23,.22) 55%, transparent); }
.type-altar code { font: 700 clamp(1rem, 2.25vw, 2rem)/1.7 var(--code-font); color: var(--neon-cyan); text-shadow: 0 0 22px rgba(0,245,212,.8); }
.type-altar p { max-width: 44rem; color: rgba(224,221,213,.72); }
.afterimage { position: absolute; font: 400 16vw var(--display-font); color: rgba(247,37,133,.05); inset: auto 2vw -8vh auto; pointer-events: none; }

.specimen-wall { width: min(82vw, 900px); display: grid; gap: 1.3rem; }
.specimen-wall.wide { width: min(86vw, 1080px); }
.type-frame { position: relative; padding: 1.25rem 1.45rem; background: rgba(240,228,204,.32); border: 1px solid rgba(123,47,247,.28); box-shadow: 0 10px 30px rgba(61,43,31,.08); color: var(--sepia-ink); }
.type-frame::before, .type-frame::after { content: ""; position: absolute; width: 24px; height: 24px; border-color: var(--circuit-purple); border-style: solid; opacity: .65; }
.type-frame::before { left: -7px; top: -7px; border-width: 2px 0 0 2px; }
.type-frame::after { right: -7px; bottom: -7px; border-width: 0 2px 2px 0; }
.type-frame code { display: block; font: 400 clamp(.88rem,1.6vw,1.25rem)/1.55 var(--code-font); color: var(--sepia-ink); }
.type-frame p { position: absolute; right: 1.2rem; bottom: -1.15rem; max-width: 18rem; padding: .18rem .55rem; font: 400 1rem/1.1 var(--note-font); color: var(--neon-magenta); background: rgba(240,228,204,.84); box-shadow: 0 0 18px rgba(247,37,133,.14); opacity: 0; transform: translateY(-4px) rotate(-1deg); transition: opacity .35s ease, transform .35s ease; }
.type-frame:hover p { opacity: 1; transform: translateY(0) rotate(-1deg); }

.exit-content { display: grid; justify-items: center; gap: 1.2rem; }
.terminal-prompt { font: 400 clamp(1.7rem, 4vw, 3.8rem) var(--code-font); color: var(--neon-magenta); text-shadow: 0 0 18px var(--neon-magenta); }
.terminal-prompt i { display: inline-block; width: .08em; height: 1em; margin-left: .18em; vertical-align: -.12em; background: var(--neon-magenta); box-shadow: 0 0 14px var(--neon-magenta); animation: blink 2s infinite; }
.exit-content p { color: rgba(224,221,213,.42); font-size: 1.15rem; font-style: italic; }

.reveal-set { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--stagger, 0) * 60ms); }
.panel.visible .reveal-set, .threshold.visible .threshold-content { opacity: 1; transform: translateY(0); }
.panel.visible .glyph { animation: settle .72s ease both; animation-delay: calc(var(--order, 0) * .08s); }
.glyph:nth-child(1) { --order: 1; } .glyph:nth-child(2) { --order: 2; } .glyph:nth-child(3) { --order: 3; }

.circuit-scrollbar { position: fixed; z-index: 20; left: 3vw; right: 3vw; bottom: 13px; height: 13px; }
.circuit-scrollbar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(0,245,212,.25); box-shadow: 0 0 10px rgba(0,245,212,.45); }
.scroll-progress { position: absolute; left: 0; top: 5px; height: 3px; width: 0%; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--neon-yellow)); box-shadow: 0 0 12px var(--neon-cyan); }
.section-dot { position: absolute; top: 2px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; border: 1px solid var(--neon-cyan); background: var(--void-black); box-shadow: 0 0 9px rgba(0,245,212,.75); }

@keyframes phosphor { 0%, 100% { opacity: .88; transform: translateY(0); } 49% { opacity: 1; text-shadow: 0 0 6px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 36px rgba(0,245,212,.8); } 51% { opacity: .7; } 54% { opacity: 1; } }
@keyframes beadTravel { 0% { transform: translateX(0); opacity: .1; } 18%, 80% { opacity: 1; } 100% { transform: translateX(61vw); opacity: 0; } }
@keyframes arrowPulse { 0%, 100% { transform: translateX(0); opacity: .55; } 50% { transform: translateX(12px); opacity: 1; } }
@keyframes sigilWaver { 0%, 100% { filter: blur(0); } 50% { filter: blur(1.5px); } }
@keyframes circuitFlow { to { stroke-dashoffset: 0; } }
@keyframes bloomPulse { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.45); opacity: .9; } }
@keyframes settle { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

@media (max-width: 760px) {
    .wordmark { font-size: clamp(2.5rem, 13vw, 4.8rem); letter-spacing: .06em; }
    .concept-block, .specimen-wall, .type-altar { width: 88vw; }
    .diagram { width: 94vw; height: 42vh; }
    .glyph-field { gap: .7rem; }
    .glyph { min-width: 28vw; padding: .8rem; }
    .type-frame p { position: static; opacity: 1; margin-top: .5rem; transform: none; }
}