@font-face { font-family: 'Print Char 21'; src: url('./fonts/PrintChar21.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { color-scheme: dark; --phosphor: #49ff42; --glow: #44ff3526; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at top, #19221b 0%, #0b0e0c 65%); color: #b6c5b8; font-family: ui-monospace, Menlo, Consolas, monospace; }
main { max-width: 1100px; margin: 0 auto; padding: 36px 24px; }
header { text-align: center; margin-bottom: 28px; }
.eyebrow { font-size: 11px; letter-spacing: .22em; color: #829283; }
h1 { color: var(--phosphor); font-family: 'Print Char 21', monospace; font-weight: 400; font-size: clamp(16px, 3vw, 32px); letter-spacing: 0; text-shadow: 0 0 18px var(--glow); margin: 16px 0 12px; }
.intro { font-size: 13px; }
.machine { padding: 28px 28px 18px; border: 4px solid #353936; border-radius: 24px; background: linear-gradient(140deg, #242a24, #101310 70%); box-shadow: 0 20px 60px #0008, inset 0 0 22px #000; }
.screen { position: relative; padding: 16px; border: 3px solid #363f32; border-radius: 12px; background: #030b04; box-shadow: 0 0 30px var(--glow), inset 0 0 12px #000; overflow: hidden; }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, #0002 3px, #0002 4px); }
#terminal { width: 100%; overflow-x: auto; }
.xterm { padding: 4px; width: fit-content; margin: auto; }
.badge { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 4px 0; color: #7e8a7b; letter-spacing: .2em; font-size: 10px; }
#lamp { width: 9px; height: 9px; border-radius: 50%; background: #273827; flex-shrink: 0; }
#lamp.online { background: var(--phosphor); box-shadow: 0 0 14px var(--phosphor); }
.controls, .actions, .display-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.controls { justify-content: space-between; margin-top: 22px; }
button, select { background: #161e18; border: 1px solid #455746; border-radius: 4px; color: #c8d8ca; padding: 10px 14px; font: inherit; font-size: 12px; }
button { cursor: pointer; }
button:hover:enabled { color: var(--phosphor); border-color: var(--phosphor); }
button:disabled, select:disabled { opacity: .45; cursor: default; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 4px; }
label { font-size: 12px; }
#status { font-size: 12px; color: var(--phosphor); margin: 20px 0; }
footer { font-size: 11px; line-height: 1.8; color: #91a092; }
footer a { color: var(--phosphor); text-underline-offset: 3px; }
@media (max-width: 600px) { main { padding: 24px 10px; } .machine { padding: 14px 10px; border-radius: 16px; } .screen { padding: 8px 4px; } .badge { letter-spacing: .08em; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .xterm-cursor-layer { animation: none !important; } }