:root {
    --deep-blue: #06243F;
    --cryo-cyan: #A7F4FF;
    --telomere-mint: #7DFFD1;
    --gel-white: #F4FBF7;
    --chromosome-violet: #8E7CFF;
    --oxidation-coral: #FF7E8A;
    --membrane-teal: #0E6F78;
    --navy-shadow: #03111E;
    --display: "Lexend", sans-serif;
    --body: "Alegreya Sans", sans-serif;
    --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--gel-white);
    background: var(--navy-shadow);
    font-family: var(--body);
    overflow-x: hidden;
}

.archive-cell {
    position: relative;
    min-height: 500vh;
    background:
        radial-gradient(circle at 18% 8%, rgba(167, 244, 255, .22), transparent 28rem),
        radial-gradient(circle at 86% 34%, rgba(142, 124, 255, .18), transparent 32rem),
        radial-gradient(circle at 28% 72%, rgba(125, 255, 209, .16), transparent 28rem),
        linear-gradient(145deg, var(--navy-shadow) 0%, var(--deep-blue) 40%, var(--membrane-teal) 74%, var(--navy-shadow) 100%);
}

.submerged-field, .chromosome-map, .particle-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.submerged-field { z-index: 0; overflow: hidden; }
.chromosome-map { z-index: 1; width: 100%; height: 100%; opacity: .9; }
.particle-field { z-index: 2; overflow: hidden; }

.strand-core, .strand-halo {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.strand-core {
    stroke: url(#strandGradient);
    stroke-width: 28;
    filter: url(#softGlow);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.strand-halo {
    stroke: rgba(167, 244, 255, .1);
    stroke-width: 92;
    filter: blur(22px);
}

main { position: relative; z-index: 3; }
.chamber {
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: minmax(1rem, 1fr) minmax(18rem, 36rem) minmax(18rem, 42rem) minmax(1rem, 1fr);
    align-items: center;
    padding: 7vh 0;
    isolation: isolate;
}

.wordmark-glass {
    grid-column: 2 / 4;
    justify-self: center;
    text-align: center;
    position: relative;
    padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 6vw, 7rem);
    border: 1px solid rgba(244, 251, 247, .18);
    border-radius: 999px 999px 42% 42%;
    background: linear-gradient(150deg, rgba(244, 251, 247, .13), rgba(167, 244, 255, .08) 42%, rgba(3, 17, 30, .18));
    box-shadow: inset 0 2px 22px rgba(244, 251, 247, .18), inset 0 -20px 50px rgba(14, 111, 120, .28), 0 45px 120px rgba(3, 17, 30, .7);
    backdrop-filter: blur(18px);
    transform: translateY(-4vh);
}
.wordmark-glass::before {
    content: "";
    position: absolute;
    inset: 14% 12% auto;
    height: 22%;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(244, 251, 247, .65), transparent);
    filter: blur(9px);
}
.wordmark-glass h1 {
    margin: .4rem 0 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(2.4rem, 8vw, 8.2rem);
    line-height: .95;
    letter-spacing: -.055em;
    text-shadow: 0 0 18px rgba(167, 244, 255, .45), 0 16px 70px rgba(125, 255, 209, .2);
}
.reflection {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.6rem;
    font-family: var(--display);
    font-size: clamp(2rem, 7vw, 7rem);
    font-weight: 600;
    transform: scaleY(-.28);
    opacity: .16;
    filter: blur(2px);
    color: var(--cryo-cyan);
    mask-image: linear-gradient(transparent, black 25%, transparent 78%);
}

.specimen-label {
    max-width: 35rem;
    padding: clamp(1.2rem, 2.2vw, 2rem);
    border: 1px solid rgba(167, 244, 255, .22);
    border-radius: 2rem;
    background: linear-gradient(145deg, rgba(244, 251, 247, .13), rgba(6, 36, 63, .42));
    box-shadow: inset 0 1px 0 rgba(244, 251, 247, .22), 0 24px 90px rgba(3, 17, 30, .42);
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(24px) rotate(var(--label-rotate, -2deg));
    transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, 1.2, .26, 1);
}
.chamber.is-visible .specimen-label { opacity: 1; transform: translateY(0) rotate(var(--label-rotate, -2deg)); }
.label-primer { grid-column: 2; --label-rotate: -3deg; align-self: end; }
.label-repeat { grid-column: 3; --label-rotate: 2deg; }
.label-oxidation { grid-column: 2; --label-rotate: 3deg; }
.label-repair { grid-column: 3; --label-rotate: -2deg; }
.label-memory { grid-column: 2; --label-rotate: 1.5deg; }

