:root {
    /* Typography compliance tokens: Interface labels creating cut-glass typographic voice rather than common mono-heavy handwritten language. Grotesk** clean geometric confidence. Narrative should Sans** humane */
    --black: #070813;
    --glass: #DFFBFF;
    --cyan: #37F4FF;
    --violet: #8A5CFF;
    --magenta: #FF4FD8;
    --lime: #C8FF4A;
    --amber: #FFB86B;
    --title-font: "Tilt Prism", "Space Grotesk", "Arial Black", system-ui, sans-serif;
    --ui-font: "Space Grotesk", Inter, system-ui, sans-serif;
    --copy-font: "Alegreya Sans", Inter, system-ui, sans-serif;
    --mono-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-token-grotesk: "Grotesk**";
    --font-token-sans: "Sans**";
    --font-token-regex: "Space Grotes* Sans*";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
    margin: 0;
    color: var(--glass);
    background: var(--black);
    font-family: var(--copy-font);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -4;
    background:
        radial-gradient(circle at 14% 18%, rgba(55,244,255,.18), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(255,79,216,.13), transparent 23%),
        radial-gradient(circle at 72% 84%, rgba(138,92,255,.20), transparent 28%),
        linear-gradient(135deg, #070813 0%, #0b1028 52%, #070813 100%);
}

.compliance-prism { position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cosmic-noise {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: .34;
    mix-blend-mode: screen;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(223,251,255,.38) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(55,244,255,.22) 0 1px, transparent 1px),
        repeating-linear-gradient(94deg, rgba(223,251,255,.035) 0 1px, transparent 1px 9px);
    background-size: 29px 31px, 43px 47px, 100% 100%;
}

.cursor-caustic {
    position: fixed;
    z-index: 70;
    left: var(--x, 50vw);
    top: var(--y, 50vh);
    width: 34vmin;
    height: 34vmin;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: .45;
    mix-blend-mode: screen;
    background: conic-gradient(from var(--spin, 0deg), transparent, rgba(55,244,255,.34), transparent, rgba(255,79,216,.28), transparent, rgba(200,255,74,.22), transparent);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: blur(18px);
}

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

.facet-node {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--glass);
    text-decoration: none;
    font: 700 10px var(--mono-font);
}

.facet-node i {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(223,251,255,.45);
    transform: rotate(45deg);
    background: rgba(223,251,255,.04);
    box-shadow: 0 0 18px rgba(55,244,255,.05);
    transition: .35s ease;
}
.facet-node span { position: relative; z-index: 2; }
.facet-node.active i {
    border-color: var(--cyan);
    background: rgba(55,244,255,.16);
    box-shadow: 0 0 24px var(--cyan), 7px 0 20px var(--magenta), -7px 0 20px var(--violet);
    transform: rotate(45deg) scale(1.25);
}

