:root{--teal:#7ECFC0;--teal-d:#4fa99a;--orange:#F57C1F;--pink:#ff3d8b;--ink:#141414;--slime:#9be21f}
body{margin:0;background:var(--teal);font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);min-height:100vh;
background-image:radial-gradient(circle at 20% 10%,#9fe0d4 0,transparent 40%),radial-gradient(circle at 80% 90%,#5fbfae 0,transparent 45%)}
.scanlines{pointer-events:none;position:fixed;inset:0;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:.8}50%{opacity:1}}
.display{font-family:'Luckiest Guy',cursive;letter-spacing:.02em}
.marker{font-family:'Permanent Marker',cursive}
.chroma{text-shadow:-2px 0 rgba(255,61,139,.7),2px 0 rgba(0,200,255,.6),0 4px 0 #b3520a}
.blob{background:var(--orange);border-radius:60% 40% 55% 45%/55% 50% 50% 45%;animation:wob 6s ease-in-out infinite}
@keyframes wob{0%,100%{border-radius:60% 40% 55% 45%/55% 50% 50% 45%}50%{border-radius:45% 55% 40% 60%/50% 45% 55% 50%}}
.drip{position:absolute;bottom:-26px;width:14px;background:var(--slime);border-radius:0 0 10px 10px;animation:drip 3s ease-in infinite}
@keyframes drip{0%{height:0}60%{height:34px}100%{height:34px;opacity:0}}
.squish{transition:transform .12s cubic-bezier(.3,1.8,.5,1)}
.squish:hover{transform:scale(1.04) rotate(-1deg)}
.squish:active{transform:scale(.9,.82)}
.card{background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink)}
.pop{animation:pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}}
.rec{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.band{width:100%;height:14px;border:2px solid var(--ink);border-radius:6px;background:repeating-conic-gradient(#141414 0 25%,#fff 0 50%) 0 0/10px 10px}
.band.off{background:#e8e8e8;opacity:.4}
.cassette{background:linear-gradient(#222,#333);border-radius:12px;padding:10px;color:#fff}
.cassette .label{background:#fff8e1;color:#222;border-radius:4px;padding:6px 8px}
.credits-wrap{position:fixed;inset:0;background:var(--teal);z-index:40;overflow:hidden;display:flex;justify-content:center}
.credits{position:absolute;top:100%;animation:roll 22s linear forwards;text-align:center;color:#fff;max-width:600px;padding:0 20px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
@keyframes roll{to{transform:translateY(-100%) translateY(-100vh)}}
.slime-drop{position:fixed;top:-200px;left:50%;width:180px;height:220px;margin-left:-90px;background:var(--slime);border-radius:50% 50% 45% 45%/30% 30% 70% 70%;z-index:45;animation:splat 1.6s ease-in forwards}
@keyframes splat{60%{top:40vh}75%{top:40vh;transform:scale(1.8,.5)}100%{top:40vh;transform:scale(3,.3);opacity:0}}
input[type=range]{accent-color:var(--orange)}