.kicker, .micro-label, .vial b, .gel-tray small, .tag-cloud span, .frost-slide span {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.kicker { color: var(--telomere-mint); font-size: .76rem; margin: 0 0 .8rem; }
.micro-label { color: rgba(167, 244, 255, .78); font-size: .72rem; margin: 0; }
h2 {
    margin: 0 0 1rem;
    font-family: var(--display);
    font-size: clamp(2.2rem, 4.8vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}
p { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.55; margin: 0; color: rgba(244, 251, 247, .82); }

.vial-rack {
    position: fixed;
    z-index: 8;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: .85rem;
}
.vial {
    width: 2.1rem;
    height: 4.2rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(167, 244, 255, .36);
    background: rgba(244, 251, 247, .08);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    box-shadow: inset 0 0 14px rgba(244, 251, 247, .13), 0 0 26px rgba(3, 17, 30, .5);
}
.vial span { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(var(--cryo-cyan), var(--telomere-mint)); transition: height 600ms ease; }
.vial.is-active span { height: 100%; }
.vial b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--navy-shadow); font-size: .58rem; opacity: .7; }

.gel-tray, .frost-slide, .microscope-lens, .repair-bloom, .memory-vault {
    border: 1px solid rgba(244, 251, 247, .2);
    background: linear-gradient(135deg, rgba(244, 251, 247, .16), rgba(167, 244, 255, .07) 45%, rgba(3, 17, 30, .35));
    backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 28px rgba(244, 251, 247, .13), 0 30px 110px rgba(3, 17, 30, .52);
    transform-style: preserve-3d;
    transition: transform 220ms ease;
}
.cap-tray { grid-column: 3; justify-self: center; border-radius: 999px; padding: 1.1rem 1.35rem; display: flex; align-items: center; gap: .55rem; transform: rotate(9deg); }
.cap-bead, .damaged-beads b, .repeat-chain i, .reconnect-row em {
    display: inline-block;
    width: 2.1rem;
    height: 1.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cryo-cyan), var(--telomere-mint));
    box-shadow: 0 0 18px rgba(125, 255, 209, .55), inset 0 2px 6px rgba(244, 251, 247, .65);
}
.bead-violet { background: linear-gradient(135deg, var(--chromosome-violet), var(--cryo-cyan)); }
.bead-bright { box-shadow: 0 0 34px rgba(244, 251, 247, .85); }
.cap-tray small { margin-left: .8rem; color: rgba(244, 251, 247, .66); font-size: .72rem; }

.microscope-lens { grid-column: 2; width: min(38vw, 32rem); aspect-ratio: 1; border-radius: 50%; justify-self: center; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, rgba(244, 251, 247, .46), rgba(167, 244, 255, .15) 23%, rgba(14, 111, 120, .25) 56%, rgba(3, 17, 30, .5)); }
.reticle, .reticle::before, .reticle::after { position: absolute; border: 1px solid rgba(244, 251, 247, .24); border-radius: 50%; inset: 14%; }
.reticle::before { content: ""; inset: 23%; }
.reticle::after { content: ""; inset: 50% 8%; height: 1px; border-radius: 0; border-width: 1px 0 0; }
.repeat-chain { display: flex; gap: .45rem; transform: rotate(-18deg); }
.repeat-chain i:nth-child(even) { transform: translateY(1.2rem); background: linear-gradient(135deg, var(--chromosome-violet), var(--telomere-mint)); }
.typed-repeat { font-family: var(--mono); color: var(--cryo-cyan); }
.tag-cloud { position: absolute; left: 48%; top: 20%; display: grid; gap: .7rem; transform: rotate(-11deg); }
.tag-cloud span { color: var(--cryo-cyan); font-size: .72rem; opacity: .7; text-shadow: 0 0 16px var(--cryo-cyan); }
.tag-cloud span:nth-child(2n) { margin-left: 3rem; color: var(--telomere-mint); }

.coral-wisp { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 126, 138, .42), transparent 62%); filter: blur(16px); animation: driftWisp 9s ease-in-out infinite; }
.wisp-one { width: 22rem; height: 14rem; left: 54%; top: 24%; }
.wisp-two { width: 17rem; height: 17rem; left: 18%; bottom: 18%; animation-delay: -3s; }
.slide-oxidation { grid-column: 3; border-radius: 2.4rem; padding: 2rem; transform: rotate(-4deg); }
.damaged-beads { display: flex; gap: .55rem; margin: 1.5rem 0; }
.damaged-beads b:nth-child(3), .damaged-beads b:nth-child(5) { background: linear-gradient(135deg, var(--oxidation-coral), rgba(255, 126, 138, .12)); opacity: .54; filter: blur(.3px); }
.frost-slide span { color: rgba(244, 251, 247, .65); font-size: .72rem; }