.chamber {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

h1, h2 {
    margin: 0;
    font-family: var(--title-font);
    font-weight: 900;
    line-height: .82;
    letter-spacing: .02em;
    text-transform: uppercase;
}

h2 { font-size: clamp(3.3rem, 8vw, 10rem); }
p { font-size: clamp(1.06rem, 1.45vw, 1.35rem); line-height: 1.55; }
.index-mark, .artifact-action { font-family: var(--mono-font); letter-spacing: .16em; text-transform: uppercase; }
.index-mark { display: block; color: var(--lime); font-size: 11px; }

.artifact-action {
    border: 1px solid rgba(55,244,255,.58);
    color: var(--glass);
    background: linear-gradient(90deg, rgba(55,244,255,.13), rgba(255,79,216,.10));
    padding: 13px 18px;
    cursor: pointer;
    box-shadow: inset 0 0 18px rgba(55,244,255,.14), 0 0 28px rgba(55,244,255,.12);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.artifact-action:hover { transform: translateY(-2px); border-color: var(--magenta); box-shadow: 0 0 32px rgba(255,79,216,.24), inset 0 0 22px rgba(255,79,216,.12); }

.dark-vitrine { perspective: 1200px; display: grid; place-items: center; padding: 6vw; }
.star-atlas {
    position: absolute;
    inset: 6%;
    opacity: .55;
    background:
        linear-gradient(32deg, transparent 49.7%, rgba(223,251,255,.12) 50%, transparent 50.3%),
        linear-gradient(143deg, transparent 49.7%, rgba(55,244,255,.12) 50%, transparent 50.3%),
        radial-gradient(circle, rgba(223,251,255,.65) 0 1px, transparent 1.5px);
    background-size: 100% 100%, 100% 100%, 79px 83px;
    mask-image: radial-gradient(ellipse at center, black, transparent 73%);
}
.vitrine-frame {
    position: relative;
    width: min(1120px, 90vw);
    min-height: 74vh;
    padding: clamp(28px, 5vw, 72px);
    display: grid;
    align-content: center;
    transform-style: preserve-3d;
    border: 1px solid rgba(223,251,255,.25);
    background:
        linear-gradient(105deg, rgba(223,251,255,.10), transparent 20% 72%, rgba(55,244,255,.08)),
        repeating-linear-gradient(120deg, rgba(223,251,255,.025) 0 2px, transparent 2px 22px),
        rgba(7,8,19,.72);
    box-shadow: inset 0 0 85px rgba(55,244,255,.08), 0 0 70px rgba(138,92,255,.18);
    clip-path: polygon(3% 0, 94% 2%, 100% 18%, 97% 94%, 74% 100%, 0 94%, 0 9%);
}
.vitrine-rail { position: absolute; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent); }
.vitrine-rail.top { top: 9%; }
.vitrine-rail.bottom { bottom: 11%; }

.wordmark {
    position: relative;
    min-height: clamp(260px, 34vw, 440px);
    font-size: clamp(4rem, 12vw, 13rem);
    transform-style: preserve-3d;
}
.glass-letter, .satellite, .satellite-dot {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: .8em;
    color: rgba(223,251,255,.80);
    -webkit-text-stroke: 1px rgba(223,251,255,.58);
    text-shadow: -10px 0 0 rgba(55,244,255,.35), 10px 0 0 rgba(255,79,216,.30), 0 18px 0 rgba(138,92,255,.24), 0 0 35px rgba(223,251,255,.28);
    transform: translate3d(var(--tx), var(--ty), calc(var(--z) * 1px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
    transition: transform .8s cubic-bezier(.22,1.2,.3,1), text-shadow .6s ease;
    mix-blend-mode: screen;
}
.p-one { --tx: 0; --ty: 20px; --z: 34; left: 2%; top: 25%; }
.p-two { --tx: 0; --ty: -10px; --z: -22; left: 16%; top: 12%; color: rgba(255,79,216,.75); }
.u-lens { --tx: 0; --ty: 32px; --z: 18; left: 31%; top: 29%; color: rgba(55,244,255,.78); }
.z-one { --tx: 0; --ty: -20px; --z: 42; left: 47%; top: 7%; color: rgba(200,255,74,.70); }
.z-two { --tx: 0; --ty: 28px; --z: -38; left: 59%; top: 34%; color: rgba(138,92,255,.85); }
.l-key { --tx: 0; --ty: -8px; --z: 26; left: 74%; top: 18%; }
.satellite-dot, .satellite { font-family: var(--ui-font); font-size: clamp(1.4rem, 3vw, 3rem); }
.satellite-dot { --tx: 0; --ty: 0; --z: 14; left: 85%; top: 17%; color: var(--amber); }
.net-n { --tx: 0; --ty: 0; --z: -18; left: 89%; top: 36%; color: var(--cyan); }
.net-e { --tx: 0; --ty: 0; --z: 30; left: 86%; top: 53%; color: var(--lime); }
.net-t { --tx: 0; --ty: 0; --z: -26; left: 93%; top: 67%; color: var(--magenta); }
.vitrine-frame.aligned .glass-letter, .vitrine-frame.aligned .satellite, .vitrine-frame.aligned .satellite-dot { text-shadow: 0 0 30px var(--cyan), 0 0 58px var(--magenta); }

.curator-pane {
    max-width: 520px;
    padding: 22px 24px;
    border: 1px solid rgba(223,251,255,.24);
    background: rgba(223,251,255,.055);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 26px rgba(55,244,255,.06);
}
.curator-pane b { font-family: var(--ui-font); color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; }

.dust-field i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--glass);
    opacity: .65;
    box-shadow: 0 0 9px var(--cyan);
    animation: drift var(--d, 7s) linear infinite;
}

.spectral-scatter { display: grid; place-items: center; padding: 6vw; }
.radial-constellation { position: relative; width: min(96vw, 1080px); height: min(96vw, 820px); min-height: 620px; }
.beam-map { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(55,244,255,.18)); }
.orbit-line { fill: none; stroke: rgba(55,244,255,.34); stroke-width: 1.5; stroke-dasharray: 9 16; animation: trace 8s linear infinite; }
.orbit-line.faint { stroke: rgba(255,79,216,.23); animation-direction: reverse; }
.trace-line { stroke: rgba(223,251,255,.19); stroke-width: 1; }
.scatter-core {
    position: absolute;
    left: 50%; top: 50%;
    width: min(460px, 72vw);
    transform: translate(-50%, -50%);
    padding: 28px;
    background: rgba(7,8,19,.72);
    border: 1px solid rgba(223,251,255,.22);
    backdrop-filter: blur(16px);
    text-align: center;
    clip-path: polygon(12% 0, 100% 8%, 91% 100%, 0 88%);
}
.scatter-core h2 { font-size: clamp(2.5rem, 5vw, 5.8rem); }
.shard {
    position: absolute;
    left: 50%; top: 50%;
    width: clamp(86px, 11vw, 142px);
    height: clamp(102px, 13vw, 170px);
    display: grid;
    place-items: center;
    color: var(--glass);
    font: 900 clamp(3rem, 7vw, 7.5rem) var(--title-font);
    background: linear-gradient(145deg, rgba(223,251,255,.16), color-mix(in srgb, var(--c), transparent 68%));
    border: 1px solid color-mix(in srgb, var(--c), white 30%);
    clip-path: polygon(48% 0, 100% 20%, 86% 100%, 8% 84%, 0 18%);
    box-shadow: 0 0 30px color-mix(in srgb, var(--c), transparent 65%), inset 0 0 26px rgba(223,251,255,.12);
    transform: rotate(var(--a)) translateX(var(--scatter, calc(var(--r) * .72))) rotate(calc(var(--a) * -1)) rotateY(20deg);
    transition: transform 1s cubic-bezier(.2,1.2,.25,1);
}
.spectral-scatter.in-view .shard { --scatter: var(--r); }
.shard span {
    position: absolute;
    left: 60%; top: 102%;
    width: max-content;
    color: var(--c);
    font: 700 11px var(--mono-font);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.refraction-lock { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3vw; align-items: center; padding: 7vw; }
.lock-copy { max-width: 560px; position: relative; z-index: 2; }
.lock-copy h2 { max-width: 700px; }
.prism-lock { position: relative; height: min(76vh, 740px); min-height: 540px; perspective: 1000px; transform-style: preserve-3d; }
.triangle-pane {
    position: absolute;
    left: 50%; top: 50%;
    width: min(34vw, 360px);
    height: min(34vw, 360px);
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    border: 1px solid rgba(223,251,255,.18);
    background: linear-gradient(145deg, rgba(223,251,255,.08), rgba(55,244,255,.20));
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) rotateZ(var(--base)) rotateY(var(--tilt, 26deg)) translateZ(var(--z));
    transition: transform 1.15s cubic-bezier(.2,1.15,.25,1), filter .5s ease;
    box-shadow: inset 0 0 45px rgba(223,251,255,.13), 0 0 32px rgba(55,244,255,.17);
}
.triangle-pane span { font: 900 clamp(1.8rem, 4vw, 4.5rem) var(--ui-font); color: rgba(223,251,255,.18); letter-spacing: .1em; }
.pane-a { --base: 0deg; --z: 70px; background: rgba(55,244,255,.20); }
.pane-b { --base: 64deg; --z: 20px; background: rgba(255,79,216,.18); }
.pane-c { --base: 126deg; --z: -38px; background: rgba(138,92,255,.22); }
.pane-d { --base: 194deg; --z: 100px; background: rgba(200,255,74,.13); }
.prism-lock.tuned .pane-a { --base: 30deg; }
.prism-lock.tuned .pane-b { --base: 90deg; }
.prism-lock.tuned .pane-c { --base: 150deg; }
.prism-lock.tuned .pane-d { --base: 210deg; }
.prism-lock.tuned .triangle-pane span { color: rgba(223,251,255,.92); text-shadow: 0 0 26px var(--glass); }
.lock-slit {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    color: var(--black); background: var(--lime); padding: 18px 34px;
    font: 900 24px var(--ui-font); letter-spacing: .18em;
    box-shadow: 0 0 35px var(--lime); opacity: .12; transition: opacity .45s ease;
}
.prism-lock.tuned .lock-slit { opacity: 1; }
.spectral-fingerprint { position: absolute; inset: 8%; border-radius: 50%; background: repeating-radial-gradient(ellipse at center, transparent 0 12px, rgba(223,251,255,.09) 13px 14px); animation: pulse 4s ease-in-out infinite; }

