:root {
    /* Interpret **MIRIS tec tech tech* tech** as a compact optical intelligence lab—part mirror array; IBM Plex Mono only for calibration marks. */
    --void: #05070B;
    --graphite: #121923;
    --cyan: #5FF7FF;
    --violet: #A66BFF;
    --chrome: #D7E7F2;
    --gold: #FFD36A;
    --rose: #FF7BB8;
    --mx: 50vw;
    --my: 50vh;
    --scroll: 0;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    color: var(--chrome);
    font-family: "Bricolage Grotesque", Inter, sans-serif;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(95,247,255,.12), transparent 19rem),
        radial-gradient(circle at 82% 14%, rgba(166,107,255,.18), transparent 24rem),
        linear-gradient(125deg, #05070B 0%, #080D14 46%, #121923 72%, #05070B 100%);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    background:
        linear-gradient(61deg, transparent 0 42%, rgba(95,247,255,.12) 42.25%, transparent 43.2% 100%),
        linear-gradient(61deg, transparent 0 55%, rgba(255,123,184,.11) 55.2%, transparent 56% 100%),
        linear-gradient(61deg, transparent 0 68%, rgba(255,211,106,.09) 68.1%, transparent 68.55% 100%);
    mix-blend-mode: screen;
    transform: translateY(calc(var(--scroll) * -0.025px));
    z-index: 2;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    z-index: 100;
    background-image:
        radial-gradient(circle at 13% 21%, rgba(215,231,242,.18) 0 1px, transparent 1px),
        radial-gradient(circle at 77% 48%, rgba(95,247,255,.14) 0 1px, transparent 1px),
        radial-gradient(circle at 39% 82%, rgba(255,123,184,.13) 0 1px, transparent 1px);
    background-size: 73px 73px, 101px 101px, 131px 131px;
}

.cursor-orb {
    position: fixed;
    width: 14rem;
    height: 14rem;
    left: calc(var(--mx) - 7rem);
    top: calc(var(--my) - 7rem);
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95,247,255,.18), rgba(166,107,255,.08) 38%, transparent 68%);
    filter: blur(14px);
}

.instrument-nav {
    position: fixed;
    z-index: 80;
    top: 2rem;
    left: 2rem;
    display: flex;
    gap: .7rem;
    transform: rotate(-2.5deg);
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(.56rem, .75vw, .72rem);
    letter-spacing: .16em;
}

.instrument-nav a {
    color: rgba(215,231,242,.68);
    text-decoration: none;
    padding: .55rem .72rem;
    border: 1px solid rgba(215,231,242,.13);
    background: rgba(18,25,35,.38);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 20px rgba(95,247,255,.05);
    transition: color .4s ease, border-color .4s ease, transform .4s ease;
}

.instrument-nav a:hover {
    color: var(--cyan);
    border-color: rgba(95,247,255,.55);
    transform: translateY(-.18rem) skewX(-8deg);
}

.mirror-index-chamber { position: relative; z-index: 5; }

.scene {
    position: relative;
    min-height: 108vh;
    padding: clamp(6rem, 9vw, 10rem) clamp(1.5rem, 5vw, 6rem);
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
}

.scene::after {
    content: "";
    position: absolute;
    inset: 12% -12%;
    background: linear-gradient(61deg, transparent 15%, rgba(215,231,242,.05), transparent 28%, transparent 62%, rgba(95,247,255,.08), transparent 70%);
    transform: rotate(calc(-8deg + var(--scroll) * .004deg));
    z-index: -1;
}

.scene-label, .final-mark {
    position: absolute;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: .22em;
    color: rgba(215,231,242,.58);
    font-size: .72rem;
}

.scene-label { top: 7.2rem; right: clamp(1.5rem, 6vw, 7rem); transform: rotate(3deg); }

.scene-title {
    margin: 0;
    font-family: Syne, "Space Grotesk", sans-serif;
    font-size: clamp(3rem, 10vw, 10rem);
    letter-spacing: .13em;
    line-height: .82;
    color: rgba(215,231,242,.9);
    text-transform: uppercase;
    text-shadow: .04em 0 rgba(95,247,255,.55), -.035em 0 rgba(255,123,184,.4), 0 0 34px rgba(166,107,255,.16);
}

