:root {
    /* compliance tokens: Grotesk** labels Grotesk’s curatorial clarity Mono’s restrained detail */
    --void: #090616;
    --cyan: #52F5FF;
    --magenta: #FF4FD8;
    --mint: #B8FF5C;
    --pearl: #F4F0FF;
    --ink: #121B3A;
    --apricot: #FFB86B;
    --bricolage: "Bricolage Grotesque", sans-serif;
    --space: "Space Grotesk", sans-serif;
    --mono: "Azeret Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: var(--void);
    color: var(--pearl);
    font-family: var(--space);
    cursor: crosshair;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(244,240,255,.18) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 60%, rgba(82,245,255,.16) 0 1px, transparent 1.5px);
    background-size: 31px 37px, 43px 29px;
    mix-blend-mode: screen;
}

.cursor-loupe {
    position: fixed;
    z-index: 25;
    width: 132px;
    height: 132px;
    margin: -66px 0 0 -66px;
    pointer-events: none;
    border: 1px solid rgba(82,245,255,.55);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, rgba(244,240,255,.12), rgba(82,245,255,.06) 42%, transparent 68%);
    box-shadow: 0 0 35px rgba(82,245,255,.26), inset 0 0 30px rgba(255,79,216,.12);
    transform: scale(.7);
    transition: opacity .35s ease, transform .35s ease;
}

body.inspecting .cursor-loupe { opacity: 1; transform: scale(1); }

.corridor {
    display: flex;
    width: 500vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.corridor::-webkit-scrollbar { display: none; }

.chamber {
    position: relative;
    flex: 0 0 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 30%, rgba(255,79,216,.13), transparent 26%),
        radial-gradient(circle at 18% 78%, rgba(82,245,255,.12), transparent 32%),
        linear-gradient(145deg, var(--void), #06040f 52%, var(--ink));
}

.chamber::before {
    content: attr(data-phase);
    position: absolute;
    top: 7vh;
    left: 6vw;
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--mint);
    letter-spacing: .24em;
    border: 1px solid rgba(184,255,92,.35);
    padding: .5rem .7rem;
    transform: rotate(-4deg);
}

.chamber-title {
    position: absolute;
    z-index: 4;
    font-family: var(--bricolage);
    font-weight: 800;
    line-height: .86;
    letter-spacing: -.065em;
    font-size: clamp(4.2rem, 11vw, 12rem);
    color: var(--pearl);
    text-shadow: 0 0 24px rgba(82,245,255,.16);
}

.caption {
    position: absolute;
    z-index: 5;
    max-width: 390px;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.45;
    color: rgba(244,240,255,.76);
}

.wordmark {
    position: absolute;
    left: 8vw;
    top: 10vh;
    font-family: var(--bricolage);
    font-size: clamp(5rem, 16vw, 18rem);
    font-weight: 800;
    letter-spacing: -.09em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(244,240,255,.33);
    text-shadow: 0 0 42px rgba(255,79,216,.19);
}

.projection {
    position: absolute;
    width: 44vw;
    height: 70vh;
    background: linear-gradient(115deg, rgba(18,27,58,.75), rgba(244,240,255,.05));
    border: 1px solid rgba(244,240,255,.13);
    box-shadow: inset 0 0 80px rgba(82,245,255,.07);
    transform: skewY(-8deg) rotate(-4deg);
}
.projection-left { left: -8vw; top: 18vh; }

.glass-drawer {
    position: absolute;
    right: 7vw;
    bottom: 13vh;
    width: min(680px, 54vw);
    height: 260px;
    border: 1px solid rgba(244,240,255,.24);
    background: linear-gradient(120deg, rgba(244,240,255,.13), rgba(82,245,255,.06) 38%, rgba(18,27,58,.24));
    box-shadow: 0 38px 70px rgba(0,0,0,.5), inset 0 0 46px rgba(82,245,255,.08);
    transform: perspective(800px) rotateX(57deg) rotateZ(-5deg);
}

