:root{--crt-room: #1b2838;--crt-room-deep: #111921;--crt-menu-blue: #0069ff;--crt-menu-blue-dark: #0a44b0;--crt-cyan: #1af2ff;--crt-lime: #2afd72;--crt-yellow: #e7e05c;--crt-white: #f4f8ff;--crt-ink: #02060f;--crt-font: "SFMono-Regular", "IBM Plex Mono", "Cascadia Mono", "JetBrains Mono", "Menlo", "Consolas", monospace}*{box-sizing:border-box}html,body{width:100%;min-height:100%}html{background:var(--crt-room);color:var(--crt-white)}body{margin:0;overflow:hidden;background:radial-gradient(circle at center,rgba(120,137,156,.32) 0,rgba(27,40,56,.25) 28%,transparent 54%),linear-gradient(180deg,#33414f 0,var(--crt-room) 48%,var(--crt-room-deep) 100%);color:var(--crt-white);font-family:var(--crt-font);text-rendering:geometricPrecision}button,input,textarea,select{font:inherit}canvas,svg,img{display:block;max-width:100%}ul{margin:0;padding:0}#app{min-height:100vh}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.scanlines{position:relative;width:100vw;height:100svh;overflow:hidden;perspective:1400px}.screen{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;transform:translateZ(0) scale(1.015,1.03) rotateX(.7deg);filter:saturate(1.05) contrast(1.03)}.screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(214,228,236,.22),transparent 24%),radial-gradient(circle at 50% 45%,transparent 56%,rgba(0,0,0,.48) 100%),linear-gradient(180deg,#85908c 0,#4b5051 38%,#2e3131);transform:scale(1.035,1.06)}.screen:after{content:"";position:absolute;inset:-2%;pointer-events:none;background:radial-gradient(circle at center,transparent 58%,rgba(0,0,0,.46) 100%),repeating-linear-gradient(90deg,#ff4a4a09 0 1px,#3effc905 1px 2px,#5295ff09 2px 3px);mix-blend-mode:screen;opacity:.3}.picture{position:absolute;inset:0;width:100%;height:100%;transform:scale(0);transform-origin:center center;background:linear-gradient(180deg,#7a8588 0,#454a4b 55%,#2f3132);opacity:.95}.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:1;transform:scale(1.018,1.042) rotateX(.45deg)}.overlay:before,.overlay:after{content:"";position:absolute;inset:0;pointer-events:none}.overlay:before{background:repeating-linear-gradient(180deg,#080a0e57 0 2px,#fff0 2px 4px),linear-gradient(90deg,#ff00000e,#00ff0006,#0000ff0e);mix-blend-mode:screen;animation:screenDrift 10s linear infinite}.overlay:after{background:radial-gradient(circle at center,transparent 54%,rgba(0,0,0,.62) 100%),linear-gradient(90deg,rgba(255,0,0,.045),transparent 30%,transparent 70%,rgba(0,217,255,.045)),linear-gradient(180deg,transparent 0,transparent 72%,rgba(255,255,255,.06) 74%,transparent 76%);animation:screenRoll 8.5s linear infinite}.text{position:absolute;top:10%;left:5%;width:12rem;height:3rem;color:var(--crt-lime);font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1;letter-spacing:.05em;text-shadow:0 0 8px rgba(42,253,114,.75);opacity:0;filter:blur(.6px)}.text span{position:absolute;inset:0}.text span:nth-child(1){color:#f00c;transform:translate(-1px);filter:blur(1.6px)}.text span:nth-child(2){color:#2afd72eb;transform:translate(1px);filter:blur(1.6px)}.text span:nth-child(3){color:#0099ffbf;filter:blur(.9px)}.text span:nth-child(4){color:var(--crt-white);text-shadow:0 0 28px rgba(255,255,255,.35)}.text span:nth-child(5){color:#ffffff24;filter:blur(10px)}.menu{position:relative;z-index:2;width:min(33rem,35vw);min-width:18rem;opacity:0;background:linear-gradient(180deg,#0b66ff 0,var(--crt-menu-blue) 56%,var(--crt-menu-blue-dark) 100%);color:var(--crt-white);text-transform:uppercase;text-shadow:1px 1px 0 var(--crt-ink),-1px -1px 0 var(--crt-ink),1px -1px 0 var(--crt-ink),-1px 1px 0 var(--crt-ink);box-shadow:0 0 0 3px #02060fad,0 0 36px #08121c47,0 0 22px #1af2ff14;filter:blur(.9px);transform-origin:center center;will-change:transform,filter,opacity;animation:menuWobble 2.1s steps(2,end) infinite}.menu:before,.menu:after{content:"";position:absolute;inset:0;pointer-events:none}.menu:before{border-left:2px solid rgba(255,47,47,.24);border-right:2px solid rgba(26,242,255,.24);mix-blend-mode:screen;opacity:0;filter:blur(1px);animation:menuGhost 2.1s steps(2,end) infinite}.menu:after{background:linear-gradient(180deg,transparent 0,transparent 44%,rgba(255,255,255,.1) 46%,rgba(255,255,255,.1) 49%,transparent 52%,transparent 100%);mix-blend-mode:screen;opacity:0;animation:menuTear 2.1s steps(1,end) infinite}.menu>header,.menu li,.menu-status,.menu-player,.menu footer{position:relative;will-change:transform,filter;animation:osdObjectWobble 1.15s steps(2,end) infinite}.menu>header{animation-delay:-.08s}.menu li:nth-child(1){animation-delay:-.18s}.menu li:nth-child(2){animation-delay:-.34s}.menu li:nth-child(3){animation-delay:-.52s}.menu li:nth-child(4){animation-delay:-.7s}.menu-status{animation-delay:-.26s}.menu-player{animation-delay:-.42s}.menu footer{animation-delay:-.6s}.menu header{padding:.38rem .9rem .4rem;color:var(--crt-yellow);font-size:clamp(1.35rem,1vw + 1rem,1.85rem);line-height:1}.menu ul{list-style:none}.menu li{position:relative;padding:.26rem .9rem .28rem;cursor:pointer;font-size:clamp(1.25rem,.8vw + 1rem,1.8rem);line-height:1.05}.menu li.active{background:var(--crt-cyan);color:#fff;text-shadow:0 0 6px rgba(255,255,255,.48),1px 1px 0 var(--crt-ink),-1px -1px 0 var(--crt-ink),1px -1px 0 var(--crt-ink),-1px 1px 0 var(--crt-ink);box-shadow:inset 0 0 18px #fff3,0 0 18px #1af2ff2e}.menu li.is-playing:after{content:">";position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:var(--crt-lime);text-shadow:0 0 8px rgba(42,253,114,.7)}.menu li.is-jerking{animation:itemJerk .16s steps(2,end) 2}.menu-label{display:block;padding-right:1.4rem}.menu-status{min-height:2rem;margin:0;padding:.4rem .9rem .45rem;color:var(--crt-yellow);font-size:.92rem;letter-spacing:.05em;border-top:2px solid rgba(2,6,15,.35);background:linear-gradient(180deg,#06297a99,#04205ed1);box-shadow:inset 0 0 14px #1af2ff0f}.menu-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;min-height:2.1rem;padding:.28rem .9rem .42rem;color:#f4f8ffeb;font-size:.88rem;letter-spacing:.04em;border-top:1px solid rgba(2,6,15,.32);background:linear-gradient(180deg,#092470e0,#05194fd1);box-shadow:inset 0 1px #ffffff0f,inset 0 0 18px #1af2ff0d}.menu-player-time{min-width:3.25rem}.menu-player-bars{display:flex;justify-content:center;gap:.08rem;min-width:0;overflow:hidden;color:#f4f8ff38;text-shadow:0 0 5px rgba(255,255,255,.1)}.menu-player-bar{display:inline-block;line-height:1}.menu-player-bar.is-filled{color:var(--crt-cyan);text-shadow:0 0 8px rgba(26,242,255,.5)}.menu-player-bar.is-head{color:var(--crt-lime);text-shadow:0 0 10px rgba(42,253,114,.75)}.menu footer{display:flex;justify-content:space-between;gap:1rem;padding:.38rem .9rem .45rem;background:var(--crt-lime);color:var(--crt-white);border-top:2px solid rgba(2,6,15,.55)}.key{display:flex;align-items:center;gap:.45rem;min-width:0;font-size:clamp(1rem,.48vw + .88rem,1.35rem);white-space:nowrap}.key:last-child{justify-content:flex-end}.key span{display:inline-flex;align-items:center;justify-content:center;min-width:4.8rem;padding:.05rem .45rem;border:.28rem solid var(--crt-yellow);border-radius:.35rem;background:var(--crt-menu-blue);line-height:1.1}.on .text,.on .menu{opacity:1;transition:opacity 10ms ease 1.6s}.on .picture{animation:screenOn 2.6s linear forwards}.off .picture{animation:screenOff .75s cubic-bezier(.23,1,.32,1) forwards}.text span{animation:blurPulse 30ms infinite,textJerk 50ms infinite}.text span:nth-child(2){animation:glitchLeft 1s infinite}.text span:nth-child(3){animation:glitchRight 1s infinite}.screen.is-bursting:after{animation:burstFlash .22s linear}.screen.is-bursting .overlay:after{animation:screenRoll 8.5s linear infinite,burstRoll .22s linear}.screen.is-bursting .menu{animation:menuWobble 2.1s steps(2,end) infinite,burstMenu .22s linear}.screen.is-bursting .menu>header,.screen.is-bursting .menu li,.screen.is-bursting .menu-status,.screen.is-bursting .menu-player,.screen.is-bursting .menu footer{animation:osdObjectWobble 1.15s steps(2,end) infinite,burstObject .22s linear}@keyframes screenOn{0%{transform:scaleY(.8) translateZ(0);filter:brightness(4);opacity:1}3.5%{transform:scaleY(.8) translate3d(0,100%,0)}3.6%{transform:scaleY(.8) translate3d(0,-100%,0);opacity:1}9%{transform:scale(1.3,.6) translate3d(0,100%,0);filter:brightness(4);opacity:0}11%{transform:scale(1) translateZ(0);filter:contrast(0) brightness(0);opacity:0}to{transform:scale(1) translateZ(0);filter:contrast(1) brightness(1.2) saturate(1.2);opacity:1}}@keyframes screenOff{0%{transform:scale(1);filter:brightness(1)}40%{transform:scaleY(.005);filter:brightness(100)}70%{transform:scaleY(.005)}90%{transform:scale(.005)}to{transform:scale(0)}}@keyframes blurPulse{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}@keyframes textJerk{50%{transform:translate(1px)}51%{transform:translate(0)}}@keyframes glitchLeft{0%,30%,32%,98%{transform:translate(0)}31%,to{transform:translate(-6px)}}@keyframes glitchRight{0%,30%,32%,98%{transform:translate(0)}31%,to{transform:translate(6px)}}@keyframes menuWobble{0%,12%,29%,60%,to{transform:translateZ(0) scale(1) skew(0);filter:blur(.9px) brightness(1) saturate(1);opacity:1}4%{transform:translate3d(.4px,.8px,0) scale(1.001,.998) skew(-.25deg)}8%{transform:translate3d(-.5px,-.2px,0) scale(.999,1.002) skew(.2deg)}30%{transform:translateZ(0) scaleY(1.02) skew(0);filter:blur(1px) brightness(1.04) saturate(1.08)}31%{transform:translate3d(2px,-1px,0) scale(1.014,1.12) skew(11deg);filter:blur(1.2px) brightness(1.14) saturate(1.12);opacity:.92}32%{transform:translate3d(-3px,1px,0) scale(.992,1.16) skew(-9deg);filter:blur(1.35px) brightness(1.2) saturate(1.18);opacity:.88}33%{transform:translate3d(2px,0,0) scale(1.006,.97) skew(4deg);filter:blur(1px) brightness(1.08) saturate(1.08)}34%{transform:translate3d(-1px,0,0) scaleY(1.02) skew(-2deg);filter:blur(.95px) brightness(1.03) saturate(1.03)}61%{transform:translate3d(1px,0,0) scale(1.006,1.04) skew(3deg);filter:blur(1.05px) brightness(1.07) saturate(1.06)}62%{transform:translate3d(-2px,0,0) scale(.996,.98) skew(-6deg);filter:blur(1.15px) brightness(1.1) saturate(1.1)}63%{transform:translate3d(1px,0,0) scale(1.002,1.01) skew(1deg);filter:blur(.95px) brightness(1.03) saturate(1.04)}}@keyframes osdObjectWobble{0%,18%,to{transform:translateZ(0) skew(0) scale(1);filter:brightness(1) blur(0)}6%{transform:translate3d(.8px,-.3px,0) skew(-.5deg) scale(1.002,.998)}9%{transform:translate3d(-1px,.3px,0) skew(.7deg) scale(.998,1.004);filter:brightness(1.05) blur(.15px)}12%{transform:translate3d(1.4px,-.4px,0) skew(-1.3deg) scale(1.004,.992);filter:brightness(1.08) blur(.2px)}14%{transform:translate3d(-1.6px,.5px,0) skew(1deg) scale(.996,1.01);filter:brightness(.98) blur(.12px)}16%{transform:translate3d(.6px,0,0) skew(-.3deg) scale(1.001,.999)}54%{transform:translate3d(.4px,0,0) skew(.25deg) scaleX(1.001)}56%{transform:translate3d(-1.1px,.2px,0) skew(-.75deg) scale(.999,1.004);filter:brightness(1.05) blur(.14px)}58%{transform:translate3d(1.3px,-.2px,0) skew(.95deg) scale(1.003,.995)}60%{transform:translate3d(-.5px,0,0) skew(-.2deg) scale(1)}}@keyframes menuGhost{0%,29%,60%,to{transform:translateZ(0);opacity:0}31%{transform:translate3d(-4px,0,0);opacity:.5}32%{transform:translate3d(5px,0,0);opacity:.42}33%{transform:translate3d(-2px,0,0);opacity:.18}61%{transform:translate3d(3px,0,0);opacity:.22}62%{transform:translate3d(-3px,0,0);opacity:.18}}@keyframes menuTear{0%,29%,60%,to{transform:translateY(0);opacity:0}31%{transform:translateY(-3%);opacity:.22}32%{transform:translateY(2%);opacity:.16}61%{transform:translateY(1%);opacity:.12}}@keyframes screenRoll{0%,88%,to{background-position:0 0,0 0,0 0;opacity:1}90%{background-position:0 0,0 0,0 -18px;opacity:.98}94%{background-position:0 0,0 0,0 22px;opacity:.94}97%{background-position:0 0,0 0,0 5px;opacity:1}}@keyframes screenDrift{0%,to{transform:translateZ(0);opacity:1}50%{transform:translate3d(.5px,0,0);opacity:.95}}@keyframes burstFlash{0%{opacity:.58;filter:brightness(1.45)}60%{opacity:.24}to{opacity:.3}}@keyframes burstRoll{0%{background-position:0 0,0 0,0 -32px;opacity:1}55%{background-position:0 0,0 0,0 26px;opacity:.88}to{background-position:0 0,0 0,0 0;opacity:1}}@keyframes burstMenu{0%{filter:blur(1.4px) brightness(1.24) saturate(1.18);transform:translateZ(0) scale(1.012,1.06) skew(4deg)}55%{filter:blur(1.08px) brightness(1.14) saturate(1.1);transform:translate3d(-1px,0,0) scale(1.004,1.02) skew(-2deg)}to{filter:blur(.9px) brightness(1) saturate(1);transform:translateZ(0) scale(1) skew(0)}}@keyframes burstObject{0%{transform:translate3d(2px,-.4px,0) skew(2.5deg) scale(1.006,.994);filter:brightness(1.18) blur(.22px)}50%{transform:translate3d(-1.8px,.3px,0) skew(-2deg) scale(.996,1.01);filter:brightness(1.08) blur(.16px)}to{transform:translateZ(0) skew(0) scale(1);filter:brightness(1) blur(0)}}@media(prefers-reduced-motion:reduce){.scanlines{perspective:none}.screen,.overlay{transform:none}.screen:after{opacity:.2}}@media(max-width:640px){.menu-player{gap:.4rem;padding-inline:.75rem;font-size:.8rem}.menu-player-bars{gap:.02rem}.menu-player-time{min-width:2.9rem}}@keyframes itemJerk{0%{transform:translate(0)}50%{transform:translate(.5px,-.5px)}to{transform:translate(0)}}@media(max-width:900px){.text{top:6%;left:6%}.menu{width:min(27rem,78vw)}}@media(max-width:640px){.text{top:5%;left:7%;width:8rem}.menu{width:min(22rem,88vw);min-width:0}.menu footer{flex-direction:column;align-items:stretch}.key,.key:last-child{justify-content:space-between}}
