:root {
    /* Typography compliance note: IBM Plex Sans** for practical body copy and interface labels; JetBrains Mono only for tiny version tags and measurement marks to avoid the repository’s common mono-heavy developer treatment while staying credible for a `.dev` domain. */
    --deep-shale: #111018;
    --amber-gel: #F2B35E;
    --proto-lilac: #B8A7FF;
    --oxide-coral: #FF6B5A;
    --chalk-vellum: #E9E1CF;
    --wet-clay: #8A5E46;
    --biolume-mint: #92F0C8;
    --progress: 0;
    --room: 0;
    --light-x: 50%;
    --light-y: 32%;
    --proto-left: 18vw;
    --proto-top: 72vh;
    --proto-scale: 0.76;
    --proto-rot: -9deg;
    --skeleton: 0;
    --membrane: 0;
    --membrane-scale: 0.62;
    --skin: 0;
    --skin-clip: 70%;
    --variants: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--chalk-vellum);
    font-family: "IBM Plex Sans", Inter, sans-serif;
    background:
        radial-gradient(circle at var(--light-x) var(--light-y), rgba(242, 179, 94, 0.20), transparent 16rem),
        radial-gradient(circle at 18% 12%, rgba(184, 167, 255, 0.12), transparent 32rem),
        radial-gradient(circle at 82% 72%, rgba(138, 94, 70, 0.32), transparent 28rem),
        #111018;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    opacity: 0.34;
    background-image:
        radial-gradient(circle, rgba(233,225,207,0.16) 0 1px, transparent 1px),
        radial-gradient(circle, rgba(146,240,200,0.07) 0 1px, transparent 1px);
    background-size: 21px 25px, 53px 47px;
    mix-blend-mode: screen;
}

body::after {
    background:
        linear-gradient(105deg, transparent 0 42%, rgba(233,225,207,0.035) 43% 44%, transparent 45%),
        repeating-linear-gradient(90deg, transparent 0 74px, rgba(233,225,207,0.035) 75px, transparent 76px);
    opacity: 0.45;
}

.font-token { display: none; }

.microscope-light {
    position: fixed;
    width: 42vmax;
    height: 42vmax;
    left: var(--light-x);
    top: var(--light-y);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233,225,207,0.18), rgba(242,179,94,0.08) 34%, transparent 66%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 1;
}

.dust-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image: radial-gradient(circle, rgba(233,225,207,0.22) 0 0.7px, transparent 1px);
    background-size: 37px 41px;
    animation: dustDrift 18s linear infinite;
}

.pin-tray {
    position: fixed;
    right: clamp(12px, 2vw, 30px);
    top: 50%;
    transform: translateY(-50%) rotate(-2deg);
    display: grid;
    gap: 9px;
    padding: 12px;
    z-index: 20;
    border: 1px solid rgba(233,225,207,0.22);
    border-radius: 24px;
    background: rgba(17,16,24,0.72);
    box-shadow: inset 0 0 24px rgba(138,94,70,0.36), 0 18px 50px rgba(0,0,0,0.34);
    backdrop-filter: blur(12px);
}

.pin {
    position: relative;
    display: grid;
    gap: 2px;
    width: 58px;
    border: 0;
    border-radius: 16px 16px 22px 12px;
    padding: 9px 5px;
    color: rgba(233,225,207,0.68);
    background: rgba(233,225,207,0.07);
    font: 600 10px/1 "JetBrains Mono", monospace;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: transform 320ms ease, color 320ms ease, background 320ms ease;
}