.caption-rail {
    position: absolute;
    max-width: 24rem;
    padding: 1rem 1.1rem 1rem 1.35rem;
    border-left: 1px solid rgba(95,247,255,.55);
    background: linear-gradient(90deg, rgba(18,25,35,.7), rgba(18,25,35,.14));
    backdrop-filter: blur(15px);
    box-shadow: inset 0 0 18px rgba(215,231,242,.05), 0 0 34px rgba(5,7,11,.4);
}

.caption-rail span {
    display: block;
    color: var(--gold);
    font-family: "IBM Plex Mono", monospace;
    font-size: .68rem;
    letter-spacing: .2em;
    margin-bottom: .55rem;
}

.caption-rail p {
    margin: 0;
    color: rgba(215,231,242,.78);
    font-size: clamp(1rem, 1.5vw, 1.22rem);
    line-height: 1.45;
}

.rail-a { left: 7%; bottom: 16%; transform: rotate(-5deg); }
.rail-b { right: 7%; bottom: 18%; transform: rotate(4deg); }
.rail-c { left: 9%; top: 22%; transform: rotate(-3deg); }
.rail-d { right: 8%; top: 24%; transform: rotate(3deg); }
.rail-e { left: 8%; bottom: 18%; transform: rotate(-4deg); }

.diamond-viewport {
    position: relative;
    width: min(68vw, 50rem);
    aspect-ratio: 1;
    transform: rotate(45deg) translate3d(0, calc(var(--scene-progress, 0) * -2rem), 0);
    border: 1px solid rgba(215,231,242,.17);
    background: rgba(18,25,35,.24);
    box-shadow: 0 0 70px rgba(95,247,255,.08), inset 0 0 70px rgba(5,7,11,.85);
}

.obsidian-slab {
    position: absolute;
    inset: 18%;
    display: grid;
    place-items: center;
    transform: rotate(-45deg) skew(-7deg, 3deg);
    background: linear-gradient(140deg, rgba(215,231,242,.1), rgba(18,25,35,.96) 23%, #05070B 65%, rgba(95,247,255,.08));
    border: 1px solid rgba(215,231,242,.2);
    box-shadow: inset 0 0 80px #05070B, 0 24px 80px rgba(0,0,0,.55), 0 0 42px rgba(95,247,255,.08);
    overflow: hidden;
}

.obsidian-slab::before,
.obsidian-slab::after {
    content: "";
    position: absolute;
    inset: -15%;
    background: linear-gradient(117deg, transparent 42%, rgba(215,231,242,.18), transparent 48%);
    transform: translateX(-40%);
}

.obsidian-slab::after {
    background: linear-gradient(117deg, transparent 50%, rgba(255,123,184,.16), transparent 54%);
    transform: translateX(36%);
}

.scan-line {
    position: absolute;
    top: -12%;
    bottom: -12%;
    width: .18rem;
    background: linear-gradient(180deg, transparent, var(--cyan), #D7E7F2, transparent);
    box-shadow: 0 0 25px var(--cyan), 0 0 70px rgba(95,247,255,.55);
    animation: scan 4.7s ease-in-out infinite;
}

.wordmark-resolved,
.wordmark-reflection {
    font-family: Syne, "Space Grotesk", sans-serif;
    font-weight: 800;
    letter-spacing: .22em;
    font-size: clamp(2.3rem, 7vw, 6.8rem);
    text-transform: lowercase;
}

.wordmark-resolved {
    color: rgba(215,231,242,.93);
    opacity: calc(.35 + var(--wake, .4) * .65);
    text-shadow: .035em 0 var(--cyan), -.03em 0 var(--rose), 0 0 48px rgba(95,247,255,.3);
    transform: translateY(calc((1 - var(--wake, .4)) * .8rem));
}

.wordmark-reflection {
    position: absolute;
    top: 55%;
    color: rgba(95,247,255,.2);
    opacity: .46;
    transform: scaleY(-1) skewX(-16deg) translateX(calc(var(--drift, 0) * .035rem));
    filter: blur(.04rem);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 72%);
}

.mirror-id {
    position: absolute;
    bottom: 1.1rem;
    right: 1.2rem;
    font-family: "IBM Plex Mono", monospace;
    color: rgba(255,211,106,.67);
    letter-spacing: .16em;
    font-size: .62rem;
}

.calibration-column {
    position: absolute;
    right: 12%;
    bottom: 13%;
    display: grid;
    gap: .58rem;
    font-family: "IBM Plex Mono", monospace;
    color: var(--cyan);
}

.calibration-column i {
    display: block;
    width: 4.8rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--chrome), transparent);
}

