:root {
    --dock-ink: #17212B;
    --oxide-green: #4E6B4A;
    --bruised-plum: #3B2C42;
    --safety-vermilion: #E24A2A;
    --kraft-ledger: #D8BF8A;
    --brass-tag: #C4933E;
    --cold-cyan: #73C7D8;
    --chalk-white: #F4EEDC;
    --grain: radial-gradient(circle at 24% 31%, rgba(244, 238, 220, .08) 0 1px, transparent 1px 6px), linear-gradient(110deg, rgba(23, 33, 43, .10), transparent 38%, rgba(59, 44, 66, .14));
    --tag-rotation: -4deg;
    --route-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--dock-ink);
    color: var(--chalk-white);
    font-family: Inter, sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: .34;
    background: var(--grain), repeating-linear-gradient(90deg, transparent 0 17px, rgba(244, 238, 220, .025) 18px 19px);
    mix-blend-mode: overlay;
}

.atlas-shell { position: relative; }

.binder-tabs {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab {
    font-family: "Archivo Narrow", sans-serif;
    font-size: 14px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dock-ink);
    background: var(--kraft-ledger);
    border: 0;
    border-left: 5px solid var(--brass-tag);
    padding: 10px 9px 10px 13px;
    writing-mode: vertical-rl;
    min-height: 96px;
    box-shadow: -7px 8px 0 rgba(0, 0, 0, .22);
    cursor: pointer;
    transition: transform .25s ease, background .25s ease;
}

.tab span { color: var(--safety-vermilion); font-family: "IBM Plex Mono", monospace; }
.tab.active, .tab:hover { background: var(--chalk-white); transform: translateX(-10px) rotate(-1deg); }

.route-string {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: .92;
}

#routePath {
    fill: none;
    stroke: var(--oxide-green);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1800;
    stroke-dashoffset: calc(1800 - (1800 * var(--route-progress)));
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.45));
}

.pin { fill: var(--brass-tag); stroke: var(--chalk-white); stroke-width: 3; }

.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 8vh 8vw;
    isolation: isolate;
}

.scene-label {
    position: relative;
    z-index: 10;
    display: inline-block;
    font-family: "IBM Plex Mono", monospace;
    color: var(--brass-tag);
    background: rgba(23, 33, 43, .74);
    border: 1px solid rgba(196, 147, 62, .5);
    padding: 8px 12px;
    transform: rotate(-2deg);
}

h1, h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    line-height: .9;
    margin: 0;
}

p { font-family: Literata, serif; line-height: 1.48; }
.mono, small { font-family: "IBM Plex Mono", monospace; }

.receiving {
    background: radial-gradient(circle at 70% 20%, rgba(216, 191, 138, .18), transparent 31%), linear-gradient(140deg, var(--dock-ink), var(--bruised-plum));
}

.pallet-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(244,238,220,.05) 2px, transparent 2px), linear-gradient(90deg, rgba(244,238,220,.05) 2px, transparent 2px);
    background-size: 86px 44px;
    transform: perspective(500px) rotateX(58deg) scale(1.7) translateY(25%);
    transform-origin: bottom;
    opacity: .45;
}

.dock-light { position: absolute; inset: -20% 20% 30% 45%; background: radial-gradient(ellipse, rgba(244,238,220,.24), transparent 62%); }

.crate-face {
    position: absolute;
    left: 7vw;
    top: 12vh;
    width: 68vw;
    min-height: 54vh;
    padding: 42px;
    background: repeating-linear-gradient(90deg, rgba(23,33,43,.18) 0 10px, transparent 10px 34px), var(--kraft-ledger);
    color: var(--dock-ink);
    border: 8px solid rgba(23, 33, 43, .55);
    box-shadow: 20px 28px 0 rgba(0,0,0,.28);
    transform: translateX(calc(var(--route-progress) * -22vw)) rotate(-1.5deg);
    transition: transform .2s linear;
}