.pin span { color: var(--oxide-coral); }
.pin.is-active { color: #111018; background: var(--chalk-vellum); transform: translateX(-8px) rotate(4deg); }

.chamber { position: relative; z-index: 3; }

.room {
    min-height: 100vh;
    position: relative;
    display: grid;
    align-items: center;
    padding: clamp(56px, 8vw, 112px) clamp(22px, 7vw, 120px);
    isolation: isolate;
}

.room::before {
    content: attr(data-stage);
    position: absolute;
    left: clamp(20px, 4vw, 70px);
    top: 24px;
    color: rgba(233,225,207,0.18);
    font: 700 clamp(54px, 12vw, 190px)/0.8 "Syne", sans-serif;
    letter-spacing: -0.08em;
    z-index: -1;
}

.specimen-plate,
.vellum-panel,
.mutation-card,
.release-plaque {
    position: relative;
    border: 1px solid rgba(233,225,207,0.24);
    background:
        radial-gradient(circle at 22% 18%, rgba(242,179,94,0.17), transparent 30%),
        linear-gradient(135deg, rgba(233,225,207,0.13), rgba(233,225,207,0.035));
    box-shadow: inset 0 0 50px rgba(138,94,70,0.36), 0 30px 90px rgba(0,0,0,0.38);
    backdrop-filter: blur(9px);
}

.hero-plate {
    min-height: 78vh;
    width: min(1120px, 88vw);
    margin-left: 3vw;
    border-radius: 42px 90px 52px 120px;
    transform: rotate(-3deg);
    padding: clamp(24px, 4vw, 58px);
}

.title-sheet {
    width: min(620px, 88%);
    padding: clamp(22px, 4vw, 48px);
    border-radius: 28px 18px 56px 24px;
    background: rgba(233,225,207,0.88);
    color: #111018;
    box-shadow: 10px 16px 0 rgba(138,94,70,0.28);
}

.kicker,
.chapter,
.pin-label,
.margin-note,
.ruler,
.slide,
.variant-notes,
.final-labels {
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
}

h1,
h2 {
    margin: 0;
    font-family: "Syne", sans-serif;
    font-weight: 800;
    letter-spacing: -0.06em;
}

h1 { font-size: clamp(56px, 10vw, 142px); line-height: 0.82; }
h2 { font-size: clamp(44px, 8vw, 118px); line-height: 0.86; max-width: 760px; }

p { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; max-width: 660px; }
.serif-line { font-family: "Instrument Serif", serif; font-size: clamp(24px, 3vw, 42px); line-height: 1.08; }

.glass-cover {
    position: absolute;
    right: 4%;
    bottom: 6%;
    width: min(48vw, 560px);
    aspect-ratio: 1.16;
    border: 1px solid rgba(146,240,200,0.28);
    border-radius: 46% 54% 48% 52% / 35% 42% 58% 65%;
    background: radial-gradient(circle at 50% 52%, rgba(242,179,94,0.30), rgba(184,167,255,0.13) 43%, rgba(233,225,207,0.035) 68%, transparent 72%);
    box-shadow: inset 0 0 40px rgba(233,225,207,0.20), 0 0 46px rgba(242,179,94,0.20);
    transform: rotate(7deg);
}

.protoform {
    position: fixed;
    left: var(--proto-left);
    top: var(--proto-top);
    width: clamp(90px, 16vw, 230px);
    aspect-ratio: 1;
    z-index: 12;
    transform: translate(-50%, -50%) rotate(var(--proto-rot)) scale(var(--proto-scale));
    filter: drop-shadow(0 0 30px rgba(242,179,94,0.38));
    transition: filter 420ms ease;
}

.proto-core,
.proto-membrane,
.proto-skin,
.proto-variants,
.proto-skeleton { position: absolute; inset: 0; }

.proto-core {
    inset: 29%;
    border-radius: 49% 51% 44% 56% / 48% 39% 61% 52%;
    background: radial-gradient(circle at 38% 31%, #E9E1CF, #F2B35E 34%, #FF6B5A 65%, rgba(242,179,94,0.22));
    animation: protoPulse 2.8s ease-in-out infinite;
}

.proto-skeleton {
    opacity: var(--skeleton);
}

.proto-skeleton i {
    position: absolute;
    left: 50%; top: 50%;
    width: 48%; height: 2px;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--biolume-mint), transparent);
}
.proto-skeleton i:nth-child(1) { transform: rotate(12deg); }
.proto-skeleton i:nth-child(2) { transform: rotate(77deg); }
.proto-skeleton i:nth-child(3) { transform: rotate(142deg); }
.proto-skeleton i:nth-child(4) { transform: rotate(214deg); }
.proto-skeleton i:nth-child(5) { transform: rotate(296deg); }

.proto-membrane {
    border-radius: 58% 42% 51% 49% / 44% 58% 42% 56%;
    background: rgba(184,167,255,0.24);
    border: 1px solid rgba(184,167,255,0.46);
    transform: scale(var(--membrane-scale));
    opacity: var(--membrane);
    mix-blend-mode: screen;
}