.drawer-handle {
    position: absolute;
    left: 42%;
    top: 72%;
    width: 120px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--pearl), transparent);
    opacity: .8;
}

.drawer-shadow {
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(82,245,255,.2);
}

.title-drawer { left: 9vw; bottom: 15vh; max-width: 760px; }
.caption-drawer { right: 12vw; top: 18vh; }

.instrument {
    position: absolute;
    z-index: 12;
    border: 1px solid rgba(82,245,255,.56);
    color: var(--pearl);
    background: rgba(18,27,58,.62);
    padding: .9rem 1.15rem;
    border-radius: 999px;
    font-family: var(--space);
    text-transform: lowercase;
    letter-spacing: .05em;
    box-shadow: 0 0 24px rgba(82,245,255,.16), inset 0 0 22px rgba(255,79,216,.09);
}

.inspect-button { right: 18vw; top: 43vh; }
.seal-button { left: 13vw; bottom: 23vh; }
.instrument:hover { background: rgba(82,245,255,.14); transform: translateY(-2px); }

.specimen-stage { position: absolute; z-index: 8; }
.stage-drawer { right: 25vw; bottom: 27vh; }
.stage-scan { left: 57vw; top: 39vh; }
.stage-kiln { right: 16vw; top: 36vh; }
.stage-seal { left: 52vw; top: 37vh; }
.stage-vault { left: 50%; top: 36%; transform: translate(-50%, -50%); }

.thing {
    position: relative;
    width: 150px;
    height: 118px;
    border-radius: 48% 39% 55% 44% / 42% 54% 37% 58%;
    background:
        radial-gradient(circle at 32% 25%, rgba(244,240,255,.95), transparent 20%),
        radial-gradient(circle at 68% 65%, rgba(255,79,216,.35), transparent 22%),
        linear-gradient(135deg, #F4F0FF, #8d8aa6 36%, #121B3A 76%);
    box-shadow: 0 26px 48px rgba(0,0,0,.45), inset -14px -16px 28px rgba(9,6,22,.42), inset 9px 8px 20px rgba(244,240,255,.52);
    animation: objectFloat 4.8s ease-in-out infinite;
}

.thing::before, .thing::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.thing::before {
    inset: -34px;
    border: 1px solid rgba(82,245,255,.35);
    filter: drop-shadow(0 0 16px rgba(82,245,255,.35));
    animation: auraPulse 3.2s ease-in-out infinite;
}

.thing::after {
    inset: -58px;
    border: 1px dashed rgba(255,79,216,.25);
    animation: slowSpin 14s linear infinite;
}

.dent { position: absolute; display: block; border-radius: 50%; background: rgba(9,6,22,.42); box-shadow: inset 0 0 12px rgba(82,245,255,.1); }
.dent-one { width: 28px; height: 18px; left: 34px; top: 36px; transform: rotate(-24deg); }
.dent-two { width: 20px; height: 27px; right: 31px; bottom: 23px; transform: rotate(16deg); }
.seam { position: absolute; left: 54%; top: 12%; width: 2px; height: 80%; background: linear-gradient(var(--cyan), transparent, var(--magenta)); opacity: .55; transform: rotate(21deg); }
.tag-loop { position: absolute; width: 28px; height: 28px; border: 3px solid rgba(244,240,255,.76); border-radius: 50%; right: -10px; top: 13px; }

.tag {
    position: absolute;
    right: -72px;
    top: -75px;
    padding: .7rem .85rem;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--void);
    background: var(--pearl);
    box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.tag span { font-size: .55rem; }
.tag-tilt { transform: rotate(9deg); }

.chamber-scan { background: radial-gradient(circle at 64% 45%, rgba(82,245,255,.18), transparent 30%), linear-gradient(145deg, var(--void), var(--ink)); }
.title-scan { left: 7vw; top: 12vh; width: 650px; color: transparent; -webkit-text-stroke: 1px var(--cyan); }
.caption-scan { left: 10vw; bottom: 18vh; }
.scan-basin { position: absolute; right: 12vw; top: 13vh; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(82,245,255,.15), transparent 64%); }
.basin-rim { position: absolute; inset: 42px; border: 1px solid rgba(82,245,255,.42); border-radius: 50%; box-shadow: inset 0 0 45px rgba(82,245,255,.15), 0 0 40px rgba(82,245,255,.1); }
.scan-beam { position: absolute; left: 6%; top: 45%; width: 88%; height: 46px; background: linear-gradient(90deg, transparent, rgba(82,245,255,.68), transparent); filter: blur(4px); animation: scanSweep 2.9s ease-in-out infinite; }
.xray-lines { position: absolute; inset: 100px; overflow: visible; }
.xray-lines path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 750; stroke-dashoffset: 750; filter: drop-shadow(0 0 8px var(--cyan)); animation: drawPath 4s ease-in-out infinite alternate; }
.thing-xray { background: rgba(82,245,255,.08); border: 1px solid rgba(82,245,255,.8); box-shadow: 0 0 55px rgba(82,245,255,.36), inset 0 0 28px rgba(82,245,255,.24); }
.coordinate-strip { position: absolute; right: 4vw; bottom: 12vh; display: flex; gap: 14px; font-family: var(--mono); font-size: .66rem; color: var(--mint); transform: rotate(3deg); }
.coordinate-strip span { border: 1px solid rgba(184,255,92,.28); padding: .55rem .65rem; background: rgba(9,6,22,.5); }

