:root{--blue:#0000AA;--gray:#AAAAAA;--white:#FFFFFF;--cyan:#00AAAA;--black:#000;--yellow:#FFFF55}
*{box-sizing:border-box}
body{margin:0;background:var(--blue);color:var(--gray);font-family:'VT323',monospace;font-size:20px;line-height:1.15}
.mono{font-family:'IBM Plex Mono',monospace;font-size:13px}
.menubar{background:var(--gray);color:var(--black);display:flex;gap:18px;padding:2px 10px;position:sticky;top:0;z-index:20}
.menubar b{color:#AA0000;font-weight:normal}
.statusbar{background:var(--cyan);color:var(--black);padding:2px 10px;position:sticky;bottom:0;display:flex;gap:16px;flex-wrap:wrap;z-index:20}
.win{border:4px double var(--gray);padding:10px 10px 10px;position:relative;margin-top:14px;animation:pop .4s both}
.win>.ttl{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--blue);padding:0 8px;color:var(--white);white-space:nowrap}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.btn{background:none;border:none;color:var(--white);font:inherit;cursor:pointer;padding:0 4px}
.btn:hover,.btn.on{background:var(--gray);color:var(--blue)}
select,input[type=number]{background:var(--black);color:var(--yellow);border:1px solid var(--gray);font:inherit;padding:0 4px}
input[type=range]{accent-color:var(--cyan);width:100%}
input[type=checkbox]{accent-color:var(--cyan)}
.drop{border:2px dashed var(--gray);padding:18px;text-align:center;cursor:pointer}
.drop.over{background:var(--cyan);color:var(--black)}
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges;background:#000;max-width:100%}
.scroll{overflow:auto}
.code{background:var(--blue);color:var(--gray);white-space:pre;max-height:420px;overflow:auto;padding:6px;border:1px solid #5555FF}
.kw{color:var(--white);font-weight:700}.cm{color:#55FFFF}.st{color:#FFFF55}.nm{color:#FF55FF}
.hex span{padding:0 1px}
.cursor{display:inline-block;width:.6em;height:1em;background:var(--gray);vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.crt::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);z-index:50}
.modal{position:fixed;inset:0;background:#000;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray)}
.warn{color:#FF5555}
a{color:var(--yellow)}
table td{padding:0 6px;border-bottom:1px dotted #5555FF}