.proto-skin {
    inset: 10%;
    border-radius: 34% 66% 47% 53% / 63% 35% 65% 37%;
    background: linear-gradient(135deg, rgba(233,225,207,0.36), rgba(146,240,200,0.18), rgba(255,107,90,0.14));
    clip-path: inset(var(--skin-clip) 0 0 0 round 40%);
    opacity: var(--skin);
}

.proto-variants { opacity: var(--variants); }
.proto-variants b {
    position: absolute;
    width: 32%; height: 32%;
    border-radius: 50% 36% 58% 44%;
    background: rgba(146,240,200,0.26);
    border: 1px solid rgba(146,240,200,0.52);
}
.proto-variants b:nth-child(1) { left: -8%; top: 18%; }
.proto-variants b:nth-child(2) { right: -12%; top: 38%; background: rgba(255,107,90,0.25); }
.proto-variants b:nth-child(3) { left: 34%; bottom: -14%; background: rgba(242,179,94,0.28); }

body.mutated .proto-membrane { border-radius: 30% 70% 58% 42% / 38% 63% 37% 62%; background: rgba(255,107,90,0.26); }
body.mutated .proto-core { border-radius: 64% 36% 34% 66% / 32% 55% 45% 68%; }

.behavior-path { position: absolute; inset: 6%; overflow: visible; }
.behavior-path path,
.stitched-path path {
    fill: none;
    stroke: var(--biolume-mint);
    stroke-width: 2;
    stroke-dasharray: 8 12;
    filter: drop-shadow(0 0 7px rgba(146,240,200,0.7));
    animation: stitch 4s linear infinite;
}