.stencil, .tag-kicker { font-family: "Archivo Narrow", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; }
.crate-face h1 { font-size: clamp(64px, 11vw, 170px); letter-spacing: -.06em; text-transform: lowercase; }
.barcode { display: flex; gap: 7px; align-items: flex-end; height: 96px; margin-top: 32px; }
.barcode i { width: 10px; background: var(--dock-ink); height: calc(22px + var(--n, 1) * 12px); display: block; }
.barcode i:nth-child(2) { --n: 4; } .barcode i:nth-child(3) { --n: 2; } .barcode i:nth-child(4) { --n: 6; } .barcode i:nth-child(5) { --n: 3; } .barcode i:nth-child(6) { --n: 5; } .barcode i:nth-child(7) { --n: 2; }

.custody-tag, .patched-tag {
    width: min(410px, 80vw);
    background: var(--chalk-white);
    color: var(--dock-ink);
    padding: 56px 30px 28px;
    clip-path: polygon(10% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 10%);
    box-shadow: 14px 18px 0 rgba(0,0,0,.30);
    border: 2px solid rgba(23, 33, 43, .25);
}

.hero-tag {
    position: absolute;
    right: 12vw;
    top: 18vh;
    z-index: 14;
    transform-origin: 50% -80px;
    animation: tagSwing 4.8s ease-in-out infinite;
}

.hero-tag::before, .patched-tag::before { content: ""; position: absolute; width: 2px; height: 95px; background: var(--oxide-green); left: 50%; top: -90px; }
.eyelet { position: absolute; top: 19px; left: calc(50% - 13px); width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, transparent 0 8px, var(--brass-tag) 9px); }
.custody-tag h2, .patched-tag h2 { font-size: 44px; color: var(--bruised-plum); }
.custody-tag small, .patched-tag small { display: block; color: var(--safety-vermilion); margin-top: 18px; }

@keyframes tagSwing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } }

.chalk-arrow { position: absolute; bottom: 40px; left: 9vw; color: var(--cold-cyan); font-family: "IBM Plex Mono", monospace; transform: rotate(-3deg); }

