:root {
    /* compliance tokens from DESIGN.md typography/parser: Interactions focus emergent group mistakes—backward queues Space Grotesk** readable narration specimen-guide Use **IBM Plex Mono only tiny simulation logs */
    --net-ink: #17141F;
    --aquarium-paper: #EAF7FF;
    --foam-banana: #FFE66D;
    --wrong-coral: #FF5A6E;
    --puddle-cyan: #41DCE1;
    --committee-purple: #7B4DFF;
    --grass-green: #9BE564;
    --swarm-density: 32;
    --route-color: #7B4DFF;
    --sign-rotation: -4deg;
    --misunderstanding-level: 0.62;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.paper-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: .32;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(23,20,31,.12) 0 1px, transparent 1.6px),
        radial-gradient(circle at 74% 44%, rgba(123,77,255,.12) 0 1px, transparent 1.4px),
        linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.4) 49% 50%, transparent 51% 100%);
    background-size: 29px 31px, 41px 37px, 100% 100%;
}

.map-legend {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 9;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    max-width: 430px;
    padding: 10px;
    border: 4px solid var(--net-ink);
    border-radius: 22px 12px 26px 14px;
    background: rgba(234,247,255,.82);
    box-shadow: 7px 7px 0 var(--committee-purple);
    transform: rotate(-1deg);
}

.legend-title, .map-legend a {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--net-ink);
    text-decoration: none;
}

.legend-title { width: 100%; font-weight: 700; }

.map-legend a {
    padding: 4px 7px;
    border: 2px solid var(--net-ink);
    border-radius: 999px;
    background: var(--foam-banana);
}

.preserve { position: relative; }

.scene {
    min-height: 100vh;
    padding: 72px clamp(14px, 4vw, 58px) 38px;
    display: grid;
    place-items: center;
    position: relative;
}

.scene::before {
    content: attr(data-misconception);
    position: absolute;
    right: 4vw;
    top: 88px;
    font-family: "DynaPuff", cursive;
    font-size: clamp(16px, 2.2vw, 30px);
    padding: 10px 18px;
    border: 4px solid var(--net-ink);
    background: var(--grass-green);
    transform: rotate(var(--sign-rotation));
    box-shadow: 6px 6px 0 var(--net-ink);
}

.arrival { background: radial-gradient(circle at 72% 30%, rgba(65,220,225,.5), transparent 23%), var(--aquarium-paper); }
.roundabout { background: linear-gradient(3deg, var(--foam-banana) 0 22%, var(--aquarium-paper) 22% 100%); }
.puddle { background: radial-gradient(circle at 50% 54%, rgba(65,220,225,.5), transparent 32%), var(--aquarium-paper); }
.queue { background: linear-gradient(90deg, rgba(155,229,100,.4) 0 18%, var(--aquarium-paper) 18% 100%); }
.theater { background: linear-gradient(180deg, var(--wrong-coral) 0 12%, var(--aquarium-paper) 12% 100%); }
.release { background: radial-gradient(circle at center, rgba(255,230,109,.65), transparent 34%), var(--aquarium-paper); }

.habitat-frame {
    width: min(1180px, 100%);
    min-height: 78vh;
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 5vw, 58px);
    border: 6px solid var(--net-ink);
    border-radius: 34px 20px 46px 26px;
    background: rgba(234,247,255,.78);
    box-shadow: 14px 14px 0 rgba(23,20,31,.15), inset 0 0 0 8px rgba(255,255,255,.45);
}

.habitat-frame::after {
    content: "";
    position: absolute;
    inset: 18px;
    pointer-events: none;
    border: 2px dashed rgba(23,20,31,.28);
    border-radius: inherit;
}

h1, h2 {
    margin: 0;
    font-family: "Chango", "Space Grotesk", sans-serif;
    line-height: .92;
    letter-spacing: -.04em;
    color: var(--net-ink);
    text-shadow: 5px 5px 0 var(--foam-banana), 9px 9px 0 var(--wrong-coral);
}

h1 { font-size: clamp(58px, 13vw, 170px); max-width: 1050px; }
h2 { font-size: clamp(38px, 7vw, 96px); max-width: 850px; }

.instruction, .scene-copy, .final-plaque {
    max-width: 680px;
    font-size: clamp(18px, 2vw, 27px);
    line-height: 1.15;
    font-weight: 700;
}

.instruction {
    display: inline-block;
    margin: 24px 0;
    padding: 14px 22px;
    border: 5px solid var(--net-ink);
    background: var(--foam-banana);
    font-family: "DynaPuff", cursive;
    transform: rotate(2deg);
}

.overhead-log, .log-strip, .specimen-note {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    text-transform: uppercase;
}

.stamp {
    position: absolute;
    right: 7%;
    top: 9%;
    z-index: 2;
    padding: 12px 18px;
    border: 5px solid var(--committee-purple);
    border-radius: 50%;
    color: var(--committee-purple);
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    transform: rotate(18deg);
}