.calibration-column i:nth-child(even) { width: 2.2rem; margin-left: 2.6rem; background: var(--gold); }
.calibration-column strong { font-size: .7rem; letter-spacing: .2em; font-weight: 500; }

.prism-stage {
    position: relative;
    width: min(76vw, 62rem);
    height: 36rem;
    transform: rotate(-8deg);
}

.prism-wedge {
    position: absolute;
    inset: 15% 22% 12% 22%;
    clip-path: polygon(12% 88%, 52% 8%, 91% 76%);
    background:
        linear-gradient(110deg, rgba(95,247,255,.22), rgba(215,231,242,.1) 30%, rgba(166,107,255,.19) 62%, rgba(255,123,184,.18)),
        linear-gradient(32deg, transparent 48%, rgba(255,211,106,.45) 49%, transparent 51%);
    border: 1px solid rgba(215,231,242,.4);
    filter: drop-shadow(0 0 50px rgba(95,247,255,.18));
}

.prism-wedge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(72deg, transparent 0 28px, rgba(215,231,242,.12) 29px, transparent 31px);
    mix-blend-mode: screen;
}

.spectral-name { position: absolute; inset: 0; font-family: Syne, sans-serif; font-weight: 800; letter-spacing: .25em; }
.ghost { position: absolute; left: 13%; top: 42%; font-size: clamp(2rem, 6vw, 5.5rem); opacity: .72; text-transform: lowercase; }
.ghost.cyan { color: var(--cyan); transform: translate(-5%, -56%) skewX(-12deg); }
.ghost.violet { color: var(--violet); transform: translate(3%, -32%) skewX(10deg); mix-blend-mode: screen; }
.ghost.rose { color: var(--rose); transform: translate(11%, -9%) skewX(-6deg); mix-blend-mode: screen; }
.ghost.chrome { color: var(--chrome); transform: translate(0, 16%); opacity: .85; }

.wavelength-ruler {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 10%;
    height: 2.7rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    border-bottom: 1px solid rgba(215,231,242,.35);
}

.wavelength-ruler b { width: 1px; height: 100%; background: rgba(95,247,255,.55); box-shadow: 0 0 14px var(--cyan); }
.wavelength-ruler b:nth-child(odd) { height: 48%; background: rgba(255,211,106,.7); }

.split-title {
    position: absolute;
    top: 17%;
    left: 7%;
    z-index: 3;
    font-size: clamp(3rem, 8vw, 8.7rem);
}

.split-title::before,
.split-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.split-title::before { color: var(--cyan); transform: translate(.08em, -.04em); opacity: .35; }
.split-title::after { color: var(--rose); transform: translate(-.07em, .055em); opacity: .3; }

.loom-object {
    position: relative;
    width: min(86vw, 70rem);
    height: 36rem;
    transform: rotate(5deg);
    border: 1px solid rgba(215,231,242,.12);
    background: linear-gradient(120deg, rgba(18,25,35,.5), rgba(5,7,11,.18));
    box-shadow: inset 0 0 70px rgba(95,247,255,.04);
}

.light-ribbons { width: 100%; height: 100%; overflow: visible; }
.ribbon { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 36 18; animation: weave 8s linear infinite; filter: drop-shadow(0 0 16px currentColor); }
.ribbon-cyan { color: var(--cyan); stroke: var(--cyan); }
.ribbon-violet { color: var(--violet); stroke: var(--violet); animation-duration: 10s; }
.ribbon-rose { color: var(--rose); stroke: var(--rose); animation-duration: 7s; }
.ribbon-gold { color: var(--gold); stroke: var(--gold); stroke-width: 2; animation-duration: 12s; }

.transparent-bracket {
    position: absolute;
    top: 18%;
    width: 9rem;
    height: 64%;
    border: 1px solid rgba(215,231,242,.25);
    background: rgba(215,231,242,.03);
    box-shadow: inset 0 0 28px rgba(95,247,255,.08);
}
.bracket-left { left: 8%; border-right: 0; transform: skewY(-10deg); }
.bracket-right { right: 8%; border-left: 0; transform: skewY(10deg); }

.loom-title { position: absolute; right: 4%; top: 15%; transform: rotate(3deg); z-index: 5; }
.loom-node { position: absolute; font-family: "IBM Plex Mono", monospace; color: var(--gold); letter-spacing: .18em; font-size: .72rem; }
.node-one { left: 23%; top: 30%; }
.node-two { right: 28%; bottom: 23%; }
.node-three { left: 48%; top: 52%; color: var(--cyan); }

.memory-title { position: absolute; left: 5%; bottom: 18%; z-index: 4; transform: rotate(-4deg); }

.memory-pool {
    position: relative;
    width: min(72vw, 58rem);
    height: 34rem;
    border-radius: 50%;
    transform: rotate(-12deg) scaleX(1.15);
    background:
        radial-gradient(ellipse at 50% 45%, rgba(215,231,242,.14), rgba(18,25,35,.42) 37%, rgba(5,7,11,.88) 68%),
        linear-gradient(90deg, rgba(95,247,255,.08), rgba(255,123,184,.06));
    border: 1px solid rgba(215,231,242,.22);
    box-shadow: inset 0 0 90px #05070B, 0 0 70px rgba(166,107,255,.16);
    overflow: hidden;
}

.caustic { position: absolute; inset: 15%; border: 1px solid transparent; border-top-color: rgba(95,247,255,.52); border-radius: 50%; filter: blur(.3px); animation: ripple 6s ease-in-out infinite; }
.caustic-two { inset: 28% 20%; border-top-color: rgba(255,123,184,.42); border-bottom-color: rgba(166,107,255,.38); animation-delay: -2s; }

.ripple {
    position: absolute;
    font-family: Anybody, Syne, sans-serif;
    font-size: clamp(1.7rem, 5vw, 5rem);
    color: rgba(215,231,242,.58);
    letter-spacing: .18em;
    text-transform: lowercase;
    filter: blur(.02rem);
}
.ripple-a { left: 19%; top: 34%; transform: rotate(7deg) skewX(-18deg); color: rgba(95,247,255,.58); }
.ripple-b { right: 18%; top: 48%; transform: rotate(-9deg) skewX(14deg); color: rgba(255,123,184,.52); }
.ripple-c { left: 32%; bottom: 18%; font-size: clamp(1rem, 2.5vw, 2.4rem); color: rgba(255,211,106,.58); }

.calibration-cross { position: absolute; width: 5rem; height: 5rem; }
.calibration-cross::before,
.calibration-cross::after { content: ""; position: absolute; background: rgba(215,231,242,.5); }
.calibration-cross::before { left: 50%; top: 0; width: 1px; height: 100%; }
.calibration-cross::after { left: 0; top: 50%; width: 100%; height: 1px; }
.cross-a { left: 15%; bottom: 16%; }
.cross-b { right: 16%; top: 14%; transform: rotate(45deg); }

.aperture-system {
    position: relative;
    width: min(78vw, 58rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.horizon-glow {
    position: absolute;
    width: 74%;
    height: 35%;
    bottom: 19%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(215,231,242,.94), rgba(95,247,255,.34) 36%, rgba(166,107,255,.13) 62%, transparent 74%);
    filter: blur(16px);
    transform: scaleX(calc(.85 + var(--aperture, .25) * .4));
}

.miris-aperture {
    position: relative;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle, rgba(215,231,242,.2), rgba(18,25,35,.96) 44%, #05070B 68%);
    border: 1px solid rgba(215,231,242,.42);
    box-shadow: inset 0 0 70px #05070B, 0 0 80px rgba(95,247,255,.22), 0 0 140px rgba(166,107,255,.14);
}

.miris-aperture::before {
    content: "";
    position: absolute;
    inset: 21%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215,231,242,.97), rgba(95,247,255,.55) 25%, rgba(18,25,35,.2) 51%, transparent 55%);
    transform: scale(calc(.42 + var(--aperture, .25) * .76));
    transition: transform .3s ease;
}

.miris-aperture strong,
.ap-ref {
    position: absolute;
    font-family: Syne, sans-serif;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: lowercase;
    font-size: clamp(1.25rem, 3.5vw, 3.8rem);
}

.miris-aperture strong { color: var(--chrome); text-shadow: 0 0 28px rgba(95,247,255,.45); z-index: 5; }
.ap-ref { opacity: .34; mix-blend-mode: screen; }
.ap-one { color: var(--cyan); transform: translate(-9%, -98%) rotate(-10deg); }
.ap-two { color: var(--violet); transform: translate(24%, 88%) rotate(13deg) scaleY(-1); }
.ap-three { color: var(--rose); transform: translate(-34%, 20%) rotate(-24deg); }
.ap-four { color: var(--gold); transform: translate(27%, -31%) rotate(31deg); }

.iris {
    position: absolute;
    width: 33%;
    height: 13%;
    background: linear-gradient(90deg, rgba(18,25,35,.96), rgba(215,231,242,.17), rgba(18,25,35,.95));
    border: 1px solid rgba(215,231,242,.18);
    transform-origin: 50% 280%;
    opacity: calc(.9 - var(--aperture, .25) * .45);
}
.iris-one { top: 27%; transform: rotate(calc(0deg - var(--aperture, .25) * 18deg)); }
.iris-two { right: 22%; transform: rotate(calc(90deg - var(--aperture, .25) * 18deg)); }
.iris-three { bottom: 27%; transform: rotate(calc(180deg - var(--aperture, .25) * 18deg)); }
.iris-four { left: 22%; transform: rotate(calc(270deg - var(--aperture, .25) * 18deg)); }

.final-mark { right: 8%; bottom: 10%; color: rgba(255,211,106,.68); }

[data-tilt] { transition: transform .25s ease-out; will-change: transform; }

@keyframes scan {
    0%, 100% { left: 7%; opacity: .18; transform: rotate(12deg); }
    42% { opacity: 1; }
    55% { left: 88%; opacity: .86; transform: rotate(12deg); }
    76% { left: 60%; opacity: .24; }
}

@keyframes weave { to { stroke-dashoffset: -216; } }

@keyframes ripple {
    0%, 100% { transform: rotate(4deg) scale(.92); opacity: .42; }
    50% { transform: rotate(-2deg) scale(1.08); opacity: .86; }
}

@media (max-width: 760px) {
    .instrument-nav { left: .8rem; right: .8rem; top: .8rem; flex-wrap: wrap; gap: .35rem; transform: none; }
    .instrument-nav a { padding: .42rem .5rem; }
    .scene { min-height: 118vh; padding-inline: 1rem; }
    .diamond-viewport { width: 86vw; }
    .obsidian-slab { inset: 8%; }
    .caption-rail { max-width: calc(100vw - 2rem); left: 1rem; right: auto; bottom: 7%; top: auto; transform: rotate(-2deg); }
    .scene-label { top: 7rem; left: 1rem; right: auto; }
    .prism-stage, .loom-object, .memory-pool { width: 94vw; height: 27rem; }
    .split-title, .loom-title, .memory-title { left: 1rem; right: auto; top: 16%; bottom: auto; }
    .aperture-system { width: 98vw; }
}