@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');
:root{--cyan:#54f7e6;--pink:#ff4bd8;--yellow:#ffe66d}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 15%,#20215a,#0b0d2b 45%,#050616);color:#e8faff;font-family:'Share Tech Mono',monospace;display:flex;align-items:center;justify-content:center;padding:20px}.cabinet{width:min(920px,100%);padding:24px;border:1px solid #4b5db5;background:#101338ed;box-shadow:0 0 45px #5266ff33;border-radius:8px}header,.bar,footer{display:flex;justify-content:space-between;align-items:center}.brand{font:17px 'Press Start 2P';color:var(--cyan);text-shadow:0 0 14px #54f7e6}.brand small{display:block;font:10px 'Share Tech Mono';letter-spacing:4px;color:#aab6ff;margin:9px 0 0 28px}.meta,.bar{font-size:12px;letter-spacing:2px;color:#aab6ff}.screen{max-width:680px;margin:22px auto;padding:12px 14px;background:#030414;border:2px solid #6674cf;box-shadow:0 0 22px #5266ff30}.bar{padding:4px 2px 9px}.bar b{color:var(--yellow);font-weight:normal}canvas{display:block;width:100%;height:auto;background:#080b2b;border:1px solid #242d72;image-rendering:pixelated}.controls{max-width:680px;margin:auto;display:flex;justify-content:space-between;gap:25px}h1{font:20px 'Press Start 2P';color:var(--pink)}.controls p{font-size:16px;line-height:1.5;color:#c4ccff}.keys{color:var(--cyan);font-size:20px}.keys small{font-size:10px;color:#9ba8e8;margin:0 10px}kbd{font-size:11px;border:1px solid #6877d0;padding:6px 10px}.actions{display:flex;flex-direction:column;align-items:flex-end;min-width:190px}button{font:11px 'Press Start 2P';padding:15px 12px;border:1px solid var(--cyan);background:#102d49;color:var(--cyan);cursor:pointer}button:hover{background:#174967}.secondary{margin-top:10px;border-color:#8b72cf;color:#c9b7ff;background:#211842;font-size:9px}#message{font-size:11px;color:var(--yellow);text-align:right;line-height:1.5}footer{margin-top:24px;padding-top:14px;border-top:1px solid #343b7b;color:#6674b8;font-size:10px;letter-spacing:1px}footer span{color:#8e83c9}@media(max-width:650px){.cabinet{padding:13px}.brand{font-size:12px}.meta{font-size:9px}.controls{display:block}.actions{align-items:flex-start;margin-top:20px}#message{text-align:left}footer{font-size:8px;gap:8px}.controls p{font-size:14px}}