:root {
    --frost: #EAF7F5;
    --seal: #061E2B;
    --cyan: #68F4E5;
    --mint: #B9F6D0;
    --violet: #8D7CFF;
    --graphite: #293A42;
    --apricot: #FFB36B;
    --display: Orbitron, "Eurostile", "Bank Gothic", "Trebuchet MS", sans-serif;
    --copy: Manrope, Inter, "Avenir Next", system-ui, sans-serif;
    --poem: "Cormorant Garamond", Georgia, serif;
    --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --scroll-fog: 0;
}

/* IBM Plex Mono appears sparingly as tiny engraved serial numbers only. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--frost);
    font-family: var(--copy);
    background:
        radial-gradient(circle at 78% 18%, rgba(141,124,255,.24), transparent 26%),
        radial-gradient(circle at 15% 76%, rgba(104,244,229,.18), transparent 30%),
        linear-gradient(180deg, #061E2B 0%, #092635 44%, #061E2B 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background:
        radial-gradient(circle at 20% 20%, rgba(234,247,245,.42) 0 1px, transparent 2px),
        radial-gradient(circle at 68% 32%, rgba(185,246,208,.23) 0 1.5px, transparent 3px),
        linear-gradient(106deg, transparent 0 18%, rgba(234,247,245,.12) 20%, transparent 26% 62%, rgba(104,244,229,.09) 66%, transparent 71%);
    background-size: 72px 86px, 43px 55px, 100% 100%;
    mix-blend-mode: screen;
    opacity: calc(.62 - (var(--scroll-fog) * .000035));
}

.ambient-ice, .static-snow, .breath-bloom {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.ambient-ice {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(234,247,245,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(234,247,245,.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(6,30,43,.55) 78%);
    background-size: 118px 118px, 118px 118px, 100% 100%;
}
.static-snow {
    z-index: 2;
    opacity: .38;
    background-image:
        radial-gradient(circle, rgba(234,247,245,.58) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(141,124,255,.38) 0 1px, transparent 2px);
    background-size: 39px 61px, 73px 91px;
    animation: staticDrift 16s steps(8) infinite;
}
.breath-bloom {
    z-index: 5;
    opacity: 0;
    background: radial-gradient(ellipse at var(--breath-x, 50%) var(--breath-y, 44%), rgba(255,179,107,.34), rgba(234,247,245,.32) 16%, rgba(104,244,229,.12) 32%, transparent 58%);
    transform: scale(.66);
    transition: opacity 1.1s ease, transform 1.8s cubic-bezier(.16,.8,.2,1);
}
.breath-bloom.active { opacity: 1; transform: scale(1.16); }

.condensation-meter {
    position: fixed;
    z-index: 30;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 14px;
}
.condensation-meter button {
    position: relative;
    width: 43px;
    height: 56px;
    border: 1px solid rgba(234,247,245,.34);
    border-radius: 24px 24px 31px 31px;
    color: rgba(234,247,245,.58);
    font: 700 14px var(--display);
    background: linear-gradient(155deg, rgba(234,247,245,.22), rgba(104,244,229,.12) 45%, rgba(6,30,43,.46));
    box-shadow: inset 0 8px 18px rgba(234,247,245,.17), inset 0 -14px 24px rgba(6,30,43,.74), 0 0 18px rgba(104,244,229,.12);
    cursor: pointer;
    transition: border-radius .7s ease, color .7s ease, transform .7s ease, box-shadow .7s ease;
}
.condensation-meter button i {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 8px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
    opacity: .4;
}
.condensation-meter button.active {
    color: var(--seal);
    transform: translateX(-7px) scale(1.08);
    border-radius: 50% 50% 56% 44%;
    background: radial-gradient(circle at 32% 18%, #EAF7F5, #68F4E5 36%, #B9F6D0 63%, rgba(141,124,255,.82));
    box-shadow: inset 0 10px 18px rgba(234,247,245,.72), 0 0 28px rgba(104,244,229,.56);
}
.condensation-meter.merged { gap: 0; }
.condensation-meter.merged button { margin-top: -17px; border-radius: 50%; }

.frost-chambers { position: relative; z-index: 10; }
.chamber {
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.05fr);
    align-items: center;
    gap: clamp(24px, 6vw, 96px);
    padding: clamp(42px, 7vw, 110px);
    overflow: hidden;
}
.chamber::after {
    content: attr(data-letter);
    position: absolute;
    right: 9vw;
    top: 3vh;
    font: 900 clamp(170px, 29vw, 450px) var(--display);
    color: rgba(234,247,245,.035);
    -webkit-text-stroke: 1px rgba(104,244,229,.08);
    filter: blur(3px);
}

.sealed-room {
    grid-column: 1 / -1;
    position: relative;
    min-height: min(760px, 82vh);
    border: 20px solid rgba(234,247,245,.14);
    border-radius: 54px;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 52% 46%, rgba(104,244,229,.24), transparent 29%),
        linear-gradient(135deg, rgba(234,247,245,.1), rgba(41,58,66,.42) 42%, rgba(6,30,43,.8));
    box-shadow: inset 0 0 70px rgba(234,247,245,.15), inset 0 -54px 130px rgba(6,30,43,.9), 0 42px 110px rgba(0,0,0,.42);
    isolation: isolate;
}
.frost-pane {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 55%;
    z-index: 5;
    border: 1px solid rgba(234,247,245,.3);
    background:
        radial-gradient(circle at 25% 32%, rgba(234,247,245,.54), transparent 2px),
        radial-gradient(circle at 67% 64%, rgba(234,247,245,.34), transparent 2px),
        linear-gradient(118deg, rgba(234,247,245,.72), rgba(185,246,208,.28) 24%, rgba(104,244,229,.1) 55%, rgba(234,247,245,.42));
    background-size: 53px 61px, 71px 83px, 100% 100%;
    box-shadow: inset 0 0 36px rgba(234,247,245,.42), 0 0 24px rgba(6,30,43,.22);
    backdrop-filter: blur(9px);
    transition: transform 1.6s cubic-bezier(.15,.82,.22,1), opacity 1.2s ease;
}
.pane-left { left: 0; border-radius: 34px 0 0 34px; transform-origin: left center; }
.pane-right { right: 0; border-radius: 0 34px 34px 0; transform-origin: right center; }
.sealed-room.cleared .pane-left { transform: translateX(-38%) rotateY(-18deg); opacity: .54; }
.sealed-room.cleared .pane-right { transform: translateX(38%) rotateY(18deg); opacity: .54; }
.behind-letters {
    position: absolute;
    inset: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 2vw, 28px);
    font: 900 clamp(58px, 13vw, 190px) var(--display);
    color: rgba(104,244,229,.52);
    filter: blur(11px);
    letter-spacing: -.06em;
}
.wordmark {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(7px, 1.7vw, 20px);
    font: 900 clamp(46px, 10vw, 148px) var(--display);
    letter-spacing: -.07em;
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transition: opacity .9s ease, transform .9s ease, filter .9s ease;
    filter: blur(8px);
}
.wordmark.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.wordmark span, .final-seal span {
    min-width: .82em;
    display: inline-grid;
    place-items: center;
    color: rgba(234,247,245,.94);
    text-shadow: 0 0 22px rgba(104,244,229,.88), 0 0 44px rgba(185,246,208,.42);
}
.wordmark em, .final-seal em { font-style: normal; font-size: .28em; color: var(--mint); letter-spacing: .02em; margin-left: .12em; }
.etched-label {
    margin: 0;
    font: 800 11px/1.7 var(--copy);
    color: rgba(234,247,245,.62);
    letter-spacing: .21em;
    text-transform: uppercase;
}
.sealed-room .etched-label { position: absolute; left: 38px; top: 36px; z-index: 8; text-align: left; color: rgba(41,58,66,.82); text-shadow: 0 1px rgba(234,247,245,.52); }
.whisper {
    position: absolute;
    z-index: 7;
    bottom: 90px;
    max-width: 580px;
    margin: 0;
    font: italic clamp(21px, 3vw, 36px)/1.2 var(--poem);
    color: rgba(234,247,245,.82);
}
.breath-trigger {
    position: absolute;
    z-index: 8;
    bottom: 34px;
    border: 1px solid rgba(255,179,107,.48);
    border-radius: 999px;
    padding: 13px 22px;
    color: var(--seal);
    background: linear-gradient(180deg, #EAF7F5, #B9F6D0 52%, #FFB36B);
    box-shadow: inset 0 8px 14px rgba(255,255,255,.7), 0 0 24px rgba(255,179,107,.25);
    font: 900 12px var(--copy);
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
}
.ee-eyelets { position: absolute; z-index: 8; bottom: 22px; right: 38px; display: flex; gap: 12px; }
.ee-eyelets i, .glass-eyelet { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #EAF7F5, #68F4E5 45%, #061E2B 70%); box-shadow: 0 0 18px rgba(104,244,229,.64); }
.cassette-screw, .hinge { position: absolute; z-index: 9; }
.cassette-screw { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #EAF7F5, #293A42 56%, #061E2B); box-shadow: inset 0 -3px 5px rgba(0,0,0,.5); }
.screw-one { left: 24px; top: 24px; } .screw-two { right: 24px; top: 24px; } .screw-three { left: 24px; bottom: 24px; } .screw-four { right: 24px; bottom: 24px; }
.hinge { width: 16px; height: 110px; right: -18px; border-radius: 12px; background: linear-gradient(#EAF7F5, #293A42); opacity: .55; }
.hinge-one { top: 18%; } .hinge-two { bottom: 18%; }

.acrylic-stack, .glass-note, .shelter-booth {
    position: relative;
    z-index: 4;
    border: 1px solid rgba(234,247,245,.28);
    background: linear-gradient(135deg, rgba(234,247,245,.18), rgba(104,244,229,.08) 46%, rgba(6,30,43,.64));
    box-shadow: inset 0 0 38px rgba(234,247,245,.14), inset 0 -28px 80px rgba(6,30,43,.58), 0 28px 90px rgba(0,0,0,.34);
    backdrop-filter: blur(13px);
}
.acrylic-stack { min-height: 58vh; border-radius: 46px 74px 42px 66px; transform: rotate(-4deg); }
.stack-static { transform: rotate(4deg); background: linear-gradient(135deg, rgba(141,124,255,.23), rgba(234,247,245,.1) 42%, rgba(6,30,43,.7)); }
.glass-note {
    max-width: 650px;
    padding: clamp(28px, 5vw, 62px);
    border-radius: 72px 38px 68px 44px;
    transform: translateY(34px) rotate(.8deg);
    opacity: .58;
    transition: transform 1.2s cubic-bezier(.16,.84,.22,1), opacity 1.2s ease;
}
.glass-note.visible { transform: translateY(0) rotate(.8deg); opacity: 1; }
.note-static { border-radius: 38px 82px 42px 70px; }
.note-shelter { border-color: rgba(255,179,107,.28); }
.glass-note h1 {
    margin: 16px 0 18px;
    font: 900 clamp(32px, 5.1vw, 72px)/.98 var(--display);
    letter-spacing: -.06em;
    color: var(--frost);
    text-shadow: 0 0 28px rgba(104,244,229,.26);
}
.glass-note p:not(.etched-label) { color: rgba(234,247,245,.82); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.64; }
.glass-note small { font: 600 12px/1.8 var(--mono); color: var(--mint); letter-spacing: .08em; }
.pressure-pair { position: absolute; inset: 16% 9% auto; display: flex; justify-content: center; gap: clamp(22px, 5vw, 70px); }
.pressure-bulb {
    width: clamp(120px, 18vw, 230px);
    aspect-ratio: 1;
    border-radius: 52% 48% 56% 44%;
    display: grid;
    place-items: center;
    color: var(--seal);
    font: 900 clamp(74px, 12vw, 160px) var(--display);
    background: radial-gradient(circle at 30% 20%, #EAF7F5, #68F4E5 36%, #B9F6D0 62%, rgba(41,58,66,.58));
    box-shadow: inset 0 16px 28px rgba(255,255,255,.62), inset 0 -24px 42px rgba(6,30,43,.36), 0 0 42px rgba(104,244,229,.28);
    animation: bulbPulse 3.8s ease-in-out infinite;
}
.pressure-bulb:nth-child(2) { animation-delay: .55s; }
.bead-chain { position: absolute; left: 12%; bottom: 17%; display: flex; gap: 13px; transform: rotate(-12deg); }
.bead-chain i {
    width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #EAF7F5, #68F4E5 52%, transparent 72%);
    box-shadow: 0 0 12px rgba(104,244,229,.58);
    animation: beadSideways 4s ease-in-out infinite;
}
.bead-chain i:nth-child(2n) { animation-delay: .45s; }
.inspection-sticker { position: absolute; right: 11%; bottom: 13%; padding: 10px 14px; border: 1px solid rgba(255,179,107,.38); color: var(--apricot); font: 900 11px var(--copy); letter-spacing: .16em; transform: rotate(7deg); }
.ripple-field { position: absolute; inset: 0; pointer-events: none; }
.ripple-field i { position: absolute; left: 25%; top: 50%; width: 180px; aspect-ratio: 1; border: 2px solid rgba(104,244,229,.22); border-radius: 50%; animation: ripple 4.5s ease-out infinite; }
.ripple-field i:nth-child(2) { animation-delay: 1.1s; } .ripple-field i:nth-child(3) { animation-delay: 2.2s; }
.sound-curtains { position: absolute; inset: 10% 12%; display: flex; gap: 13%; justify-content: center; }
.sound-curtains i { width: 30%; border-radius: 80px; background: linear-gradient(90deg, rgba(234,247,245,.08), rgba(141,124,255,.24), rgba(234,247,245,.08)); box-shadow: inset 0 0 26px rgba(234,247,245,.18); animation: curtainHush 5.2s ease-in-out infinite; }
.sound-curtains i:nth-child(2) { animation-delay: .8s; }
.signal-moths b { position: absolute; width: 20px; height: 14px; border-radius: 60% 40%; background: rgba(185,246,208,.52); filter: blur(.3px); box-shadow: 0 0 18px rgba(141,124,255,.48); animation: moth 8s ease-in-out infinite; }
.signal-moths b:nth-child(1) { left: 25%; top: 22%; } .signal-moths b:nth-child(2) { left: 62%; top: 38%; animation-delay: 1.8s; } .signal-moths b:nth-child(3) { left: 46%; top: 68%; animation-delay: 3.2s; }
.signal-lines { position: absolute; left: 18%; right: 18%; bottom: 18%; display: grid; gap: 15px; }
.signal-lines span { height: 6px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent); transform: scaleX(.18); opacity: .38; transform-origin: center; transition: transform 1.4s ease, opacity 1.4s ease; }
.signal-lines.gathered span { transform: scaleX(1); opacity: .86; }
.thaw-line { position: absolute; z-index: 3; height: 2px; width: 48vw; background: linear-gradient(90deg, transparent, var(--apricot), var(--cyan), transparent); box-shadow: 0 0 22px rgba(255,179,107,.42); opacity: .5; transform: rotate(-21deg); }
.thaw-a { left: -10vw; top: 26vh; } .thaw-b { right: -10vw; bottom: 18vh; transform: rotate(19deg); } .thaw-c { left: 8vw; bottom: 12vh; }
.shelter-booth { min-height: 62vh; border-radius: 48% 52% 44% 56% / 38% 44% 56% 62%; display: grid; place-items: center; overflow: hidden; }
.frost-roof { position: absolute; top: 9%; width: 64%; height: 21%; border-radius: 999px 999px 28px 28px; background: linear-gradient(180deg, rgba(234,247,245,.42), rgba(104,244,229,.12)); box-shadow: inset 0 0 22px rgba(234,247,245,.22); }
.inner-glow { position: absolute; inset: 18%; border-radius: 44%; background: radial-gradient(circle, rgba(255,179,107,.36), rgba(185,246,208,.26) 36%, transparent 68%); animation: shelterGlow 4.6s ease-in-out infinite; }
.final-seal { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 7px; font: 900 clamp(38px, 7vw, 110px) var(--display); letter-spacing: -.08em; }
.eyelet-left { position: absolute; left: 28%; bottom: 20%; } .eyelet-right { position: absolute; right: 28%; bottom: 20%; }

@keyframes staticDrift { to { background-position: 39px 61px, -73px 91px; } }
@keyframes bulbPulse { 0%,100% { transform: scale(1); filter: saturate(1); } 50% { transform: scale(1.045); filter: saturate(1.2); } }
@keyframes beadSideways { 0%,100% { transform: translate(0,0); opacity: .45; } 50% { transform: translate(18px, -7px); opacity: 1; } }
@keyframes ripple { from { transform: scale(.3); opacity: .72; } to { transform: scale(2.8); opacity: 0; } }
@keyframes curtainHush { 0%,100% { filter: blur(0); opacity: .65; } 50% { filter: blur(5px); opacity: .9; } }
@keyframes moth { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(22px,-18px) rotate(14deg); } }
@keyframes shelterGlow { 0%,100% { transform: scale(.96); opacity: .64; } 50% { transform: scale(1.08); opacity: .92; } }

@media (max-width: 820px) {
    .chamber { grid-template-columns: 1fr; padding: 74px 24px; }
    .sealed-room { min-height: 78vh; border-width: 12px; }
    .sealed-room .etched-label { left: 24px; right: 24px; }
    .whisper { bottom: 108px; padding: 0 22px; }
    .condensation-meter { right: 8px; }
    .condensation-meter button { width: 34px; height: 45px; }
    .acrylic-stack { min-height: 46vh; }
    .pressure-pair { top: 18%; }
}