:root { --state: #9ba8b9; --light: #3a5063; --ink: #f5f7fe; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; color: var(--ink); background: transparent; pointer-events: none; }
.bench { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
svg { display: block; width: 100%; height: 74%; overflow: visible; }
.badge { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 3px 6px; margin-top: -4px; border: 1px solid #4b415d; background: #211b35; box-shadow: 0 2px #100e22; font: 700 clamp(7px, 9vw, 10px)/1 ui-monospace, monospace; text-transform: uppercase; white-space: nowrap; }
.dot { width: 5px; height: 5px; background: var(--state); }
.screen { fill: var(--light); }
.screen-line, .screen-cursor { fill: var(--state); }
.screen-line { opacity: .66; }
.star, .wait { opacity: 0; }
.eyes { animation: blink 4.5s infinite; transform-box: fill-box; transform-origin: center; }
body[data-state="working"] { --state: #75d6f4; --light: #2a5873; }
body[data-state="working"] .paw { animation: typing .28s steps(2) infinite alternate; }
body[data-state="working"] .screen-cursor { animation: signal .6s steps(2) infinite alternate; }
body[data-state="waiting"] { --state: #f5b96c; --light: #6a4c55; }
body[data-state="waiting"] .wait { opacity: 1; animation: signal 1.1s steps(2) infinite alternate; }
body[data-state="done"] { --state: #92edba; --light: #2b665b; }
body[data-state="done"] .star { opacity: 1; }
body[data-state="done"] .cat { animation: hop .5s steps(5) 1; }
@keyframes blink { 0%, 93%, 97%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes typing { to { transform: translateY(2px); } }
@keyframes signal { to { opacity: .25; } }
@keyframes hop { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }