:root{--bg:#14141c;--panel:#1d1d29;--line:#33334a;--mag:#ff3fa4;--cyan:#3ff0ff;--yel:#ffe14d;--txt:#e8e6f5;--dim:#8a87a8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'IBM Plex Mono',monospace;
background-image:radial-gradient(circle at 20% 0%,#2a1640 0,transparent 45%),radial-gradient(circle at 100% 100%,#0e2d3a 0,transparent 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px);min-height:100vh}
.px{font-family:'Silkscreen',monospace}
.panel{background:var(--panel);border:2px solid var(--line);border-radius:4px;box-shadow:4px 4px 0 #0a0a10}
.btn{font-family:'Silkscreen',monospace;font-size:12px;padding:6px 10px;background:#2a2a3c;border:2px solid #000;box-shadow:inset -2px -2px 0 #15151f,inset 2px 2px 0 #4a4a66;color:var(--txt);cursor:pointer;user-select:none}
.btn:active{box-shadow:inset 2px 2px 0 #15151f,inset -2px -2px 0 #4a4a66;transform:translateY(1px)}
.btn.on{background:var(--mag);color:#14141c}
.btn.cy{background:var(--cyan);color:#14141c}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.crt{position:relative}
.crt::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);border-radius:4px}
select,input{background:#0f0f17;border:1px solid var(--line);color:var(--txt);padding:3px 5px;font-family:inherit;font-size:12px}
.key{font-family:'Silkscreen';width:100%;aspect-ratio:1.3;background:#22222f;border:2px solid #000;box-shadow:inset -2px -2px 0 #111,inset 2px 2px 0 #444460;color:var(--cyan)}
.key.down{background:var(--cyan);color:#000}
.pusher{display:inline-block;animation:push 1.2s steps(4) infinite}
@keyframes push{50%{transform:translateX(4px)}}
.rise{animation:rise .5s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:var(--line)}