:root{--screen:#000;--phosphor:#63d9ff;--p-colour:#c77dff;--s-colour:#ffd23f;--hat-colour:#ff3b3b;--p-angle:110deg;--p-x:46px;--p-y:84px;--p-size:30px;--stream-angle:-150deg;--s-size:7px;--sway-amplitude:1.5;--sway-period:5.7;--sway:0;--deflect-radius:34;--deflect-strength:22;--spring-stiffness:120;--spring-damping:22;--turn-delay-min:7;--turn-delay-max:15;--turn-duration:6;--figure-depth:.8;--depth-squash:.35;--turn-width:1;--rear:0;--glow-radius:.4em;--figure-glow:2.5px;--scanline-opacity:.35;--scene-font-size:clamp(.5rem, min(3.2vw, 3dvh), 1.75rem);--figure-height:calc(var(--scene-font-size) * 22)}body{touch-action:none;background:var(--screen);min-height:100dvh;color:var(--phosphor);place-items:center;margin:0;font-family:ui-monospace,monospace;display:grid}.scene{font-size:var(--scene-font-size);text-shadow:0 0 var(--glow-radius) var(--phosphor), 0 0 calc(var(--glow-radius) * 2.5) var(--phosphor);line-height:1}.figure{height:var(--figure-height);fill:none;stroke-linecap:round;stroke-linejoin:round;width:auto;max-width:100dvw;display:block;overflow:visible}.figure .body{stroke:var(--phosphor);stroke-width:5px;fill:var(--screen);filter:drop-shadow(0 0 var(--figure-glow) var(--phosphor))}.figure .hat{stroke:var(--hat-colour);stroke-width:5px;fill:var(--screen);filter:drop-shadow(0 0 var(--figure-glow) var(--hat-colour))}.figure .eye{fill:var(--phosphor);stroke:none}.figure .p{fill:var(--p-colour);stroke:none;font:700 var(--p-size) ui-monospace, monospace;opacity:calc(1 - var(--rear));transform:translate(var(--p-x), var(--p-y)) rotate(var(--p-angle));transform-box:view-box;transform-origin:0 0;filter:drop-shadow(0 0 var(--figure-glow) var(--p-colour))}.scanlines{pointer-events:none;background:repeating-linear-gradient(to bottom, rgb(0 0 0/var(--scanline-opacity)) 0 1px, transparent 1px 3px);position:fixed;inset:0}.figure .sways{transform:translateX(calc(var(--sway) * 1px)) scaleX(var(--turn-width));transform-box:view-box;transform-origin:55px 0}.figure .face{opacity:calc(1 - var(--rear))}.figure .crack{opacity:var(--rear)}.figure .stream{filter:drop-shadow(0 0 var(--figure-glow) var(--s-colour))}.figure .glyph{fill:var(--s-colour);stroke:none;font:700 var(--s-size) ui-monospace, monospace;text-anchor:middle;dominant-baseline:central;opacity:0}.figure .puddle{filter:drop-shadow(0 0 var(--figure-glow) var(--s-colour))}.figure .mark{stroke:var(--s-colour);stroke-width:3px;opacity:0}