.lading { background: linear-gradient(115deg, var(--bruised-plum), var(--dock-ink) 54%, #111820); }
.paper-stack { position: relative; width: min(950px, 78vw); height: 70vh; margin: 4vh auto 0; z-index: 10; }
.manifest { position: absolute; background: var(--kraft-ledger); color: var(--dock-ink); padding: 34px; box-shadow: 16px 19px 0 rgba(0,0,0,.25); border: 1px solid rgba(23,33,43,.3); transition: transform .35s ease; }
.manifest-a { left: 4%; top: 8%; width: 62%; transform: rotate(-3deg); }
.manifest-b { right: 6%; top: 23%; width: 42%; transform: rotate(4deg); background: rgba(244,238,220,.86); backdrop-filter: blur(2px); }
.manifest-c { left: 24%; bottom: 5%; width: 58%; transform: rotate(1.5deg); min-height: 170px; }
.paper-stack.shifted .manifest-a { transform: translate(-22px, -12px) rotate(-5deg); }
.paper-stack.shifted .manifest-b { transform: translate(20px, -18px) rotate(2deg); }
.paper-stack.shifted .manifest-c { transform: translate(12px, 24px) rotate(3deg); }
.clip-corner { position: absolute; right: 0; top: 0; border-top: 38px solid var(--dock-ink); border-left: 38px solid transparent; }
.manifest h2 { font-size: clamp(42px, 5vw, 76px); color: var(--dock-ink); }
.stamp-button, .customs-stamp { border: 2px solid var(--safety-vermilion); color: var(--safety-vermilion); background: transparent; font-family: "Archivo Narrow", sans-serif; text-transform: uppercase; letter-spacing: .18em; padding: 11px 18px; cursor: pointer; }
.rubber-stamp, .stamp-mark { border: 5px solid var(--safety-vermilion); color: var(--safety-vermilion); font-family: "Archivo Narrow", sans-serif; font-weight: 700; letter-spacing: .08em; text-align: center; display: inline-block; padding: 10px 16px; transform: rotate(-13deg); }
.rubber-stamp { opacity: 0; transition: opacity .2s ease; }
.paper-stack.stamped .rubber-stamp { opacity: 1; animation: stampHit .28s ease; }
@keyframes stampHit { 0% { transform: scale(1.7) rotate(-13deg); opacity: 0; } 100% { transform: scale(1) rotate(-13deg); opacity: 1; } }
.ledger-lines { height: 92px; background: repeating-linear-gradient(0deg, rgba(23,33,43,.26) 0 1px, transparent 1px 19px); }

.maze { background: linear-gradient(90deg, #111820, var(--dock-ink), var(--bruised-plum)); padding-right: 4vw; }
.maze-title { position: relative; z-index: 10; max-width: 780px; margin: 4vh 0 3vh 7vw; font-size: clamp(48px, 7vw, 105px); color: var(--chalk-white); }
.container-lanes { position: relative; z-index: 10; display: flex; height: 58vh; gap: 18px; align-items: stretch; transform: translateX(calc((.5 - var(--route-progress)) * 60px)); transition: transform .2s linear; }
.container-panel { flex: 1; min-width: 180px; padding: 28px 20px; color: var(--chalk-white); background: repeating-linear-gradient(0deg, rgba(244,238,220,.08) 0 8px, transparent 8px 42px), var(--oxide-green); border-left: 10px solid var(--brass-tag); box-shadow: 12px 16px 0 rgba(0,0,0,.3); transform: skewY(-1deg); transition: transform .3s ease, background .3s ease; }
.container-panel:nth-child(even) { background-color: var(--bruised-plum); transform: translateY(36px) skewY(1deg); }
.container-panel:hover { transform: translateY(-18px) skewY(0deg); background-color: var(--safety-vermilion); }
.container-panel span { font-family: "Archivo Narrow", sans-serif; font-size: 32px; letter-spacing: .16em; writing-mode: vertical-rl; }
.container-panel p { margin-top: 40px; font-size: 18px; }

.cold { background: radial-gradient(circle at 70% 28%, rgba(115,199,216,.4), transparent 32%), linear-gradient(130deg, var(--bruised-plum), #102532 58%, var(--dock-ink)); }
.vapor { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 40%, rgba(115,199,216,.22), transparent 34%), radial-gradient(ellipse at 70% 70%, rgba(244,238,220,.12), transparent 28%); filter: blur(10px); animation: vaporDrift 7s ease-in-out infinite alternate; }
@keyframes vaporDrift { from { transform: translateX(-3vw); opacity: .7; } to { transform: translateX(4vw); opacity: 1; } }
.cold-label { position: relative; z-index: 12; margin: 11vh 0 0 12vw; width: min(640px, 76vw); padding: 42px; color: var(--dock-ink); background: rgba(244,238,220,.78); border: 3px solid var(--cold-cyan); box-shadow: 0 0 50px rgba(115,199,216,.35), 18px 21px 0 rgba(0,0,0,.24); }
.cold-label.fogged { filter: blur(.4px); }
.cold-label h2 { font-size: clamp(50px, 7vw, 112px); color: var(--bruised-plum); }
.thermo { height: 17px; background: rgba(23,33,43,.18); border: 1px solid var(--dock-ink); }
.thermo span { display: block; width: 62%; height: 100%; background: var(--cold-cyan); box-shadow: 0 0 18px var(--cold-cyan); }
.droplets i { position: absolute; width: 12px; height: 22px; border-radius: 50% 50% 55% 55%; background: rgba(115,199,216,.75); animation: drip 3.5s linear infinite; }
.droplets i:nth-child(1){ left:18%; top:20%; } .droplets i:nth-child(2){ left:66%; top:18%; animation-delay:.7s; } .droplets i:nth-child(3){ left:76%; top:48%; animation-delay:1.1s; } .droplets i:nth-child(4){ left:42%; top:34%; animation-delay:1.8s; } .droplets i:nth-child(5){ left:28%; top:68%; animation-delay:2.4s; } .droplets i:nth-child(6){ left:87%; top:72%; animation-delay:1.5s; }
@keyframes drip { 0% { transform: translateY(-20px); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }

.border { background: linear-gradient(120deg, var(--dock-ink), var(--bruised-plum)); }
.stamp-hall { position: relative; min-height: 70vh; z-index: 10; }
.onion-skin { width: min(690px, 76vw); margin: 9vh 0 0 11vw; padding: 44px; color: var(--dock-ink); background: rgba(244,238,220,.68); border: 2px solid rgba(216,191,138,.8); box-shadow: 22px 24px 0 rgba(0,0,0,.25); transform: rotate(-2deg); }
.onion-skin::after { content: ""; position: absolute; inset: 16px -24px -28px 34px; border: 2px dashed var(--safety-vermilion); opacity: .65; z-index: -1; }
.onion-skin h2 { font-size: clamp(52px, 7vw, 110px); color: var(--dock-ink); }
.customs-stamp { position: absolute; right: 20vw; top: 15vh; background: var(--chalk-white); transform: rotate(8deg); }
.stamp-mark { position: absolute; right: 13vw; top: 34vh; font-size: 42px; opacity: .2; transform: rotate(13deg) scale(.86); transition: opacity .2s ease, transform .2s ease; }
.stamp-mark.pressed { opacity: 1; transform: rotate(13deg) scale(1); animation: stampHit .25s ease; }

.repair { background: linear-gradient(145deg, #211925, var(--dock-ink) 60%, #121917); }
.annex-board { position: relative; z-index: 10; min-height: 72vh; margin-top: 5vh; background: repeating-linear-gradient(90deg, rgba(216,191,138,.11) 0 2px, transparent 2px 24px), rgba(216,191,138,.08); border: 1px solid rgba(216,191,138,.18); }
.patched-tag { position: absolute; left: 13vw; top: 12vh; transform: rotate(3deg); }
.patched-tag::after { content: ""; position: absolute; left: -14px; right: 38px; top: 54%; height: 42px; background: repeating-linear-gradient(45deg, var(--brass-tag) 0 8px, var(--kraft-ledger) 8px 16px); opacity: .9; mix-blend-mode: multiply; }
.repair-notes { position: absolute; right: 10vw; top: 19vh; display: grid; gap: 24px; }
.repair-notes span { font-family: "IBM Plex Mono", monospace; color: var(--chalk-white); border: 2px solid var(--oxide-green); padding: 18px 24px; background: rgba(78,107,74,.3); transform: rotate(-2deg); }
.repair-notes span:nth-child(2) { border-color: var(--brass-tag); transform: rotate(3deg); }
.repair-notes span:nth-child(3) { border-color: var(--safety-vermilion); transform: rotate(-5deg); }

@media (max-width: 820px) {
    .binder-tabs { display: none; }
    .scene { padding: 7vh 6vw; }
    .crate-face { position: relative; left: auto; top: auto; width: 92vw; min-height: 40vh; }
    .hero-tag { position: relative; right: auto; top: auto; margin: 12vh auto 0; }
    .paper-stack { width: 92vw; height: 85vh; }
    .manifest-a, .manifest-b, .manifest-c { width: 82%; left: 4%; right: auto; }
    .container-lanes { overflow-x: auto; }
    .container-panel { min-width: 250px; }
    .customs-stamp, .stamp-mark { position: relative; right: auto; top: auto; margin: 26px 0 0 12vw; }
    .patched-tag, .repair-notes { position: relative; left: auto; right: auto; top: auto; margin: 32px auto; }
}