.route-map, .portal-web {
    position: absolute;
    inset: auto 4% 4% 4%;
    height: 42%;
}

.route-svg, .web-svg { width: 100%; height: 100%; overflow: visible; }
.route-svg path, .web-svg path {
    fill: none;
    stroke: var(--route-color);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 22 18;
    animation: wrongDraw 7s linear infinite;
}

.node, .thumb {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 4px solid var(--net-ink);
    background: var(--puddle-cyan);
    border-radius: 50%;
    z-index: 1;
}
.n1 { left: 5%; top: 50%; } .n2 { left: 25%; top: 18%; } .n3 { left: 42%; top: 54%; } .n4 { left: 66%; top: 22%; } .n5 { left: 86%; top: 40%; }

.wrong-object, .center-sign, .ticket-machine, .door-wall, .prop, .final-plaque {
    border: 5px solid var(--net-ink);
    box-shadow: 8px 8px 0 var(--net-ink);
    font-family: "DynaPuff", cursive;
}

.wrong-object {
    position: absolute;
    right: 10%;
    bottom: 24%;
    padding: 18px 25px;
    background: var(--wrong-coral);
    font-size: 28px;
    transform: rotate(-7deg);
}

.swarm { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.agent {
    --agent-color: #FFE66D;
    position: absolute;
    width: var(--size, 24px);
    height: calc(var(--size, 24px) * 1.22);
    border: 3px solid var(--net-ink);
    border-radius: 52% 48% 44% 56%;
    background: var(--agent-color);
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    animation: drift var(--speed) ease-in-out infinite alternate;
    pointer-events: auto;
    padding: 0;
    cursor: pointer;
}

.agent.square { border-radius: 6px; }
.agent.cone { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.agent.cursor { border-radius: 70% 20% 70% 40%; }

.eyes::before, .eyes::after {
    content: "";
    position: absolute;
    top: 34%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--net-ink);
}
.eyes::before { left: 28%; } .eyes::after { right: 28%; }

.prop-bit {
    position: absolute;
    left: 58%;
    top: -7px;
    width: 14px;
    height: 10px;
    border: 2px solid var(--net-ink);
    background: var(--aquarium-paper);
    transform: rotate(23deg);
}

.thought {
    position: absolute;
    left: 50%;
    bottom: 120%;
    width: max-content;
    max-width: 160px;
    opacity: 0;
    padding: 7px 10px;
    border: 3px solid var(--net-ink);
    border-radius: 18px;
    background: white;
    font-family: "DynaPuff", cursive;
    font-size: 12px;
    transform: translateX(-50%) translateY(10px) rotate(-3deg);
    transition: opacity .22s ease, transform .22s ease;
}
.agent:hover .thought, .agent.revealed .thought { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-3deg); }

.roundabout-loop {
    position: absolute;
    right: 7%;
    top: 19%;
    width: min(44vw, 460px);
    aspect-ratio: 1;
    border: 18px solid var(--puddle-cyan);
    border-radius: 50%;
    outline: 6px dashed var(--net-ink);
    background: rgba(255,230,109,.38);
}
.center-sign { position: absolute; inset: 33%; display: grid; place-items: center; background: var(--foam-banana); font-size: 28px; text-align: center; }
.flip-sign { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%) rotate(3deg); border: 4px solid var(--net-ink); background: var(--wrong-coral); padding: 10px 14px; font-family: "DynaPuff"; cursor: pointer; }
.orbit-ticket { position: absolute; width: 52px; height: 38px; display: grid; place-items: center; border: 3px solid var(--net-ink); background: white; font-family: "IBM Plex Mono"; font-weight: 700; animation: orbit 9s linear infinite; }
.t1 { left: 48%; top: -8%; } .t2 { right: -5%; top: 46%; animation-delay: -2s; } .t3 { left: 45%; bottom: -8%; animation-delay: -4s; } .t4 { left: -5%; top: 45%; animation-delay: -6s; }

.arrow-yard { position: absolute; left: 6%; bottom: 9%; display: flex; flex-direction: column; gap: 12px; }
.arrow-yard span { width: max-content; padding: 10px 34px 10px 12px; border: 4px solid var(--net-ink); background: var(--grass-green); font-family: "DynaPuff"; transform: rotate(calc(var(--arrow-rot, 0deg) + var(--sign-rotation))); transition: transform .5s ease; }
.arrow-yard span::after { content: "➜"; margin-left: 12px; }