.label-stack { position: absolute; left: 58%; top: 12%; display: grid; gap: 10px; transform: rotate(4deg); }
.wax-seal { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--oxide-coral); color: #111018; font: 800 16px "Syne"; box-shadow: inset -7px -9px 0 rgba(138,94,70,0.32); }
.pin-label { width: max-content; padding: 9px 13px; border-radius: 2px 14px 4px 12px; color: #111018; background: var(--chalk-vellum); box-shadow: 5px 7px 0 rgba(0,0,0,0.22); }
.pin-label.coral { background: var(--oxide-coral); }
.floating { position: absolute; right: 16%; bottom: 18%; transform: rotate(-6deg); }
.margin-note { position: absolute; left: 7vw; bottom: 8vh; max-width: 260px; color: rgba(233,225,207,0.62); }

.angled-left { width: min(760px, 76vw); padding: clamp(28px, 6vw, 74px); border-radius: 80px 34px 120px 28px; margin-left: 8vw; transform: rotate(4deg); }
.xray-board { position: absolute; right: -24%; top: 18%; width: 320px; height: 380px; border: 1px solid rgba(146,240,200,0.22); border-radius: 38px; background: rgba(17,16,24,0.44); transform: rotate(-12deg); }
.xray-board span { position: absolute; background: rgba(146,240,200,0.46); border-radius: 999px; box-shadow: 0 0 18px rgba(146,240,200,0.4); }
.xray-board span:nth-child(1) { width: 180px; height: 6px; left: 62px; top: 100px; transform: rotate(32deg); }
.xray-board span:nth-child(2) { width: 120px; height: 6px; left: 98px; top: 168px; transform: rotate(-55deg); }
.xray-board span:nth-child(3) { width: 160px; height: 6px; left: 82px; top: 230px; transform: rotate(12deg); }
.xray-board span:nth-child(4) { width: 76px; height: 76px; left: 122px; top: 134px; border: 2px solid rgba(184,167,255,0.46); background: transparent; }
.ruler.vertical { position: absolute; right: 9vw; top: 18vh; height: 56vh; border-left: 1px solid rgba(233,225,207,0.36); color: rgba(233,225,207,0.48); display: flex; flex-direction: column; justify-content: space-between; padding-left: 12px; }

.wide-panel { width: min(900px, 82vw); margin-left: auto; padding: clamp(32px, 6vw, 80px); border-radius: 28px 110px 38px 76px; transform: rotate(-5deg); background: rgba(233,225,207,0.82); color: #111018; }
.slide-stack { position: absolute; left: 8vw; bottom: 10vh; width: min(460px, 72vw); height: 280px; }
.slide { position: absolute; inset: 0; display: grid; place-items: end start; padding: 22px; border: 1px solid rgba(233,225,207,0.24); border-radius: 36px 12px 50px 22px; color: #111018; }
.slide.lilac { background: rgba(184,167,255,0.72); transform: rotate(12deg) translate(40px, -28px); }
.slide.amber { background: rgba(242,179,94,0.70); transform: rotate(-6deg); }
.slide.mint { background: rgba(146,240,200,0.62); transform: rotate(4deg) translate(-26px, 36px); }
.thumbprint { position: absolute; right: 16vw; bottom: 12vh; width: 170px; height: 220px; opacity: 0.16; border-radius: 48%; background: repeating-radial-gradient(ellipse at center, transparent 0 7px, #E9E1CF 8px 10px); transform: rotate(24deg); }

.behavior-plate { width: min(780px, 80vw); padding: clamp(30px, 5vw, 68px); margin-left: 4vw; border-radius: 34px 120px 62px 42px; transform: rotate(2deg); }
.specimen-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.specimen-list li { display: flex; gap: 16px; align-items: baseline; color: rgba(233,225,207,0.78); }
.specimen-list span { color: var(--biolume-mint); font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; }
.stitched-path { position: absolute; right: 5vw; bottom: 12vh; width: min(620px, 70vw); overflow: visible; transform: rotate(-8deg); }

.mutation-card { width: min(720px, 78vw); padding: clamp(30px, 6vw, 76px); margin-left: auto; margin-right: 10vw; border-radius: 110px 30px 46px 80px; transform: rotate(-3deg); }
.mutation-toggle { margin-top: 22px; border: 0; border-radius: 999px; padding: 10px 10px 10px 22px; display: inline-flex; gap: 18px; align-items: center; background: var(--oxide-coral); color: #111018; font: 800 12px "JetBrains Mono"; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; box-shadow: 0 0 0 8px rgba(255,107,90,0.12); }
.mutation-toggle b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #111018; color: var(--oxide-coral); font-size: 20px; transition: transform 360ms ease; }
.mutation-toggle:hover b { transform: rotate(160deg); }
.variant-notes { position: absolute; left: 12vw; top: 22vh; display: grid; gap: 16px; color: #111018; }
.variant-notes span { padding: 12px 16px; background: var(--chalk-vellum); border-radius: 12px 4px 18px 4px; transform: rotate(var(--r, -4deg)); }
.variant-notes span:nth-child(2) { --r: 5deg; background: var(--proto-lilac); }
.variant-notes span:nth-child(3) { --r: -9deg; background: var(--amber-gel); }

.release-plaque { width: min(920px, 84vw); padding: clamp(34px, 7vw, 90px); margin: auto; border-radius: 46px 46px 130px 46px; text-align: left; transform: rotate(1.5deg); }
.final-labels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.final-labels span { padding: 10px 14px; border: 1px solid rgba(146,240,200,0.38); border-radius: 999px; color: var(--biolume-mint); background: rgba(146,240,200,0.06); }
.calibration-grid { position: absolute; inset: 12vh 10vw; border: 1px solid rgba(233,225,207,0.10); background-image: linear-gradient(rgba(233,225,207,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(233,225,207,0.08) 1px, transparent 1px); background-size: 56px 56px; z-index: -1; transform: rotate(-4deg); }

@keyframes protoPulse { 0%,100% { transform: scale(0.92) rotate(-5deg); } 50% { transform: scale(1.08) rotate(8deg); } }
@keyframes stitch { to { stroke-dashoffset: -40; } }
@keyframes dustDrift { to { transform: translate3d(37px, 41px, 0); } }

@media (max-width: 760px) {
    .pin-tray { right: 8px; transform: translateY(-50%) scale(0.82); }
    .hero-plate, .angled-left, .wide-panel, .behavior-plate, .mutation-card, .release-plaque { width: calc(100vw - 74px); margin-left: 0; margin-right: 48px; }
    .glass-cover { position: relative; right: auto; bottom: auto; width: 82%; margin: 30px auto 0; }
    .protoform { width: 110px; }
    .xray-board, .stitched-path, .slide-stack { opacity: 0.55; }
}