:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #05070c; }
body {
    display: grid; place-items: center; overflow: hidden; color: #aebbd0;
    font-family: "Courier New", monospace;
    background: radial-gradient(ellipse at center, #20283a 0, #090b12 48%, #020307 100%);
}
.cabinet { width: min(96vw, 1280px); text-align: center; filter: drop-shadow(0 12px 28px #000); }
.brand { color: #ffe04b; font-weight: 900; font-size: clamp(14px, 2.4vw, 30px); letter-spacing: .28em; text-shadow: 0 0 9px #ff7a18; margin: 0 0 .3em; }
.screen { position: relative; padding: clamp(4px, .8vw, 10px); border: 2px solid #566579; border-radius: 7px; background: linear-gradient(135deg, #1b2330, #080a10); box-shadow: inset 0 0 0 2px #090b12, inset 0 0 20px #000; }
.screen::after { content: ""; pointer-events: none; position: absolute; inset: 5px; background: repeating-linear-gradient(0deg, transparent 0 3px, #00000018 3px 4px); mix-blend-mode: multiply; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 16/9; background: #090b12; image-rendering: pixelated; outline: none; cursor: crosshair; }
canvas:focus { box-shadow: 0 0 0 1px #37d8ff, 0 0 18px #37d8ff55; }
p { margin: .55em 0 0; font-size: clamp(11px, 1.25vw, 16px); font-weight: bold; color: #aebbd0; text-shadow: 0 1px #000; }
@media (max-height: 540px) { .brand, p { display: none; } .cabinet { width: min(96vw, 172vh); } }