.puddle-stage { position: relative; height: 430px; margin-top: 20px; }
.puddle-core { position: absolute; left: 50%; top: 50%; width: 330px; height: 190px; border: 6px solid var(--net-ink); border-radius: 52% 48% 58% 42%; background: radial-gradient(circle at 35% 30%, white, var(--puddle-cyan) 38%, #41DCE1 70%); transform: translate(-50%, -50%); font-family: "DynaPuff"; font-size: 28px; cursor: pointer; box-shadow: 12px 12px 0 rgba(123,77,255,.4); }
.ripples { position: absolute; left: 50%; top: 50%; width: 350px; height: 210px; border: 4px solid rgba(123,77,255,.5); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 2.4s infinite; pointer-events: none; }
.puddle-stage.ripple-now .ripples { animation-duration: .7s; }
.vote { position: absolute; padding: 8px 12px; border: 3px solid var(--net-ink); background: var(--foam-banana); font-family: "IBM Plex Mono"; animation: bob 2s ease-in-out infinite alternate; }
.v1 { left: 20%; top: 18%; } .v2 { right: 18%; top: 22%; animation-delay: -.3s; } .v3 { left: 15%; bottom: 25%; animation-delay: -.8s; } .v4 { right: 24%; bottom: 18%; animation-delay: -1s; } .v5 { left: 48%; top: 4%; animation-delay: -.5s; }
.log-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.log-strip span { padding: 8px; background: var(--net-ink); color: var(--aquarium-paper); }

.queue-lane { position: absolute; left: 8%; right: 8%; bottom: 14%; height: 160px; border: 5px dashed var(--net-ink); border-radius: 80px; background: rgba(255,230,109,.42); }
.ticket-machine { position: absolute; right: 9%; top: 28%; padding: 18px 24px; background: var(--foam-banana); font-size: 25px; cursor: pointer; transform: rotate(4deg); }
.counter-window { position: absolute; right: 30px; top: -65px; padding: 12px 18px; border: 4px solid var(--net-ink); background: var(--wrong-coral); font-family: "IBM Plex Mono"; font-weight: 700; }
.door-wall { position: absolute; left: 9%; top: 28%; width: 190px; height: 250px; display: grid; place-items: center; text-align: center; background: var(--committee-purple); color: white; transform: rotate(-4deg); }
.door-wall span:first-child { font-size: 44px; color: var(--foam-banana); }

.stage-curtain { position: relative; height: 520px; margin-top: 22px; border: 5px solid var(--net-ink); background: linear-gradient(90deg, rgba(255,90,110,.35), rgba(234,247,255,.8)); }
.speech-cloud { position: absolute; inset: 20px; pointer-events: none; }
.speech-cloud span { position: absolute; opacity: .35; padding: 9px 13px; border: 3px solid var(--net-ink); border-radius: 20px; background: white; font-family: "DynaPuff"; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.speech-cloud span:nth-child(1) { left: 8%; top: 18%; } .speech-cloud span:nth-child(2) { right: 12%; top: 12%; } .speech-cloud span:nth-child(3) { left: 28%; bottom: 16%; } .speech-cloud span:nth-child(4) { right: 20%; bottom: 25%; }
.theater-frame:hover .speech-cloud span, .speech-cloud.loud span { opacity: 1; transform: translateY(0); }
.prop { position: absolute; padding: 16px; background: var(--grass-green); max-width: 170px; }
.prop-ladder { left: 13%; bottom: 15%; transform: rotate(8deg); } .prop-brain { right: 12%; top: 35%; background: var(--puddle-cyan); transform: rotate(-7deg); }

.portal-web { top: 28%; bottom: auto; height: 44%; }
.portal-ring { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; display: grid; place-items: center; border: 12px solid var(--committee-purple); border-radius: 50%; background: var(--foam-banana); font-family: "Chango"; transform: translate(-50%, -50%); animation: wobble 3s ease-in-out infinite; z-index: 2; }
.thumb { background: var(--wrong-coral); } .p1 { left: 10%; top: 66%; } .p2 { left: 49%; top: 16%; } .p3 { right: 10%; top: 65%; } .p4 { left: 50%; bottom: 7%; }
.final-plaque { position: absolute; left: 6%; bottom: 7%; max-width: 520px; padding: 18px; background: var(--grass-green); transform: rotate(1deg); }

.queue-agent { bottom: 32%; transition: left .55s cubic-bezier(.47,-.44,.47,1.42); }

@keyframes drift { from { margin-top: -8px; margin-left: -7px; } to { margin-top: 9px; margin-left: 8px; } }
@keyframes wrongDraw { to { stroke-dashoffset: -160; } }
@keyframes orbit { from { transform: rotate(0deg) translateX(150px) rotate(0deg); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }
@keyframes ripple { from { opacity: .8; scale: .7; } to { opacity: 0; scale: 1.35; } }
@keyframes bob { to { transform: translateY(18px) rotate(6deg); } }
@keyframes wobble { 50% { border-radius: 45% 55% 50% 50%; transform: translate(-50%, -50%) rotate(5deg); } }

@media (max-width: 760px) {
    .map-legend { max-width: calc(100% - 24px); left: 12px; top: 10px; }
    .scene { padding-top: 118px; }
    .habitat-frame { min-height: 82vh; padding: 26px 18px; }
    .roundabout-loop { position: relative; right: auto; top: auto; width: 78vw; margin: 28px auto; }
    .ticket-machine, .door-wall, .route-map, .portal-web { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 18px 0; }
    .queue-lane { left: 5%; right: 5%; }
}