:root {
    /* DESIGN typography tokens: IBM Plex Sans Condensed** Condense* for inspection-tag headings; JetBrains Mono sparingly for tiny depth readings. */
    --asphalt: #101112;
    --graphite: #2A2D2B;
    --chalk: #F1E9D2;
    --vermilion: #FF4B2B;
    --bubble: #76F7A0;
    --amber: #F7B538;
    --clay: #6B4A32;
    --blueprint: #234E70;
    --archivo: 'Archivo Black', sans-serif;
    --condensed: 'IBM Plex Sans Condensed', sans-serif;
    --news: 'Newsreader', serif;
    --mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--asphalt); }

body {
    margin: 0;
    color: var(--chalk);
    background: var(--asphalt);
    font-family: var(--condensed);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .25;
    background-image: radial-gradient(circle at 20% 30%, rgba(241,233,210,.16) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(247,181,56,.12) 0 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03), transparent 18%, rgba(0,0,0,.08) 55%);
    background-size: 19px 17px, 29px 31px, 100% 100%;
    mix-blend-mode: overlay;
}

.dust-field { position: fixed; inset: 0; pointer-events: none; z-index: 16; overflow: hidden; }
.dust {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(241,233,210,.55);
    transform: translate3d(var(--x), var(--y), 0);
    opacity: var(--o);
}

.elevator-panel {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 76px;
    padding: 10px 8px 12px;
    border: 1px solid rgba(241,233,210,.35);
    background: linear-gradient(180deg, rgba(42,45,43,.94), rgba(16,17,18,.96));
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 16px 45px rgba(0,0,0,.45);
}

.panel-title, .depth-readout, .tag-code, .plate-stencil, .street-markings, .level-label, .pipe span, .rack span, .measurement-tape span {
    font-family: var(--mono);
    letter-spacing: .08em;
}

.panel-title { font-size: 10px; color: var(--amber); text-align: center; margin-bottom: 8px; }

.floor-button {
    display: block;
    width: 100%;
    height: 40px;
    margin: 7px 0;
    color: var(--chalk);
    background: #101112;
    border: 1px solid rgba(241,233,210,.35);
    font-family: var(--archivo);
    font-size: 12px;
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, color .25s ease, background .25s ease;
}

.floor-button.active { color: var(--asphalt); background: var(--bubble); border-color: var(--bubble); transform: translateY(2px); }
.depth-readout { writing-mode: vertical-rl; margin: 10px auto 0; font-size: 9px; color: rgba(241,233,210,.7); }

.descent { position: relative; }
.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid rgba(241,233,210,.16);
}

.scene::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(241,233,210,.04) 39px 40px), repeating-linear-gradient(90deg, transparent 0 78px, rgba(241,233,210,.025) 79px 80px);
}

.scene-street { background: linear-gradient(180deg, #234E70 0 2.8%, #101112 2.9% 58%, #2A2D2B 58% 100%); }
.daylight-slit { height: 3vh; background: linear-gradient(90deg, var(--blueprint), var(--amber), var(--chalk), var(--blueprint)); opacity: .9; }
.street-markings { position: absolute; top: 9vh; left: 6vw; right: 112px; display: flex; justify-content: space-between; color: rgba(241,233,210,.54); font-size: 11px; }
.curb-slab { position: absolute; left: 0; right: 0; bottom: -9vh; height: 42vh; background: linear-gradient(180deg, #2A2D2B, #101112 65%); border-top: 14px solid rgba(241,233,210,.22); box-shadow: inset 0 12px 0 rgba(0,0,0,.28); }
.warning-stripe { position: absolute; left: 0; right: 0; top: 16px; height: 18px; background: repeating-linear-gradient(135deg, var(--amber) 0 22px, var(--asphalt) 22px 44px); opacity: .9; }
h1 { position: absolute; left: 5vw; bottom: -3.6vw; margin: 0; font-family: var(--archivo); font-size: clamp(5rem, 17vw, 17rem); line-height: .72; letter-spacing: -.09em; color: var(--chalk); text-shadow: 0 12px 0 rgba(255,75,43,.2); }
.scene-note { position: absolute; right: 12vw; bottom: 18vh; width: min(430px, 54vw); font-family: var(--news); font-size: clamp(1.45rem, 2.4vw, 2.6rem); line-height: 1.05; color: rgba(241,233,210,.88); }

.scene-gravel { background: linear-gradient(180deg, #101112 0 15%, #6B4A32 15% 55%, #2A2D2B 55% 100%); }
.strata { position: absolute; left: -5vw; right: -5vw; transform: translateY(var(--drift, 0)); transition: transform .2s linear; }
.strata-pavement { top: 0; height: 28vh; background: var(--graphite); clip-path: polygon(0 0,100% 0,100% 71%,84% 62%,68% 76%,49% 60%,30% 72%,12% 61%,0 78%); }
.strata-gravel { top: 24vh; height: 54vh; background: radial-gradient(circle, rgba(241,233,210,.12) 0 2px, transparent 3px), linear-gradient(180deg, #6B4A32, #2A2D2B); background-size: 22px 18px, 100% 100%; clip-path: polygon(0 13%,12% 6%,27% 16%,45% 8%,61% 21%,77% 11%,100% 19%,100% 100%,0 100%); }
.shaft-line { position: absolute; top: 0; bottom: 0; left: 17vw; width: 2px; background: linear-gradient(var(--chalk), transparent); opacity: .45; }
.cutaway-window { position: absolute; left: 22vw; bottom: 21vh; width: 44vw; height: 30vh; border: 2px solid rgba(241,233,210,.42); background: rgba(16,17,18,.34); transform: skewY(-2deg); }
.pipe { position: absolute; left: -2vw; right: -2vw; height: 24px; border: 2px solid rgba(241,233,210,.22); border-radius: 999px; background: #234E70; }
.pipe-one { top: 25%; } .pipe-two { top: 50%; background: #6B4A32; } .pipe-three { top: 73%; background: #101112; }
.pipe span { color: var(--chalk); font-size: 10px; padding-left: 22px; line-height: 21px; }

.inspection-tag, .blueprint-callout { position: absolute; left: 7vw; bottom: 7vh; width: min(470px, 72vw); padding: 22px 24px; border: 1px solid rgba(241,233,210,.42); background: rgba(16,17,18,.72); box-shadow: 9px 9px 0 rgba(255,75,43,.32); transform: translateY(34px); opacity: .2; transition: transform .8s cubic-bezier(.2,1.25,.2,1), opacity .8s ease; }
.settle-label.settled { transform: translateY(0); opacity: 1; }
.tag-code { display: block; color: var(--bubble); font-size: 11px; margin-bottom: 8px; }
h2 { margin: 0 0 10px; font-family: var(--archivo); font-size: clamp(2.2rem, 5vw, 5.4rem); line-height: .88; letter-spacing: -.06em; text-transform: lowercase; }
.spirit-level, .final-level { position: absolute; right: 12vw; bottom: 15vh; width: 240px; padding: 12px; border: 2px solid var(--chalk); background: rgba(16,17,18,.82); transform: rotate(-2deg); }
.level-track { position: relative; height: 28px; border: 1px solid rgba(241,233,210,.45); border-radius: 999px; background: rgba(35,78,112,.55); overflow: hidden; }
.bubble { position: absolute; left: calc(50% - 18px + var(--bubble-shift, 0px)); top: 5px; width: 36px; height: 16px; border-radius: 999px; background: var(--bubble); box-shadow: 0 0 18px rgba(118,247,160,.75); transition: left .12s ease-out; }
.level-label { display: block; margin-top: 8px; font-size: 10px; color: rgba(241,233,210,.64); }

.scene-crawlspace { background: linear-gradient(180deg, #2A2D2B 0 18%, #101112 18% 68%, #234E70 68% 100%); }
.retaining-wall { position: absolute; top: 0; bottom: 0; width: 22vw; background: repeating-linear-gradient(180deg, rgba(241,233,210,.07) 0 2px, transparent 2px 42px), var(--graphite); }
.left-wall { left: -7vw; transform: skewX(-8deg); } .right-wall { right: -12vw; transform: skewX(10deg); }
.server-crawl { position: absolute; left: 16vw; right: 12vw; bottom: 10vh; height: 38vh; border-bottom: 12px solid var(--clay); }
.rack { position: absolute; left: 9vw; bottom: 38px; width: 210px; border: 1px solid rgba(118,247,160,.5); background: rgba(35,78,112,.28); padding: 12px; }
.rack span { display: block; padding: 9px 8px; margin: 7px 0; border: 1px solid rgba(241,233,210,.18); font-size: 11px; color: var(--bubble); }
.drain-grate { position: absolute; right: 10vw; bottom: 0; width: 190px; height: 44px; background: repeating-linear-gradient(90deg, var(--chalk) 0 4px, transparent 4px 18px); opacity: .35; }
.chalk-x { position: absolute; left: 46%; bottom: 42%; font-family: var(--archivo); font-size: 9rem; color: rgba(241,233,210,.2); transform: rotate(-14deg); }
.plumb { position: absolute; top: 3vh; left: 48vw; width: 54px; height: 56vh; transform-origin: 50% 0; }
.plumb-line { margin: 0 auto; width: 2px; height: calc(100% - 54px); background: rgba(241,233,210,.66); }
.plumb-weight { width: 44px; height: 58px; margin: 0 auto; background: var(--vermilion); clip-path: polygon(50% 0,100% 70%,50% 100%,0 70%); box-shadow: 0 0 22px rgba(255,75,43,.35); }
.blueprint-callout { left: auto; right: 13vw; bottom: 12vh; background: rgba(35,78,112,.8); box-shadow: -9px 9px 0 rgba(247,181,56,.28); }

.scene-bedrock { background: linear-gradient(180deg, #234E70 0 14%, #2A2D2B 14% 52%, #101112 52% 100%); }
.scene-bedrock::after { content: ''; position: absolute; inset: 24vh -8vw 0; background: linear-gradient(135deg, transparent 0 20%, rgba(241,233,210,.06) 20% 21%, transparent 21% 45%, rgba(241,233,210,.06) 45% 46%, transparent 46%); clip-path: polygon(0 8%,12% 0,27% 10%,44% 3%,63% 14%,79% 5%,100% 11%,100% 100%,0 100%); }
.core-sample { position: absolute; left: 10vw; bottom: 18vh; width: 110px; height: 56vh; border: 2px solid rgba(241,233,210,.42); border-radius: 60px; overflow: hidden; box-shadow: inset 0 0 24px rgba(0,0,0,.5); }
.core-sample span { display: block; height: 25%; } .core-sample span:nth-child(1){background:#6B4A32}.core-sample span:nth-child(2){background:#2A2D2B}.core-sample span:nth-child(3){background:#234E70}.core-sample span:nth-child(4){background:#101112}
.folded-map { position: absolute; right: 12vw; top: 20vh; width: 270px; padding: 20px; color: var(--asphalt); background: var(--chalk); transform: rotate(7deg); clip-path: polygon(0 0,82% 0,100% 20%,100% 100%,0 100%); box-shadow: 16px 20px 0 rgba(0,0,0,.32); }
.folded-map b { display: block; font-family: var(--archivo); font-size: 1.7rem; letter-spacing: -.06em; } .folded-map em { font-family: var(--news); }
.measurement-tape { position: absolute; left: 26vw; right: 8vw; bottom: 9vh; height: 34px; border-top: 3px solid var(--amber); background: repeating-linear-gradient(90deg, var(--amber) 0 2px, transparent 2px 27px); display: flex; justify-content: space-between; color: var(--amber); }
.measurement-tape span { font-size: 10px; padding-top: 12px; }
.bedrock-tag { left: 25vw; bottom: 18vh; width: min(560px, 58vw); }

.scene-root { min-height: 112vh; background: radial-gradient(circle at 50% 80%, rgba(118,247,160,.34), transparent 28%), linear-gradient(180deg, #101112, #2A2D2B 42%, #101112); }
.root-glow { position: absolute; left: 50%; bottom: -18vh; width: 72vw; height: 72vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(118,247,160,.32), rgba(247,181,56,.12) 34%, transparent 64%); filter: blur(8px); animation: glowPulse 4s ease-in-out infinite; }
.root-chamber { position: absolute; left: 8vw; right: 9vw; bottom: 9vh; height: 67vh; border: 2px solid rgba(241,233,210,.32); background: linear-gradient(180deg, rgba(16,17,18,.42), rgba(16,17,18,.84)); box-shadow: inset 0 -18px 0 rgba(118,247,160,.12); }
.worklight { position: absolute; top: 8vh; left: 50%; width: 28px; height: 28px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 70px 45px rgba(247,181,56,.18); animation: flicker 2.7s steps(5,end) infinite; }
.root-plate { position: absolute; left: 5vw; right: 5vw; bottom: 6vh; padding: 30px; border: 1px solid rgba(118,247,160,.45); background: rgba(16,17,18,.78); }
.plate-stencil { color: var(--amber); font-size: 12px; }
.maintenance-tags { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.maintenance-tags a { color: var(--asphalt); background: var(--bubble); border: 1px solid var(--bubble); padding: 12px 16px; text-decoration: none; font-family: var(--mono); font-size: 12px; text-transform: uppercase; box-shadow: 5px 5px 0 rgba(241,233,210,.16); }
.maintenance-tags a:nth-child(2) { background: transparent; color: var(--chalk); border-color: rgba(241,233,210,.45); }
.final-level { right: 7vw; bottom: 40vh; transform: rotate(1deg); }

@keyframes glowPulse { 50% { opacity: .62; transform: translateX(-50%) scale(1.04); } }
@keyframes flicker { 0%,100% { opacity: 1; } 42% { opacity: .74; } 49% { opacity: .96; } 76% { opacity: .65; } }

@media (max-width: 760px) {
    .elevator-panel { right: 8px; width: 60px; }
    .floor-button { height: 34px; font-size: 10px; }
    .street-markings { right: 78px; }
    .inspection-tag, .blueprint-callout, .bedrock-tag { left: 5vw; right: 72px; width: auto; }
    .cutaway-window { left: 8vw; width: 70vw; }
    .spirit-level, .final-level { right: 80px; width: 170px; }
    .folded-map { right: 82px; width: 210px; }
    .core-sample { left: 4vw; width: 70px; }
    .maintenance-tags a { font-size: 10px; }
}