.chamber-kiln { background: radial-gradient(circle at 32% 62%, rgba(255,184,107,.26), transparent 34%), linear-gradient(145deg, var(--void), #1d0d1c 58%, var(--ink)); }
.kiln-mouth { position: absolute; left: 5vw; bottom: -16vh; width: 52vw; height: 58vh; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at center, rgba(255,184,107,.55), rgba(255,79,216,.13) 42%, transparent 66%); filter: blur(2px); }
.title-kiln { right: 7vw; top: 10vh; text-align: right; color: var(--apricot); text-shadow: 0 0 28px rgba(255,184,107,.28); }
.caption-kiln { left: 12vw; top: 18vh; }
.molten-name { position: absolute; left: 11vw; bottom: 18vh; font-family: var(--bricolage); font-size: clamp(3rem, 8vw, 8rem); font-weight: 800; letter-spacing: -.06em; color: var(--apricot); text-shadow: 0 0 22px rgba(255,184,107,.58), 0 12px 0 rgba(255,79,216,.12); animation: moltenRise 3.6s ease-in-out infinite; }
.molten-name::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 1px rgba(244,240,255,.28); transform: translate(7px, -7px); }
.metadata-cloud span { position: absolute; font-family: var(--mono); font-size: .65rem; color: var(--mint); background: rgba(18,27,58,.65); border: 1px solid rgba(184,255,92,.24); padding: .45rem .55rem; border-radius: 999px; animation: orbitSettle 5s ease-in-out infinite; }
.metadata-cloud span:nth-child(1) { left: 55vw; top: 29vh; }
.metadata-cloud span:nth-child(2) { left: 72vw; top: 35vh; animation-delay: -.7s; }
.metadata-cloud span:nth-child(3) { left: 62vw; top: 58vh; animation-delay: -1.2s; }
.metadata-cloud span:nth-child(4) { left: 78vw; top: 65vh; animation-delay: -1.8s; }
.metadata-cloud span:nth-child(5) { left: 49vw; top: 70vh; animation-delay: -2.4s; }
.thing-molten { background: radial-gradient(circle at 42% 48%, var(--apricot), transparent 25%), linear-gradient(135deg, var(--pearl), var(--magenta), var(--ink)); box-shadow: 0 0 60px rgba(255,184,107,.38), inset 0 0 30px rgba(255,184,107,.32); }