.orbit-missing-facets { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 4vw; padding: 7vw; }
.orbit-copy { position: relative; z-index: 2; max-width: 560px; }
.orbital-instrument { position: relative; height: min(78vh, 760px); min-height: 560px; }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-path { fill: none; stroke: rgba(55,244,255,.42); stroke-width: 2; stroke-dasharray: 10 15; transform-origin: center; animation: orbitTrace 11s linear infinite; }
.path-b { stroke: rgba(255,79,216,.28); animation-direction: reverse; }
.missing-outline { fill: rgba(7,8,19,.35); stroke: var(--lime); stroke-width: 3; stroke-dasharray: 28 18; opacity: .26; transition: opacity .5s ease, filter .5s ease; }
.orbital-instrument.found .missing-outline { opacity: 1; filter: drop-shadow(0 0 18px var(--lime)); }
.sat-node {
    position: absolute;
    left: 50%; top: 50%;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--black);
    background: var(--glass);
    font: 900 26px var(--ui-font);
    box-shadow: 0 0 24px var(--cyan), inset 0 0 12px rgba(255,255,255,.65);
    transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
    animation: satellite var(--dur) linear infinite;
}
.dot-moon { --a: 12deg; --r: 240px; --dur: 9s; background: var(--amber); }
.n-moon { --a: 112deg; --r: 310px; --dur: 13s; background: var(--cyan); }
.e-moon { --a: 218deg; --r: 220px; --dur: 11s; background: var(--lime); }
.t-moon { --a: 306deg; --r: 280px; --dur: 15s; background: var(--magenta); color: var(--glass); }
.facet-void {
    position: absolute; left: 50%; top: 50%; width: 240px; height: 230px;
    transform: translate(-50%, -50%) rotate(-12deg);
    clip-path: polygon(50% 0, 96% 27%, 82% 88%, 22% 100%, 0 42%);
    background: radial-gradient(circle at 50% 30%, rgba(7,8,19,.88), rgba(7,8,19,.35));
    border: 1px solid rgba(200,255,74,.34);
    box-shadow: inset 0 0 40px rgba(7,8,19,.85);
}
.facet-void span { position: absolute; left: 42px; top: 100px; color: var(--lime); font: 700 11px var(--mono-font); letter-spacing: .14em; text-transform: uppercase; opacity: .35; }
.orbital-instrument.found .facet-void { box-shadow: 0 0 40px rgba(200,255,74,.22), inset 0 0 45px rgba(200,255,74,.06); }

