:root {
    --ink: #161318;
    --custard: #FFE7A3;
    --mint: #9BFFD8;
    --tomato: #FF3B30;
    --blue: #315CFF;
    --high: #B7F000;
    --grape: #5C2A9D;
    --body: 'Atkinson Hyperlegible', 'lato', sans-serif;
    --label: 'Bricolage Grotesque', 'inter', sans-serif;
    --beast: 'Rubik Beastly', 'Inter', cursive;
    --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--custard);
    font-family: var(--body);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background-image: linear-gradient(90deg, rgba(22,19,24,.06) 1px, transparent 1px), linear-gradient(rgba(22,19,24,.05) 1px, transparent 1px), radial-gradient(circle at 22% 17%, rgba(155,255,216,.35), transparent 17%), radial-gradient(circle at 88% 44%, rgba(183,240,0,.18), transparent 16%);
    background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
    mix-blend-mode: multiply;
}

.observer-clipboard {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(-1deg);
    width: 154px;
    padding: 34px 12px 14px;
    z-index: 30;
    background: rgba(255,231,163,.92);
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--grape);
    font-family: var(--mono);
    font-size: 11px;
}
.clip-top { position:absolute; width:70px; height:24px; left:38px; top:-13px; background:var(--mint); border:4px solid var(--ink); border-radius:0 0 14px 14px; }
.clipboard-title { margin: 0 0 10px; font-family: var(--label); font-weight: 800; text-transform: uppercase; }
.observer-clipboard a { display:block; color:var(--ink); text-decoration:none; padding:7px 4px; border-top:2px dashed var(--ink); }
.observer-clipboard span { display:inline-block; background:var(--high); padding:1px 4px; border:2px solid var(--ink); border-radius:50%; }
.clipboard-note { margin-top:12px; padding:8px; background:var(--tomato); color:var(--custard); transform:rotate(2deg); }

.simulation { position: relative; }
.tray {
    min-height: 100vh;
    position: relative;
    padding: 7vw 7vw 7vw 210px;
    border-bottom: 8px solid var(--ink);
    overflow: hidden;
    isolation: isolate;
}
.tray::before {
    content:"";
    position:absolute;
    inset: 28px 34px 28px 190px;
    border: 5px solid var(--ink);
    background: rgba(155,255,216,.18);
    box-shadow: inset 0 0 0 10px rgba(255,255,255,.18), inset 20px 0 40px rgba(92,42,157,.08);
    border-radius: 28px 10px 34px 14px;
    z-index: -1;
}
.tray-label { position:relative; z-index:4; max-width: 760px; }
.tray-label span { display:inline-block; font-family:var(--mono); background:var(--high); border:3px solid var(--ink); padding:6px 12px; transform:rotate(-2deg); box-shadow:4px 4px 0 var(--ink); }
h2 { margin:14px 0 12px; font-family:var(--label); font-size:clamp(42px, 6vw, 86px); line-height:.86; letter-spacing:-.05em; }
.observer-note, .field-note { position:relative; z-index:4; max-width:620px; font-size:clamp(18px,2vw,25px); line-height:1.2; background:rgba(255,231,163,.82); border:3px solid var(--ink); padding:14px 18px; box-shadow:6px 6px 0 var(--blue); }

.bad-plan-token { position:fixed; top:70px; right:5vw; width:78px; height:78px; border-radius:50%; background:var(--tomato); color:var(--custard); border:5px solid var(--ink); z-index:28; font-family:var(--beast); display:grid; place-items:center; text-align:center; font-size:19px; line-height:.82; box-shadow:0 0 0 8px var(--mint), 10px 10px 0 var(--ink); transform:translateY(var(--token-y,0px)) rotate(var(--token-r, -8deg)); transition: filter .2s; }
.bad-plan-token.pulse { filter: drop-shadow(0 0 22px var(--high)); animation: tokenBump .38s ease; }

