:root {
    --black: #07100D;
    --green: #38FF8E;
    --mint: #B8FFD9;
    --copper: #B87333;
    --violet: #6F58FF;
    --paper: #D7D2C3;
    --cyan: #35D6FF;
    --rust: #B94A3D;
}

/* Typography compliance tokens: Space Grotesk** with tight tracking; Instrument Serif and sparse JetBrains Mono only for bin codes. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--black);
    color: var(--paper);
    font-family: "Space Grotesk", sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(56,255,142,.14), transparent 24vw),
        radial-gradient(circle at 86% 42%, rgba(111,88,255,.16), transparent 28vw),
        radial-gradient(circle at 50% 82%, rgba(185,74,61,.18), transparent 32vw),
        linear-gradient(90deg, rgba(215,210,195,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(215,210,195,.025) 1px, transparent 1px);
    background-size: auto, auto, auto, 72px 72px, 72px 72px;
    mix-blend-mode: screen;
    z-index: 0;
}

.grain-field {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .18;
    background-image:
        repeating-radial-gradient(circle at 20% 30%, rgba(215,210,195,.7) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(113deg, transparent 0 9px, rgba(56,255,142,.12) 10px, transparent 11px 28px);
    mix-blend-mode: overlay;
}

#pixelDust {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.machine-hud {
    position: fixed;
    top: 22px;
    left: 24px;
    right: 24px;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.glyph-nav,
.salvage-ticket {
    pointer-events: auto;
    cursor: pointer;
    color: var(--mint);
    background: rgba(7,16,13,.64);
    border: 1px solid rgba(56,255,142,.45);
    box-shadow: 0 0 28px rgba(56,255,142,.12), inset 0 0 20px rgba(56,255,142,.08);
}

.glyph-nav {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    position: relative;
    animation: glyphSpin 9s linear infinite;
}

.glyph-nav span {
    position: absolute;
    width: 26px;
    height: 18px;
    clip-path: polygon(0 25%, 58% 25%, 58% 0, 100% 50%, 58% 100%, 58% 75%, 0 75%);
    background: var(--green);
    top: 20px;
    left: 16px;
    transform-origin: 13px 9px;
}

.glyph-nav span:nth-child(1) { transform: rotate(12deg) translateX(8px); }
.glyph-nav span:nth-child(2) { transform: rotate(132deg) translateX(8px); background: var(--cyan); }
.glyph-nav span:nth-child(3) { transform: rotate(252deg) translateX(8px); background: var(--violet); }

.hud-readout,
.bin-code,
.checksum-stamp,
.inspection-tag small {
    font-family: "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hud-readout {
    padding: 12px 14px;
    border: 1px solid rgba(184,255,217,.22);
    background: rgba(7,16,13,.58);
    color: rgba(184,255,217,.78);
    font-size: 11px;
}

.sorting-loop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500vh;
    z-index: 2;
    pointer-events: none;
}

.loop-shadow,
.loop-rail,
.loop-energy { fill: none; }
.loop-shadow { stroke: rgba(0,0,0,.75); stroke-width: 56; }
.loop-rail { stroke: rgba(215,210,195,.18); stroke-width: 22; stroke-dasharray: 6 16; }
.loop-energy { stroke: url(#loopGradient); stroke-width: 5; stroke-dasharray: 1 24; animation: conveyorMove 1.8s linear infinite; }

.zone {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 4;
    isolation: isolate;
}

.zone::after {
    content: attr(data-stage);
    position: absolute;
    right: 4vw;
    bottom: 4vh;
    font: 700 clamp(90px, 20vw, 280px)/.75 "JetBrains Mono", monospace;
    color: transparent;
    -webkit-text-stroke: 1px rgba(215,210,195,.1);
    z-index: -1;
}

.cache-bay {
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at 50% 82%, rgba(56,255,142,.12), transparent 38%), var(--black);
}

.bay-floor {
    position: absolute;
    width: 110vw;
    height: 26vh;
    bottom: -7vh;
    left: -5vw;
    background: linear-gradient(0deg, rgba(56,255,142,.11), transparent), repeating-linear-gradient(90deg, rgba(184,255,217,.08) 0 2px, transparent 2px 42px);
    transform: skewY(-4deg);
    border-top: 1px solid rgba(56,255,142,.28);
}

.hero-pile {
    width: min(92vw, 1120px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2px, .5vw, 8px);
    padding: 12vh 3vw;
    perspective: 900px;
}

.hero-pile span {
    display: inline-block;
    font: 700 clamp(42px, 10vw, 156px)/.85 "Space Grotesk", sans-serif;
    letter-spacing: -.08em;
    color: rgba(215,210,195,.36);
    text-shadow: 0 0 2px var(--mint);
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.94);
    transition: transform 900ms cubic-bezier(.2,1,.2,1), color 700ms, text-shadow 700ms;
}

.hero-pile.locked span {
    color: var(--green);
    text-shadow: 0 0 22px rgba(56,255,142,.64), 5px 5px 0 rgba(111,88,255,.38);
    transform: translate(0, 0) rotate(0) scale(1);
}

.scanner-beam {
    position: absolute;
    top: 8vh;
    left: -18vw;
    width: 14vw;
    height: 86vh;
    background: linear-gradient(90deg, transparent, rgba(56,255,142,.1), rgba(184,255,217,.72), rgba(53,214,255,.16), transparent);
    mix-blend-mode: screen;
    filter: blur(2px);
    animation: scanBay 4.8s ease-in-out infinite;
}

.inspection-tag,
.acetate-sheet,
.signal-card {
    border: 1px solid rgba(184,255,217,.24);
    background: linear-gradient(135deg, rgba(215,210,195,.11), rgba(7,16,13,.66));
    box-shadow: 0 24px 90px rgba(0,0,0,.35), inset 0 0 40px rgba(184,255,217,.04);
    backdrop-filter: blur(9px);
}

.inspection-tag {
    position: absolute;
    padding: 14px 18px;
    max-width: 330px;
    color: var(--paper);
    clip-path: polygon(0 8%, 91% 0, 100% 68%, 88% 100%, 6% 94%);
}

.inspection-tag p { margin: 8px 0 0; font-family: "Instrument Serif", serif; font-size: 23px; line-height: 1.05; }
.hero-tag { left: 8vw; bottom: 18vh; transform: rotate(-8deg); }
.floating-tag { right: 12vw; top: 22vh; transform: rotate(7deg); }

.checksum-stamp {
    position: absolute;
    color: var(--copper);
    border: 1px solid currentColor;
    padding: 9px 12px;
    font-size: 12px;
    transform: rotate(6deg);
    mix-blend-mode: screen;
}
.cache-bay .checksum-stamp { right: 9vw; bottom: 24vh; }

.orbit {
    position: absolute;
    inset: 7vh 5vw;
    animation: slowOrbit 26s linear infinite;
}

.scrap {
    position: absolute;
    display: block;
    border: 1px solid rgba(184,255,217,.32);
    background: rgba(215,210,195,.07);
    box-shadow: 0 0 18px rgba(53,214,255,.16);
}
.scrap.cursor { width: 38px; height: 48px; left: 18%; top: 18%; clip-path: polygon(0 0, 88% 58%, 54% 64%, 70% 100%, 47% 100%, 31% 69%, 0 92%); background: var(--mint); opacity: .42; }
.scrap.tab { width: 90px; height: 44px; right: 16%; top: 24%; border-radius: 12px 12px 2px 2px; }
.scrap.chip { width: 56px; height: 56px; left: 72%; bottom: 16%; background: repeating-linear-gradient(90deg, rgba(56,255,142,.3) 0 2px, transparent 2px 8px); }
.scrap.floppy { width: 58px; height: 70px; left: 9%; bottom: 30%; clip-path: polygon(0 0, 78% 0, 100% 20%, 100% 100%, 0 100%); }
.scrap.qr { width: 66px; height: 66px; right: 33%; bottom: 8%; background: conic-gradient(from 90deg, var(--violet) 0 25%, transparent 0 50%, var(--cyan) 0 75%, transparent 0); opacity: .5; }

.shredder-rain {
    background: radial-gradient(circle at 82% 20%, rgba(185,74,61,.18), transparent 28%), linear-gradient(180deg, var(--black), #0b120f);
}

.rain-column {
    position: absolute;
    inset: -10vh 0;
    overflow: hidden;
}

.tile {
    position: absolute;
    width: var(--s);
    height: var(--s);
    left: var(--x);
    top: -10vh;
    background: var(--c);
    opacity: .72;
    clip-path: polygon(10% 0, 100% 14%, 84% 100%, 0 80%);
    animation: shredFall var(--dur) linear infinite;
    animation-delay: var(--delay);
}

.shred-mask {
    position: absolute;
    left: 8vw;
    top: 12vh;
    width: 70vw;
    font: 700 clamp(58px, 13vw, 190px)/.8 "Space Grotesk", sans-serif;
    letter-spacing: -.08em;
    color: rgba(215,210,195,.05);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 22px);
    mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 22px);
}

.acetate-sheet {
    position: absolute;
    width: min(600px, 78vw);
    padding: clamp(28px, 5vw, 58px);
    clip-path: polygon(0 8%, 94% 0, 100% 88%, 7% 100%);
}
.skew-left { left: 9vw; bottom: 15vh; transform: rotate(-5deg); }
.skew-right { right: 8vw; top: 18vh; transform: rotate(5deg); }
.heat-sheet { left: 9vw; top: 18vh; transform: rotate(-3deg); }

h1 {
    margin: 10px 0 14px;
    font: 700 clamp(46px, 8vw, 118px)/.82 "Space Grotesk", sans-serif;
    letter-spacing: -.075em;
    color: var(--paper);
}

.acetate-sheet p,
.signal-card p {
    margin: 0;
    font: 400 clamp(22px, 3.1vw, 42px)/1.05 "Instrument Serif", serif;
    color: var(--mint);
}

.bin-code { color: var(--cyan); font-size: 12px; }

.magnet-river { background: radial-gradient(circle at 18% 65%, rgba(53,214,255,.18), transparent 32%), var(--black); }
.river-band {
    position: absolute;
    width: 150vw;
    height: 30vh;
    left: -25vw;
    top: 42vh;
    transform: rotate(-11deg);
    background: linear-gradient(90deg, transparent, rgba(111,88,255,.42), rgba(53,214,255,.5), rgba(184,255,217,.18), transparent);
    filter: blur(1px);
}

.magnet-lines span {
    position: absolute;
    left: -12vw;
    width: 124vw;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
    transform: rotate(-11deg);
    animation: riverPulse 3s ease-in-out infinite;
}
.magnet-lines span:nth-child(1) { top: 31vh; }
.magnet-lines span:nth-child(2) { top: 39vh; animation-delay: -.4s; }
.magnet-lines span:nth-child(3) { top: 47vh; animation-delay: -.8s; }
.magnet-lines span:nth-child(4) { top: 55vh; animation-delay: -1.2s; }
.magnet-lines span:nth-child(5) { top: 63vh; animation-delay: -1.6s; }

.barcode-reeds {
    position: absolute;
    left: 10vw;
    bottom: 12vh;
    height: 28vh;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    transform: skewX(-11deg);
}
.barcode-reeds b { display: block; width: 7px; height: var(--h); background: var(--mint); box-shadow: 0 0 18px rgba(184,255,217,.4); }
.barcode-reeds b:nth-child(1) { --h: 55%; }.barcode-reeds b:nth-child(2) { --h: 82%; }.barcode-reeds b:nth-child(3) { --h: 35%; }.barcode-reeds b:nth-child(4) { --h: 100%; }.barcode-reeds b:nth-child(5) { --h: 62%; }.barcode-reeds b:nth-child(6) { --h: 44%; }.barcode-reeds b:nth-child(7) { --h: 76%; }.barcode-reeds b:nth-child(8) { --h: 90%; }

.refactor-furnace {
    background: radial-gradient(circle at 68% 54%, rgba(185,74,61,.42), transparent 33%), radial-gradient(circle at 62% 58%, rgba(184,115,51,.35), transparent 24%), var(--black);
}

.furnace-mouth {
    position: absolute;
    right: -16vw;
    bottom: 5vh;
    width: 72vw;
    height: 60vh;
    border-radius: 50% 0 0 50%;
    background: radial-gradient(ellipse at 55% 50%, var(--paper) 0 2%, var(--green) 3% 7%, var(--copper) 20%, var(--rust) 46%, rgba(185,74,61,.18) 62%, transparent 72%);
    filter: blur(.5px);
    animation: furnaceBreath 3.4s ease-in-out infinite;
}

.molten-ui span {
    position: absolute;
    width: clamp(80px, 12vw, 180px);
    height: clamp(36px, 7vw, 82px);
    border-radius: 40px 12px 44px 16px;
    background: linear-gradient(90deg, var(--copper), var(--rust), var(--green));
    box-shadow: 0 0 44px rgba(185,74,61,.45);
    animation: moltenDrift 6s ease-in-out infinite;
}
.molten-ui span:nth-child(1) { right: 24vw; top: 22vh; }
.molten-ui span:nth-child(2) { right: 12vw; top: 42vh; animation-delay: -1.5s; }
.molten-ui span:nth-child(3) { right: 36vw; bottom: 18vh; animation-delay: -3s; }
.molten-ui span:nth-child(4) { right: 6vw; bottom: 12vh; animation-delay: -4.5s; }
.furnace-stamp { right: 14vw; top: 18vh; color: var(--rust); }

.second-signal {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 48%, rgba(56,255,142,.18), transparent 36%), linear-gradient(180deg, #0b120f, var(--black));
}

.pixel-compost {
    position: absolute;
    width: min(78vw, 760px);
    height: min(78vw, 760px);
    border-radius: 50%;
    animation: slowOrbit 28s linear infinite reverse;
}

.compost-bit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--s);
    height: var(--s);
    background: var(--c);
    transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
    clip-path: var(--shape);
    box-shadow: 0 0 18px currentColor;
}

.signal-card {
    width: min(760px, 86vw);
    padding: clamp(34px, 6vw, 72px);
    text-align: center;
    clip-path: polygon(7% 0, 100% 4%, 92% 100%, 0 91%);
    z-index: 3;
}

.salvage-ticket {
    margin-top: 28px;
    padding: 14px 22px;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--green);
    border-color: var(--green);
    transform: rotate(-2deg);
}

.regenerated-seed {
    position: absolute;
    left: 50%;
    bottom: 12vh;
    width: 18px;
    height: 18px;
    background: var(--green);
    box-shadow: 0 0 28px var(--green), 0 0 70px var(--cyan);
    animation: seedLoop 3.6s ease-in-out infinite;
}

@keyframes glyphSpin { to { transform: rotate(360deg); } }
@keyframes conveyorMove { to { stroke-dashoffset: -25; } }
@keyframes scanBay { 0%, 100% { transform: translateX(0) skewX(-8deg); opacity: .18; } 45%, 58% { opacity: .9; } 70% { transform: translateX(132vw) skewX(-8deg); opacity: .2; } }
@keyframes slowOrbit { to { transform: rotate(360deg); } }
@keyframes shredFall { to { transform: translateY(122vh) rotate(540deg); } }
@keyframes riverPulse { 0%, 100% { opacity: .22; filter: blur(0); } 50% { opacity: .9; filter: blur(2px); } }
@keyframes furnaceBreath { 0%, 100% { transform: scale(.98); opacity: .78; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes moltenDrift { 0%, 100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(-4vw, 3vh) rotate(8deg); } }
@keyframes seedLoop { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -38vh) scale(.55) rotate(180deg); } }

@media (max-width: 760px) {
    .hud-readout { display: none; }
    .acetate-sheet { width: 86vw; left: 7vw; right: auto; }
    .skew-right { top: 12vh; }
    .hero-tag { left: 5vw; bottom: 14vh; }
    .floating-tag { right: 5vw; top: 60vh; }
}