.final-clear-shape { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 4vw; padding: 7vw; }
.final-copy { max-width: 580px; z-index: 2; }
.clear-sigil { position: relative; height: min(78vh, 760px); min-height: 570px; transform-style: preserve-3d; perspective: 1100px; }
.clear-sigil::before { content: ""; position: absolute; inset: 14%; border: 1px dashed rgba(223,251,255,.26); border-radius: 50%; box-shadow: 0 0 45px rgba(55,244,255,.12); }
.sigil-piece {
    position: absolute;
    display: grid; place-items: center;
    width: 26%; height: 32%;
    color: rgba(223,251,255,.86);
    font: 900 clamp(3rem, 7vw, 8rem) var(--title-font);
    border: 1px solid rgba(223,251,255,.30);
    background: linear-gradient(150deg, rgba(223,251,255,.18), rgba(55,244,255,.08), rgba(255,79,216,.12));
    box-shadow: inset 0 0 42px rgba(223,251,255,.12), 0 0 30px rgba(55,244,255,.15);
    clip-path: polygon(8% 0, 100% 14%, 84% 100%, 0 82%);
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateZ(var(--z));
    transition: transform 1.25s cubic-bezier(.16,1.2,.28,1), box-shadow .5s ease;
}
.sp1 { left: 6%; top: 20%; --x:-130px; --y:-70px; --r:-24deg; --z:80px; color: var(--magenta); }
.sp2 { left: 20%; top: 12%; --x:90px; --y:-110px; --r:28deg; --z:30px; color: var(--cyan); }
.sp3 { left: 35%; top: 26%; --x:20px; --y:140px; --r:-12deg; --z:-40px; color: var(--lime); }
.sp4 { left: 50%; top: 18%; --x:150px; --y:-30px; --r:33deg; --z:65px; color: var(--violet); }
.sp5 { left: 61%; top: 42%; --x:115px; --y:100px; --r:-30deg; --z:-20px; color: var(--amber); }
.sp6 { left: 30%; top: 55%; --x:-100px; --y:125px; --r:22deg; --z:110px; color: var(--glass); }
.final-clear-shape.locked .sigil-piece { transform: translate(0,0) rotate(0deg) translateZ(0); box-shadow: 0 0 32px rgba(55,244,255,.38), 0 0 54px rgba(255,79,216,.20), inset 0 0 42px rgba(223,251,255,.18); }
.sigil-satellites { position: absolute; left: 63%; top: 72%; color: var(--glass); font: 900 clamp(1.5rem, 3vw, 3.5rem) var(--ui-font); letter-spacing: .08em; text-shadow: 0 0 22px var(--cyan); transform: translate(95px, 70px); transition: transform 1.2s cubic-bezier(.16,1.2,.28,1); }
.final-clear-shape.locked .sigil-satellites { transform: translate(0,0); }
.caustic-flash { position: absolute; inset: 25%; opacity: 0; background: conic-gradient(from 40deg, transparent, var(--cyan), transparent, var(--magenta), transparent, var(--lime), transparent); filter: blur(16px); mix-blend-mode: screen; clip-path: polygon(50% 0, 60% 42%, 100% 50%, 60% 58%, 50% 100%, 40% 58%, 0 50%, 40% 42%); }
.final-clear-shape.locked .caustic-flash { animation: flash 1.2s ease forwards; }

@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }
@keyframes trace { to { stroke-dashoffset: -240; } }
@keyframes pulse { 0%,100% { opacity: .2; transform: scale(.96); } 50% { opacity: .55; transform: scale(1.03); } }
@keyframes orbitTrace { to { transform: rotate(360deg); } }
@keyframes satellite { to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc((var(--a) + 360deg) * -1)); } }
@keyframes flash { 0% { opacity: 0; transform: scale(.35) rotate(0); } 35% { opacity: .95; } 100% { opacity: 0; transform: scale(1.55) rotate(90deg); } }

@media (max-width: 900px) {
    .facet-nav { right: 8px; gap: 10px; }
    .refraction-lock, .orbit-missing-facets, .final-clear-shape { grid-template-columns: 1fr; padding: 18vh 7vw 8vh; }
    .wordmark { font-size: clamp(3.2rem, 18vw, 7rem); min-height: 360px; }
    .radial-constellation { min-height: 720px; }
    .shard { transform: rotate(var(--a)) translateX(calc(var(--r) * .72)) rotate(calc(var(--a) * -1)); }
    .prism-lock, .orbital-instrument, .clear-sigil { min-height: 500px; }
    .sat-node { --r: 36vw; }
}