:root {
    --obsidian: #08070B;
    --design-font-token: "Grotesk* measurement labels";
    --brass: #B88A44;
    --vellum: #F3E7C8;
    --teal: #1DD6C3;
    --garnet: #7D1F3A;
    --uv: #6C4CFF;
    --pearl: #C6C1B6;
    --scroll-progress: 0;
    --pointer-x: 50vw;
    --pointer-y: 45vh;
    --rail-bend: 0deg;
    --pan-offset: 0px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: #08070B;
}

body {
    margin: 0;
    color: #F3E7C8;
    background: #08070B;
    font-family: "Instrument Sans", sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

.valuation-chamber {
    position: relative;
    min-height: 500vh;
    isolation: isolate;
    background:
        radial-gradient(circle at 75% 20%, rgba(108, 76, 255, 0.16), transparent 28vw),
        radial-gradient(circle at 24% 66%, rgba(125, 31, 58, 0.24), transparent 24vw),
        linear-gradient(135deg, #08070B 0%, #120d12 45%, #08070B 100%);
}

.grain-field,
.spectral-haze {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.grain-field {
    z-index: 1;
    opacity: 0.35;
    background-image:
        radial-gradient(circle at 18% 24%, rgba(243, 231, 200, 0.07) 0 1px, transparent 1px),
        radial-gradient(circle at 76% 12%, rgba(198, 193, 182, 0.06) 0 1px, transparent 1px),
        radial-gradient(circle at 52% 80%, rgba(184, 138, 68, 0.08) 0 1px, transparent 1px);
    background-size: 37px 41px, 53px 47px, 71px 67px;
    mix-blend-mode: screen;
}

.spectral-haze {
    z-index: 2;
    background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(29, 214, 195, 0.13), transparent 18vw),
        radial-gradient(circle at calc(var(--pointer-x) + 10vw) calc(var(--pointer-y) - 8vh), rgba(108, 76, 255, 0.11), transparent 22vw);
    filter: blur(14px);
}

.calibration-rail {
    position: fixed;
    left: -16vw;
    top: 54vh;
    width: 132vw;
    height: 54px;
    z-index: 7;
    transform: rotate(calc(-18deg + var(--rail-bend))) translateY(calc(var(--scroll-progress) * -12px));
    transform-origin: center;
    opacity: 0.92;
    pointer-events: none;
}

.rail-core {
    position: absolute;
    left: 0;
    right: 0;
    top: 25px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #B88A44 18%, #F3E7C8 50%, #B88A44 82%, transparent);
    box-shadow: 0 0 18px rgba(184, 138, 68, 0.45), 0 0 2px #F3E7C8;
}

.rail-glint {
    position: absolute;
    left: -20%;
    top: 21px;
    width: 22%;
    height: 8px;
    background: linear-gradient(90deg, transparent, rgba(243, 231, 200, 0.92), transparent);
    animation: railGlint 4.8s cubic-bezier(.2,.7,.2,1) infinite;
}

.tick-strip {
    display: flex;
    justify-content: space-between;
    height: 54px;
    padding: 0 8vw;
}

.tick-strip span {
    width: 1px;
    height: calc(10px + (var(--scroll-progress) * 16px));
    margin-top: 16px;
    background: #B88A44;
    box-shadow: 0 0 10px rgba(184, 138, 68, 0.5);
    transform: rotate(calc(var(--rail-bend) * -2));
}

.tool-tabs {
    position: fixed;
    top: 22px;
    right: 28px;
    z-index: 20;
    display: flex;
    gap: 8px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: lowercase;
}

.tool-tabs a {
    color: #C6C1B6;
    border: 1px solid rgba(184, 138, 68, 0.5);
    background: rgba(8, 7, 11, 0.58);
    padding: 8px 11px;
    transform: skewX(-9deg);
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.tool-tabs a.active,
.tool-tabs a:hover {
    color: #1DD6C3;
    border-color: #1DD6C3;
    background: rgba(29, 214, 195, 0.08);
}

.loupe-mask {
    position: fixed;
    left: var(--pointer-x);
    top: var(--pointer-y);
    width: 168px;
    height: 168px;
    z-index: 12;
    transform: translate(-50%, -50%) rotate(calc(var(--scroll-progress) * 32deg));
    pointer-events: none;
    mix-blend-mode: screen;
}

.loupe-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(243, 231, 200, 0.64);
    background:
        radial-gradient(circle at 34% 30%, rgba(243, 231, 200, 0.25), transparent 12%),
        radial-gradient(circle, rgba(29, 214, 195, 0.15), transparent 62%);
    box-shadow: 0 0 34px rgba(108, 76, 255, 0.42), inset 0 0 24px rgba(29, 214, 195, 0.18);
}

.loupe-handle {
    position: absolute;
    width: 84px;
    height: 8px;
    right: -58px;
    bottom: 18px;
    border-radius: 12px;
    background: linear-gradient(90deg, #B88A44, #F3E7C8, #B88A44);
    transform: rotate(38deg);
    box-shadow: 0 0 14px rgba(184, 138, 68, 0.44);
}

.chamber-room {
    position: relative;
    min-height: 100vh;
    padding: 8vh 7vw;
    z-index: 5;
    overflow: hidden;
}

.room-index,
.engraved-label,
.appraisal-tag span,
.glass-ledger span,
.scale-pan span,
.seal-caption {
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #B88A44;
    font-size: 11px;
}

.room-index {
    position: absolute;
    top: 7vh;
    left: 7vw;
    color: #C6C1B6;
}

.artifact-plinth {
    position: absolute;
    left: 13vw;
    top: 25vh;
    width: min(58vw, 780px);
    height: 46vh;
    transform: rotate(-4deg) translateX(calc(var(--scroll-progress) * -22px));
}

.plinth-shadow {
    position: absolute;
    inset: 22% 8% 5% 12%;
    background: #7D1F3A;
    filter: blur(42px);
    opacity: .44;
    transform: skewX(-18deg);
}

.plinth-plate {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(184, 138, 68, 0.5);
    background:
        linear-gradient(125deg, rgba(243, 231, 200, 0.08), transparent 30%),
        linear-gradient(315deg, rgba(108, 76, 255, 0.14), transparent 42%),
        rgba(8, 7, 11, 0.72);
    box-shadow: inset 0 0 50px rgba(243, 231, 200, 0.05), 0 38px 70px rgba(0,0,0,.45);
    clip-path: polygon(8% 0, 100% 10%, 91% 100%, 0 86%);
}

.specimen-pin {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #F3E7C8;
    box-shadow: 0 0 16px #1DD6C3;
}

.pin-one { left: 13%; top: 17%; }
.pin-two { right: 12%; bottom: 21%; }

.wordmark,
.chamber-room h2,
.final-name {
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-variation-settings: "SOFT" 40, "WONK" 1;
}

.wordmark {
    margin: 0;
    font-size: clamp(4rem, 12vw, 12rem);
    letter-spacing: -.08em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(243, 231, 200, 0.7);
    text-shadow: 0 0 28px rgba(29, 214, 195, 0.24), 0 0 76px rgba(108, 76, 255, 0.22);
    opacity: .94;
}

.artifact-caption {
    position: absolute;
    bottom: 10%;
    right: 13%;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    color: #1DD6C3;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
}

.vellum-note,
.glass-ledger {
    position: absolute;
    border: 1px solid rgba(184, 138, 68, 0.38);
    background: rgba(243, 231, 200, 0.1);
    color: #F3E7C8;
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.intro-note {
    right: 8vw;
    top: 18vh;
    width: 330px;
    padding: 24px;
    transform: rotate(5deg);
}

.vellum-note p,
.split-copy p,
.shadow-specimen p,
.signal-copy p,
.seal-composition p {
    color: #C6C1B6;
    line-height: 1.55;
    font-size: clamp(15px, 1.35vw, 19px);
}

.ritual-control {
    position: absolute;
    left: 17vw;
    bottom: 12vh;
    border: 1px solid #B88A44;
    color: #08070B;
    background: #B88A44;
    padding: 14px 22px;
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transform: skewX(-12deg);
    box-shadow: 0 0 24px rgba(184, 138, 68, 0.24);
}

.ritual-control.is-placed {
    color: #08070B;
    background: #1DD6C3;
    border-color: #1DD6C3;
}

.artifact-plinth.is-weighed .plinth-plate {
    box-shadow: inset 0 0 70px rgba(29, 214, 195, 0.14), 0 38px 78px rgba(0,0,0,.48), 0 0 42px rgba(29, 214, 195, .18);
}

.artifact-plinth.is-weighed .wordmark {
    -webkit-text-stroke-color: #1DD6C3;
    text-shadow: 0 0 34px rgba(29, 214, 195, 0.42), 0 0 86px rgba(108, 76, 255, 0.32);
}

.appraisal-tag {
    position: absolute;
    width: 220px;
    min-height: 116px;
    padding: 18px;
    color: #08070B;
    background: #F3E7C8;
    box-shadow: 0 22px 48px rgba(0,0,0,.38);
    transform-origin: top center;
}

.appraisal-tag::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 88px;
    background: rgba(184, 138, 68, 0.72);
}

.appraisal-tag::after {
    content: "";
    position: absolute;
    top: 11px;
    right: 13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #B88A44;
}

.appraisal-tag b {
    display: block;
    margin-top: 12px;
    font-family: "Fraunces", serif;
    font-size: 22px;
    line-height: 1.05;
    color: #08070B;
}

.tag-intake { right: 17vw; bottom: 14vh; transform: rotate(8deg); }
.tag-facet { left: 12vw; bottom: 12vh; transform: rotate(-7deg); }
.tag-shadow { right: 11vw; top: 22vh; transform: rotate(11deg); }
.tag-signal { left: 9vw; top: 19vh; transform: rotate(-10deg); }
.tag-seal { right: 12vw; bottom: 15vh; transform: rotate(7deg); }

.facet-prism {
    position: absolute;
    right: 9vw;
    top: 16vh;
    width: min(46vw, 560px);
    height: min(46vw, 560px);
    transform-style: preserve-3d;
    transform: rotateX(58deg) rotateZ(calc(22deg + var(--prism-rotation, 0deg)));
    transition: transform .2s linear;
}

.facet {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48%;
    height: 42%;
    transform-origin: 0 0;
    clip-path: polygon(0 0, 100% 16%, 76% 100%, 10% 84%);
    border: 1px solid rgba(243, 231, 200, 0.42);
    background: linear-gradient(135deg, rgba(29, 214, 195, 0.34), rgba(108, 76, 255, 0.28), rgba(243, 231, 200, 0.08));
    box-shadow: inset 0 0 28px rgba(243,231,200,.11), 0 0 30px rgba(29,214,195,.08);
}

.facet span {
    position: absolute;
    left: 24%;
    top: 40%;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    letter-spacing: .17em;
    color: #F3E7C8;
    text-transform: uppercase;
}

.facet-a { transform: rotate(0deg) translateY(-14%); }
.facet-b { transform: rotate(60deg) translateY(-14%); }
.facet-c { transform: rotate(120deg) translateY(-14%); background: linear-gradient(135deg, rgba(125,31,58,.48), rgba(108,76,255,.24)); }
.facet-d { transform: rotate(180deg) translateY(-14%); }
.facet-e { transform: rotate(240deg) translateY(-14%); background: linear-gradient(135deg, rgba(184,138,68,.28), rgba(29,214,195,.22)); }
.facet-f { transform: rotate(300deg) translateY(-14%); }

.split-copy,
.signal-copy {
    position: absolute;
    left: 8vw;
    top: 25vh;
    width: min(39vw, 560px);
}

.chamber-room h2,
.final-name {
    margin: 10px 0 18px;
    font-size: clamp(3rem, 7vw, 8.5rem);
    line-height: .86;
    letter-spacing: -.055em;
    color: #F3E7C8;
}

.glass-ledger {
    right: 13vw;
    bottom: 11vh;
    width: 360px;
    padding: 19px;
    transform: rotate(-3deg);
}

.glass-ledger i {
    display: block;
    margin-top: 8px;
    color: #1DD6C3;
    font-family: "Space Grotesk", sans-serif;
    font-style: normal;
}

.risk-shadow {
    position: absolute;
    left: 18vw;
    top: 24vh;
    width: 42vw;
    height: 42vh;
    background: #7D1F3A;
    opacity: .56;
    filter: blur(18px);
    clip-path: polygon(20% 0, 78% 8%, 100% 47%, 72% 100%, 8% 84%, 0 34%);
    transform: translateX(calc(var(--shadow-length, 0px))) skewX(-22deg) rotate(-7deg);
}

.shadow-specimen {
    position: absolute;
    left: 21vw;
    top: 22vh;
    width: min(42vw, 620px);
    padding: 44px;
    border: 1px solid rgba(184, 138, 68, .46);
    background: rgba(8, 7, 11, .62);
    box-shadow: inset 0 0 60px rgba(125,31,58,.18);
}

.wax-circle {
    position: absolute;
    right: -44px;
    top: -34px;
    width: 170px;
    height: 126px;
    border: 3px solid #7D1F3A;
    border-radius: 50%;
    transform: rotate(-18deg);
    opacity: .8;
}

.caliper-lines {
    position: absolute;
    right: 6vw;
    bottom: 13vh;
    width: 42vw;
    height: 28vh;
    fill: none;
    stroke: #B88A44;
    stroke-width: 1.4;
    opacity: .72;
}

.caliper-lines path,
.caliper-lines line {
    stroke-dasharray: 700;
    stroke-dashoffset: calc(700 - (var(--scroll-progress) * 700));
}

.scale-stage {
    position: absolute;
    left: 20vw;
    top: 19vh;
    width: 56vw;
    height: 58vh;
    transform: rotate(calc(-5deg + var(--scale-tilt, 0deg)));
    transition: transform .16s linear;
}

.scale-beam {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 20%;
    height: 4px;
    background: linear-gradient(90deg, #B88A44, #F3E7C8, #B88A44);
    box-shadow: 0 0 18px rgba(184,138,68,.45);
}

.scale-beam::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -42px;
    width: 70px;
    height: 70px;
    border: 1px solid #B88A44;
    border-radius: 50%;
    transform: translateX(-50%);
}

.chain {
    position: absolute;
    top: 3px;
    width: 1px;
    height: 24vh;
    background: repeating-linear-gradient(to bottom, #B88A44 0 6px, transparent 6px 10px);
}

.chain-left { left: 18%; }
.chain-right { right: 18%; }

.scale-pan {
    position: absolute;
    top: 55%;
    width: 190px;
    height: 74px;
    border: 1px solid #B88A44;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(243, 231, 200, .08);
    box-shadow: inset 0 -12px 22px rgba(184,138,68,.18), 0 18px 48px rgba(0,0,0,.32);
}

.left-pan { left: 2%; transform: translateY(var(--pan-offset)); }
.right-pan { right: 2%; transform: translateY(calc(var(--pan-offset) * -1)); }

.scale-pan b {
    color: #F3E7C8;
    font-family: "Fraunces", serif;
    font-size: 34px;
}

.balance-bead {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1DD6C3;
    box-shadow: 0 0 22px #1DD6C3;
    animation: beadFloat 3.6s ease-in-out infinite;
}

.bead-one { left: 24%; bottom: 12%; }
.bead-two { left: 52%; top: 8%; background: #6C4CFF; box-shadow: 0 0 22px #6C4CFF; animation-delay: -1.2s; }
.bead-three { right: 22%; bottom: 18%; background: #B88A44; box-shadow: 0 0 22px #B88A44; animation-delay: -.4s; }

.signal-copy {
    left: auto;
    right: 8vw;
    top: 52vh;
    width: min(34vw, 480px);
}

.seal-composition {
    position: absolute;
    left: 8vw;
    top: 16vh;
    width: 70vw;
    min-height: 68vh;
    display: grid;
    align-content: center;
    border: 1px solid rgba(184, 138, 68, .32);
    background:
        radial-gradient(circle at 58% 45%, rgba(108,76,255,.18), transparent 28%),
        rgba(8,7,11,.42);
    padding: 5vw;
    transform: rotate(-2deg);
}

.final-name {
    color: transparent;
    -webkit-text-stroke: 1px #F3E7C8;
    text-shadow: 0 0 36px rgba(29,214,195,.22);
}

.assay-seal {
    position: absolute;
    right: 10%;
    top: 21%;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: rotate(-14deg) scale(var(--seal-scale, .92));
    filter: drop-shadow(0 0 28px rgba(108,76,255,.42));
}

.seal-ring {
    position: absolute;
    border-radius: 50%;
}

.ring-one {
    inset: 0;
    border: 4px double #B88A44;
    background: radial-gradient(circle, rgba(108,76,255,.22), rgba(8,7,11,.14) 62%, rgba(184,138,68,.2));
}

.ring-two {
    inset: 28px;
    border: 1px solid #1DD6C3;
    box-shadow: inset 0 0 20px rgba(29,214,195,.2);
}

.seal-mark {
    position: relative;
    font-family: "Fraunces", serif;
    font-size: 104px;
    color: #F3E7C8;
}

.seal-caption {
    position: absolute;
    bottom: 44px;
    color: #1DD6C3;
}

@keyframes railGlint {
    0% { transform: translateX(0); opacity: 0; }
    18% { opacity: 1; }
    65% { opacity: .75; }
    100% { transform: translateX(650%); opacity: 0; }
}

@keyframes beadFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

@media (max-width: 840px) {
    .tool-tabs {
        right: 10px;
        left: 10px;
        justify-content: center;
        gap: 4px;
    }

    .tool-tabs a {
        padding: 7px 6px;
        font-size: 9px;
    }

    .chamber-room {
        padding: 12vh 6vw;
    }

    .artifact-plinth,
    .split-copy,
    .shadow-specimen,
    .signal-copy,
    .seal-composition {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        margin-top: 8vh;
    }

    .facet-prism {
        position: relative;
        right: auto;
        top: auto;
        width: 86vw;
        height: 86vw;
        margin-top: 15vh;
    }

    .intro-note,
    .appraisal-tag,
    .glass-ledger,
    .ritual-control,
    .scale-stage,
    .risk-shadow,
    .caliper-lines {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        margin: 24px 0;
    }

    .scale-stage {
        height: 46vh;
    }

    .assay-seal {
        position: relative;
        right: auto;
        top: auto;
        margin: 20px auto;
    }
}