.tray-hero { background: linear-gradient(135deg, var(--custard), #fff1bb 42%, var(--mint)); }
.hero-window { position:relative; z-index:3; min-height:58vh; border:7px solid var(--ink); border-radius:34px 10px 44px 18px; background:linear-gradient(145deg, rgba(155,255,216,.72), rgba(255,231,163,.62)); box-shadow:18px 18px 0 var(--grape), inset 0 0 50px rgba(255,255,255,.75); padding:40px 42px; }
.wordmark { margin: 22px 0 18px; display:flex; flex-wrap:wrap; gap:9px; font-family:var(--beast); font-size:clamp(64px, 12vw, 170px); line-height:.78; font-weight:400; }
.wordmark span { display:inline-block; background:var(--custard); border:5px solid var(--ink); padding:.04em .08em .12em; box-shadow:8px 8px 0 var(--tomato); }
.wordmark span:nth-child(2) { transform:rotate(3deg) translateY(12px); background:var(--mint); box-shadow:8px 8px 0 var(--blue); }
.wordmark span:nth-child(3) { transform:rotate(-2deg); background:var(--high); }
.wordmark span:nth-child(4) { transform:rotate(1deg) translateY(-8px); background:var(--tomato); color:var(--custard); }
.tape { position:absolute; right:42px; top:24px; font-family:var(--mono); background:var(--high); border:3px solid var(--ink); padding:7px 20px; transform:rotate(8deg); }
.prop-controls { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
button { font:inherit; color:inherit; cursor:pointer; }
.control-prop, .final-button { font-family:var(--label); font-weight:800; border:4px solid var(--ink); background:var(--blue); color:white; padding:14px 18px; box-shadow:7px 7px 0 var(--ink); transform:rotate(-1deg); transition:transform .18s, box-shadow .18s; }
.control-prop:nth-child(2) { background:var(--high); color:var(--ink); transform:rotate(2deg); }
.stamp-button { background:var(--tomato); color:var(--custard); }
.control-prop:hover, .final-button:hover, .control-prop.jostle { transform:translate(5px,5px) rotate(2deg); box-shadow:2px 2px 0 var(--ink); }
.wrong-sign { position:absolute; bottom:20%; right:8%; z-index:6; font-family:var(--label); font-weight:800; background:var(--tomato); color:var(--custard); border:4px solid var(--ink); padding:18px; transform:rotate(5deg); }

.agent-crowd { position:absolute; left:210px; right:50px; bottom:42px; height:165px; z-index:8; }
.agent { position:absolute; left:calc(var(--x, 50) * 1%); bottom:18px; display:block; width:32px; height:42px; border:4px solid var(--ink); border-radius: 50% 50% 38% 38%; background:var(--blue); font-size:8px; font-family:var(--mono); color:var(--ink); text-indent:-10px; white-space:nowrap; animation: agentBob 1.6s ease-in-out infinite; animation-delay:var(--d,0s); }
.agent::before { content:""; position:absolute; width:7px; height:7px; left:7px; top:9px; background:var(--ink); border-radius:50%; box-shadow:11px 1px 0 var(--ink); }
.agent.back { bottom:78px; transform:scale(.88); opacity:.94; }
.pill { border-radius:20px; height:48px; }
.square { border-radius:8px; }
.cone::after { content:""; position:absolute; left:4px; top:-20px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:22px solid var(--tomato); filter:drop-shadow(0 -3px 0 var(--ink)); }
.duck::after { content:""; position:absolute; right:-12px; top:10px; width:13px; height:9px; background:var(--tomato); border:3px solid var(--ink); border-left:0; border-radius:0 10px 10px 0; }
.blue { background:var(--blue); } .grape { background:var(--grape); color:var(--custard); } .mint { background:var(--mint); } .tomato { background:var(--tomato); color:var(--custard); } .custard { background:var(--custard); } .high { background:var(--high); }

.tube, .connector { position:absolute; border:8px solid rgba(22,19,24,.86); background:rgba(155,255,216,.48); box-shadow:inset 0 0 0 8px rgba(255,255,255,.35); }
.tube-down { width:120px; height:280px; right:13%; bottom:-150px; border-radius:60px; transform:rotate(22deg); z-index:5; animation:tubePulse 2.4s infinite; }
.left-loop { width:340px; height:180px; left:170px; top:90px; border-radius:50%; transform:rotate(-18deg); }

.tray-funnel { background:linear-gradient(160deg, var(--mint), var(--custard)); }
.funnel-machine { position:absolute; right:7vw; top:22vh; width:min(560px,43vw); height:58vh; z-index:3; }
.funnel-mouth { height:130px; clip-path:polygon(0 0,100% 0,66% 100%,34% 100%); background:var(--grape); border:6px solid var(--ink); display:flex; justify-content:space-around; align-items:flex-start; padding-top:24px; color:var(--custard); font-family:var(--mono); }
.funnel-mouth b { background:var(--high); color:var(--ink); border:3px solid var(--ink); padding:8px; animation: paddleSpin 2.2s infinite linear; }
.funnel-neck { width:86px; height:180px; margin:-4px auto 0; background:var(--mint); border:6px solid var(--ink); }
.committee-ring { position:absolute; inset:auto 60px 10px; aspect-ratio:1; border:7px dashed var(--ink); border-radius:50%; animation:rotateWrong 10s linear infinite; }
.committee-ring span { position:absolute; left:50%; top:50%; font-family:var(--mono); background:var(--custard); border:3px solid var(--ink); padding:4px; transform:rotate(calc(var(--i) * 72deg)) translate(130px); }
.committee-ring span:nth-child(1){--i:0}.committee-ring span:nth-child(2){--i:1}.committee-ring span:nth-child(3){--i:2}.committee-ring span:nth-child(4){--i:3}.committee-ring span:nth-child(5){--i:4}
.paddle-field i { position:absolute; width:55px; height:28px; background:var(--blue); border:4px solid var(--ink); animation:paddleSpin 1.7s infinite steps(4); }
.paddle-field i:nth-child(1){left:0;top:70px}.paddle-field i:nth-child(2){right:0;top:100px}.paddle-field i:nth-child(3){left:60px;bottom:80px}.paddle-field i:nth-child(4){right:90px;bottom:40px}.paddle-field i:nth-child(5){left:42%;top:24px}.paddle-field i:nth-child(6){right:35%;bottom:120px}
.mini-log { position:absolute; left:240px; bottom:12%; font-family:var(--mono); background:var(--ink); color:var(--mint); padding:18px; border:4px solid var(--high); max-width:420px; }

.tray-door { background:linear-gradient(120deg, var(--custard), rgba(255,59,48,.22)); }
.door-stage { position:relative; height:60vh; margin-top:30px; z-index:4; }
.floor-arrows { position:absolute; left:0; right:0; top:45%; display:flex; justify-content:space-around; font-family:var(--beast); font-size:82px; color:var(--tomato); text-shadow:4px 4px 0 var(--ink); }
.locked-door { position:absolute; right:17%; top:0; width:190px; height:340px; background:var(--grape); color:var(--custard); border:8px solid var(--ink); display:grid; place-items:center; font-family:var(--label); font-size:48px; box-shadow:14px 14px 0 var(--ink); }
.locked-door em { position:absolute; bottom:22px; font-family:var(--mono); font-size:12px; color:var(--mint); }
.snack-exit { position:absolute; right:4%; bottom:7%; background:var(--high); border:5px solid var(--ink); padding:20px; font-family:var(--label); font-weight:800; transform:rotate(8deg); }
.push-crowd { position:absolute; right:31%; top:120px; width:220px; height:140px; animation:pushLoop 1.1s infinite; }
.push-crowd .agent { position:relative; display:inline-block; left:auto; bottom:auto; margin:-2px; }
.safety-cones i { position:absolute; bottom:20px; width:0; height:0; border-left:24px solid transparent; border-right:24px solid transparent; border-bottom:78px solid var(--tomato); filter:drop-shadow(0 5px 0 var(--ink)); }
.safety-cones i:nth-child(1){left:30%}.safety-cones i:nth-child(2){left:40%;bottom:50px}.safety-cones i:nth-child(3){left:50%}

.tray-help { background:linear-gradient(150deg, var(--grape), var(--ink)); color:var(--custard); }
.tray-help::before { border-color:var(--mint); background:rgba(92,42,157,.42); }
.help-desk-world { position:relative; min-height:58vh; z-index:4; }
.desk-sign { position:absolute; left:43%; top:8%; background:var(--tomato); color:var(--custard); border:5px solid var(--ink); padding:16px 40px; font-family:var(--label); font-size:34px; transform:rotate(180deg); box-shadow:8px -8px 0 var(--mint); }
.desk { position:absolute; left:36%; top:34%; width:310px; height:145px; background:var(--custard); color:var(--ink); border:7px solid var(--ink); box-shadow:12px 12px 0 var(--blue); display:grid; place-items:center; font-family:var(--mono); }
.desk b { font-family:var(--beast); font-size:60px; color:var(--tomato); }
.queue i, .meeting-agents i, .victory-path i { display:block; width:36px; height:46px; background:var(--mint); border:4px solid var(--ink); border-radius:18px 18px 12px 12px; animation:agentBob 1.3s infinite; }
.queue { position:absolute; display:flex; gap:8px; }
.queue-a { left:7%; top:42%; animation:queueShuffle 2s infinite; }
.queue-b { right:8%; top:42%; flex-direction:row-reverse; animation:queueShuffle 2s infinite reverse; }
.speech-cluster span { position:absolute; background:var(--custard); color:var(--ink); border:3px solid var(--ink); border-radius:50%; padding:12px; font-family:var(--label); font-weight:800; animation:popBubble 1.8s infinite; }
.speech-cluster span:nth-child(1){left:16%;top:18%}.speech-cluster span:nth-child(2){right:24%;top:20%;animation-delay:.3s}.speech-cluster span:nth-child(3){left:25%;bottom:14%;animation-delay:.7s}.speech-cluster span:nth-child(4){right:12%;bottom:25%;animation-delay:1s}
.log-paper { position:absolute; left:10%; bottom:7%; background:var(--mint); color:var(--ink); border:4px solid var(--ink); padding:14px; font-family:var(--mono); transform:rotate(-3deg); }

.tray-sandwich { background:linear-gradient(140deg, var(--custard), var(--high)); }
.meeting-table { position:relative; min-height:58vh; z-index:3; }
.sandwich-diagram { position:absolute; left:18%; top:16%; width:420px; transform:rotate(-5deg); }
.sandwich-diagram span { display:block; margin:5px; padding:18px; border:4px solid var(--ink); background:var(--custard); font-family:var(--mono); text-align:center; box-shadow:6px 6px 0 var(--ink); }
.sandwich-diagram span:nth-child(2){background:var(--blue);color:white}.sandwich-diagram span:nth-child(3){background:var(--high)}
.rubber-duck { position:absolute; right:18%; top:18%; width:170px; height:130px; border-radius:60% 60% 35% 35%; background:var(--custard); border:6px solid var(--ink); display:grid; place-items:center; font-family:var(--label); font-weight:800; box-shadow:10px 10px 0 var(--tomato); }
.alarm-bulbs i { position:absolute; top:5%; width:44px; height:44px; border-radius:50%; background:var(--tomato); border:5px solid var(--ink); animation:alarmBlink .7s infinite; }
.alarm-bulbs i:nth-child(1){left:35%}.alarm-bulbs i:nth-child(2){left:45%;animation-delay:.2s}.alarm-bulbs i:nth-child(3){left:55%;animation-delay:.4s}
.meeting-agents { position:absolute; left:16%; right:12%; bottom:10%; display:flex; justify-content:space-between; }
.stamp { position:absolute; right:8%; bottom:15%; font-family:var(--beast); color:var(--tomato); border:7px solid var(--tomato); padding:20px; font-size:34px; background:rgba(255,231,163,.6); }
.crooked { transform:rotate(-9deg); animation:stampSlam 3s infinite; }

.tray-finale { background:radial-gradient(circle at 65% 35%, var(--mint), transparent 24%), linear-gradient(150deg, var(--blue), var(--grape)); color:var(--custard); }
.tray-finale::before { border-color:var(--custard); background:rgba(22,19,24,.35); }
.finale-track { position:relative; height:60vh; z-index:4; }
.loading-wheel { position:absolute; left:10%; top:15%; width:230px; height:230px; border:14px dashed var(--high); border-radius:50%; display:grid; place-items:center; font-family:var(--mono); text-align:center; animation:rotateWrong 5s linear infinite; }
.victory-path { position:absolute; left:38%; right:10%; top:38%; display:flex; justify-content:space-between; border-top:10px dotted var(--custard); padding-top:18px; animation:queueShuffle 1.4s infinite; }
.final-button { position:absolute; right:12%; bottom:18%; background:var(--tomato); color:var(--custard); transform:rotate(4deg); }
.confetti span { position:absolute; top:0; width:12px; height:22px; background:var(--high); border:2px solid var(--ink); animation:confettiFall 2.5s infinite; }
.confetti span:nth-child(1){left:22%;background:var(--tomato);animation-delay:.1s}.confetti span:nth-child(2){left:28%;background:var(--mint);animation-delay:.4s}.confetti span:nth-child(3){left:36%;background:var(--high);animation-delay:.7s}.confetti span:nth-child(4){left:44%;background:var(--custard);animation-delay:1s}.confetti span:nth-child(5){left:52%;background:var(--tomato);animation-delay:.2s}.confetti span:nth-child(6){left:60%;background:var(--mint);animation-delay:.8s}.confetti span:nth-child(7){left:68%;background:var(--high);animation-delay:1.2s}.confetti span:nth-child(8){left:76%;background:var(--custard);animation-delay:.5s}.confetti span:nth-child(9){left:84%;background:var(--tomato);animation-delay:.9s}.confetti span:nth-child(10){left:92%;background:var(--mint);animation-delay:1.4s}
.end-label { position:absolute; left:235px; bottom:34px; font-family:var(--mono); background:var(--high); color:var(--ink); border:4px solid var(--ink); padding:12px 18px; }

.scratches { position:absolute; inset:0; background:repeating-linear-gradient(105deg, transparent 0 38px, rgba(22,19,24,.07) 39px 40px); pointer-events:none; z-index:9; }
.panic .agent, .panic .queue i, .panic .meeting-agents i, .panic .victory-path i { animation-duration:.45s; }
.panic .tray-label { animation:shakeError .32s 4; }

@keyframes agentBob { 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-12px) rotate(3deg); } }
@keyframes tubePulse { 0%,100%{ box-shadow:inset 0 0 0 8px rgba(255,255,255,.35), 0 0 0 rgba(183,240,0,0); } 50%{ box-shadow:inset 0 0 0 8px rgba(255,255,255,.45), 0 0 34px var(--high); } }
@keyframes paddleSpin { to { transform:rotate(360deg); } }
@keyframes rotateWrong { to { transform:rotate(360deg); } }
@keyframes pushLoop { 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(18px); } }
@keyframes queueShuffle { 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(26px); } }
@keyframes popBubble { 0%,100%{ transform:scale(.8) rotate(-5deg); opacity:.55; } 50%{ transform:scale(1.18) rotate(5deg); opacity:1; } }
@keyframes alarmBlink { 0%,100%{ background:var(--tomato); box-shadow:0 0 0 var(--tomato); } 50%{ background:var(--high); box-shadow:0 0 24px var(--tomato); } }
@keyframes stampSlam { 0%,70%,100%{ transform:scale(1) rotate(-9deg); } 75%{ transform:scale(1.35) rotate(-14deg); } 82%{ transform:scale(.94) rotate(-7deg); } }
@keyframes confettiFall { 0%{ transform:translateY(-80px) rotate(0); opacity:0; } 12%{ opacity:1; } 100%{ transform:translateY(62vh) rotate(520deg); opacity:.75; } }
@keyframes tokenBump { 50%{ transform:translateY(var(--token-y,0px)) rotate(18deg) scale(1.15); } }
@keyframes shakeError { 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-12px) rotate(-2deg); } 75%{ transform:translateX(12px) rotate(2deg); } }

@media (max-width: 900px) {
    .observer-clipboard { display:none; }
    .tray { padding: 28px 22px 70px; }
    .tray::before { inset:16px; }
    .agent-crowd { left:20px; right:20px; }
    .funnel-machine, .locked-door, .desk-sign, .desk, .sandwich-diagram, .rubber-duck { position:relative; left:auto; right:auto; top:auto; width:100%; margin:24px 0; }
    .door-stage, .help-desk-world, .meeting-table, .finale-track { height:auto; min-height:70vh; }
    .floor-arrows { font-size:44px; }
    .end-label { left:22px; }
}