.repair-bloom { grid-column: 2; justify-self: center; width: min(34vw, 30rem); aspect-ratio: 1; border-radius: 44% 56% 49% 51%; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 34% 28%, rgba(244,251,247,.42), rgba(125,255,209,.2) 30%, rgba(14,111,120,.32) 70%); animation: bloomPulse 5s ease-in-out infinite; }
.repair-bloom span { position: absolute; width: 58%; height: 20%; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(125,255,209,.7), transparent); transform: rotate(var(--r)); }
.repair-bloom span:nth-child(1) { --r: 18deg; }.repair-bloom span:nth-child(2) { --r: 78deg; }.repair-bloom span:nth-child(3) { --r: -42deg; }
.enzyme-lens { width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 22%, var(--gel-white), var(--cryo-cyan) 22%, var(--telomere-mint) 62%, transparent 70%); box-shadow: 0 0 55px rgba(125,255,209,.8); }
.reconnect-row { position: absolute; right: 13%; bottom: 16%; display: flex; gap: .45rem; transform: rotate(8deg); }
.reconnect-row em { animation: springBead 2.8s cubic-bezier(.2, 1.55, .32, 1) infinite; }
.reconnect-row em:nth-child(2) { animation-delay: .1s; }.reconnect-row em:nth-child(3) { animation-delay: .2s; }.reconnect-row em:nth-child(4) { animation-delay: .3s; }.reconnect-row em:nth-child(5) { animation-delay: .4s; }.reconnect-row em:nth-child(6) { animation-delay: .5s; }.reconnect-row em:nth-child(7) { animation-delay: .6s; }

.memory-vault { grid-column: 3; justify-self: center; width: min(42vw, 39rem); aspect-ratio: 1.15; border-radius: 5rem; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(244, 251, 247, .3), rgba(167, 244, 255, .13) 33%, rgba(6, 36, 63, .5) 72%); }
.vault-door { position: absolute; inset: 10%; border-radius: 50%; border: 1px solid rgba(244,251,247,.22); box-shadow: inset 0 0 50px rgba(167,244,255,.16), 0 0 90px rgba(125,255,209,.2); }
.vault-filament { width: 66%; height: 26%; border-radius: 50%; border-top: 1rem solid var(--telomere-mint); border-bottom: 1rem solid var(--chromosome-violet); filter: drop-shadow(0 0 25px rgba(125,255,209,.7)); animation: filamentBreathe 4s ease-in-out infinite; }
.memory-vault .micro-label { position: absolute; bottom: 2rem; }

.aero-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(244,251,247,.8), rgba(167,244,255,.28) 28%, rgba(14,111,120,.16) 65%, transparent 72%); filter: blur(.2px); animation: floatOrb 13s ease-in-out infinite; }
.orb-a { width: 10rem; height: 10rem; left: 8%; top: 12%; }.orb-b { width: 6rem; height: 6rem; right: 12%; top: 18%; animation-delay: -5s; }.orb-c { width: 14rem; height: 14rem; left: 68%; bottom: 12%; animation-delay: -9s; }.orb-d { width: 5rem; height: 5rem; left: 23%; bottom: 23%; animation-delay: -2s; }
.membrane { position: absolute; width: 44rem; height: 20rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(167,244,255,.14), transparent 70%); filter: blur(18px); }
.membrane-one { left: -10rem; top: 34%; transform: rotate(-18deg); }.membrane-two { right: -16rem; top: 60%; transform: rotate(23deg); }
.scan-beam { position: absolute; left: -15%; top: -30%; width: 24%; height: 160%; background: linear-gradient(90deg, transparent, rgba(167,244,255,.22), rgba(244,251,247,.45), rgba(125,255,209,.18), transparent); transform: rotate(16deg) translateX(var(--beam-x, 0)); filter: blur(8px); }
.particle { position: absolute; width: .5rem; height: .5rem; border-radius: .22rem; background: var(--cryo-cyan); opacity: .44; box-shadow: 0 0 16px currentColor; transform: translate3d(0,0,0); }

@keyframes floatOrb { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(1.8rem,-2.4rem,0) scale(1.06); } }
@keyframes driftWisp { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); opacity: .62; } 50% { transform: translate3d(-2rem,1.5rem,0) rotate(12deg); opacity: .32; } }
@keyframes bloomPulse { 0%, 100% { border-radius: 44% 56% 49% 51%; transform: scale(1); } 50% { border-radius: 54% 46% 58% 42%; transform: scale(1.04); } }
@keyframes springBead { 0%, 100% { transform: translateY(0) scale(1); } 38% { transform: translateY(-1.2rem) scale(1.12); } 62% { transform: translateY(.35rem) scale(.96); } }
@keyframes filamentBreathe { 0%, 100% { transform: scaleX(.94) rotate(-6deg); opacity: .82; } 50% { transform: scaleX(1.06) rotate(3deg); opacity: 1; } }

@media (max-width: 820px) {
    .chamber { grid-template-columns: 1rem 1fr 1rem; padding: 5vh 0; }
    .wordmark-glass, .label-primer, .label-repeat, .label-oxidation, .label-repair, .label-memory, .cap-tray, .microscope-lens, .slide-oxidation, .repair-bloom, .memory-vault { grid-column: 2; }
    .wordmark-glass { padding: 2.5rem 1rem; }
    .microscope-lens, .repair-bloom, .memory-vault { width: min(82vw, 28rem); }
    .vial-rack { right: .35rem; transform: translateY(-50%) scale(.78); transform-origin: right center; }
    .tag-cloud, .reconnect-row { display: none; }
}