.chamber-seal { background: radial-gradient(circle at 55% 44%, rgba(255,79,216,.17), transparent 31%), linear-gradient(145deg, #05030d, var(--void), var(--ink)); }
.title-seal { left: 8vw; top: 11vh; color: var(--pearl); }
.caption-seal { right: 10vw; bottom: 17vh; }
.seal-press { position: absolute; left: 44vw; top: 13vh; width: 420px; height: 520px; }
.press-plate { position: absolute; left: 50%; top: 0; width: 220px; height: 90px; transform: translateX(-50%); border-radius: 0 0 90px 90px; background: linear-gradient(180deg, rgba(244,240,255,.8), rgba(82,245,255,.13)); box-shadow: 0 0 45px rgba(244,240,255,.2); transition: transform .55s ease; }
.token-bubble { position: absolute; left: 50%; top: 190px; width: 270px; height: 270px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(244,240,255,.58); background: radial-gradient(circle at 35% 25%, rgba(244,240,255,.42), rgba(82,245,255,.12) 35%, rgba(255,79,216,.14) 62%, transparent); box-shadow: inset 0 0 45px rgba(244,240,255,.16), 0 0 56px rgba(82,245,255,.18); transition: transform .55s ease, box-shadow .55s ease; }
.wax-ripple { position: absolute; left: 50%; top: 244px; width: 110px; height: 110px; transform: translateX(-50%); border-radius: 50%; border: 2px solid var(--magenta); opacity: .4; animation: ripple 2s ease-out infinite; }
.seal-press.pressed .press-plate { transform: translate(-50%, 108px); }
.seal-press.pressed .token-bubble { transform: translateX(-50%) scale(1.13); box-shadow: 0 0 80px rgba(255,79,216,.28), inset 0 0 70px rgba(82,245,255,.22); }
.thing-sealed { filter: saturate(1.2); }
.thing-sealed::before { border-style: solid; background: radial-gradient(circle, rgba(244,240,255,.13), transparent 68%); }
.hash-label { position: absolute; left: 9vw; bottom: 12vh; font-family: var(--mono); color: var(--mint); font-size: .85rem; letter-spacing: .08em; }

.chamber-vault { background: radial-gradient(circle at 50% 43%, rgba(244,240,255,.1), transparent 25%), linear-gradient(145deg, var(--void), #070a1d 65%, var(--ink)); }
.title-vault { left: 7vw; top: 9vh; max-width: 780px; font-size: clamp(4rem, 10vw, 10.5rem); }
.caption-vault { right: 8vw; top: 17vh; }
.duplicate-field span { position: absolute; width: 112px; height: 88px; border-radius: 48% 39% 55% 44%; background: rgba(244,240,255,.06); border: 1px solid rgba(244,240,255,.08); filter: blur(1px); }
.duplicate-field span:nth-child(1) { left: 14vw; bottom: 24vh; transform: rotate(-12deg); }
.duplicate-field span:nth-child(2) { left: 31vw; top: 43vh; transform: rotate(18deg); }
.duplicate-field span:nth-child(3) { right: 18vw; bottom: 31vh; transform: rotate(8deg); }
.duplicate-field span:nth-child(4) { right: 8vw; top: 49vh; transform: rotate(-16deg); }
.duplicate-field span:nth-child(5) { left: 46vw; bottom: 13vh; transform: rotate(28deg); }
.duplicate-field span:nth-child(6) { left: 70vw; top: 30vh; transform: rotate(-5deg); }
.vault-dome { position: absolute; left: 50%; bottom: 10vh; width: 430px; height: 520px; transform: translateX(-50%); border-radius: 220px 220px 30px 30px; border: 1px solid rgba(244,240,255,.24); background: linear-gradient(110deg, rgba(244,240,255,.18), rgba(82,245,255,.05), rgba(255,79,216,.08)); box-shadow: inset 0 0 75px rgba(244,240,255,.08); }
.archive-plinth { position: absolute; left: 50%; bottom: 16vh; width: 330px; height: 140px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(18,27,58,.75), rgba(9,6,22,.92)); border: 1px solid rgba(244,240,255,.18); }
.plinth-top { position: absolute; left: 20px; right: 20px; top: -22px; height: 42px; border-radius: 50%; background: linear-gradient(90deg, rgba(82,245,255,.22), rgba(244,240,255,.26), rgba(255,79,216,.18)); }
.thing-vault { transform: scale(1.18); animation: vaultFloat 5.5s ease-in-out infinite; }
.vault-certificate { position: absolute; right: 11vw; bottom: 13vh; width: 260px; padding: 1rem; border: 1px solid rgba(244,240,255,.22); background: rgba(244,240,255,.08); transform: rotate(4deg); }
.vault-certificate b { display: block; font-family: var(--bricolage); font-size: 1.7rem; color: var(--mint); }
.vault-certificate span { font-size: .82rem; color: rgba(244,240,255,.68); }

.accession-strip {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(244,240,255,.16);
    border-radius: 999px;
    background: rgba(9,6,22,.72);
    box-shadow: 0 0 35px rgba(0,0,0,.35), inset 0 0 22px rgba(82,245,255,.06);
    backdrop-filter: blur(18px);
}

.accession-strip a {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem .8rem;
    border-radius: 999px;
    color: rgba(244,240,255,.58);
    text-decoration: none;
    font-size: .78rem;
    white-space: nowrap;
}
.accession-strip span { font-family: var(--mono); color: var(--magenta); }
.accession-strip a.active { color: var(--void); background: var(--cyan); box-shadow: 0 0 22px rgba(82,245,255,.42); }
.accession-strip a.active span { color: var(--void); }

@keyframes objectFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes vaultFloat { 0%,100% { transform: scale(1.18) translateY(0) rotate(-2deg); } 50% { transform: scale(1.18) translateY(-24px) rotate(3deg); } }
@keyframes auraPulse { 0%,100% { transform: scale(.92); opacity: .45; } 50% { transform: scale(1.08); opacity: .95; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes scanSweep { 0%,100% { transform: translateY(-135px) rotate(-8deg); opacity: .25; } 50% { transform: translateY(150px) rotate(8deg); opacity: .9; } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes moltenRise { 0%,100% { transform: translateY(0) skewX(-3deg); filter: blur(0); } 50% { transform: translateY(-13px) skewX(2deg); filter: blur(.3px); } }
@keyframes orbitSettle { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(12px,-18px) rotate(5deg); } }
@keyframes ripple { from { transform: translateX(-50%) scale(.45); opacity: .7; } to { transform: translateX(-50%) scale(2.6); opacity: 0; } }

@media (max-width: 760px) {
    body { overflow: auto; }
    .corridor { display: block; width: 100%; height: auto; overflow: visible; scroll-snap-type: y mandatory; }
    .chamber { min-height: 100vh; }
    .accession-strip { width: calc(100vw - 18px); overflow-x: auto; justify-content: flex-start; }
    .caption { left: 8vw; right: 8vw; max-width: none; }
    .title-drawer, .title-scan, .title-kiln, .title-seal, .title-vault { left: 7vw; right: auto; top: 10vh; text-align: left; }
    .wordmark { font-size: 5rem; top: 6vh; }
    .glass-drawer, .scan-basin, .seal-press, .vault-dome { transform: scale(.68); right: auto; left: 16vw; top: 30vh; }
    .stage-drawer, .stage-scan, .stage-kiln, .stage-seal { left: 35vw; right: auto; top: 52vh; bottom: auto; }
    .molten-name { left: 8vw; bottom: 22vh; }
}