:root{--blue:#0000AA;--gray:#AAAAAA;--cyan:#00AAAA;--yellow:#FFFF55;--white:#FFFFFF;--black:#000;--dk:#555555}
*{box-sizing:border-box}
html,body{margin:0;background:var(--blue);color:var(--gray);font-family:'VT323',ui-monospace,monospace;font-size:20px;line-height:1.15}
.menubar{background:var(--gray);color:var(--black);display:flex;gap:18px;padding:2px 10px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.menubar span{cursor:pointer;padding:0 4px}
.menubar span:hover{background:var(--black);color:var(--gray)}
.menubar span b{color:var(--white);font-weight:normal}
.menubar span:hover b{color:var(--white)}
.panel{border:4px double var(--gray);background:var(--blue);box-shadow:12px 12px 0 var(--black);position:relative;padding:14px 10px 10px;margin-top:10px;animation:pop .4s ease both}
.panel.dialog{background:var(--gray);color:var(--black);border-color:var(--white)}
.panel-title{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gray);color:var(--black);padding:0 8px;white-space:nowrap}
.dialog .panel-title{background:var(--blue);color:var(--white)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.btn{background:transparent;border:none;color:inherit;font:inherit;cursor:pointer;padding:0 2px;white-space:nowrap}
.btn:hover,.btn.on{background:var(--black);color:var(--white)}
.dialog .btn:hover{background:var(--blue);color:var(--yellow)}
.opt{cursor:pointer;display:inline-block;margin-right:10px;user-select:none}
.opt:hover{color:var(--white)}
.dialog .opt:hover{color:var(--blue)}
.opt.sel{color:var(--yellow)}
.dialog .opt.sel{color:var(--blue);text-decoration:underline}
.dosin{background:var(--black);color:var(--yellow);border:none;font:inherit;width:70px;padding:0 4px}
.dossel{background:var(--black);color:var(--yellow);border:none;font:inherit;padding:0 4px;max-width:100%}
input[type=range]{accent-color:var(--cyan);width:100%}
.drop{border:2px dashed var(--cyan);padding:14px;text-align:center;cursor:pointer;color:var(--cyan)}
.drop.over{background:var(--cyan);color:var(--blue)}
.pix{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.code{background:var(--blue);color:var(--gray);white-space:pre;overflow:auto;max-height:420px;font-size:19px;padding:6px;border-top:1px solid var(--gray)}
.k{color:var(--white)}.s{color:var(--yellow)}.n{color:#55FFFF}.c{color:#55FF55}
.tab{padding:0 8px;cursor:pointer}
.tab.on{background:var(--cyan);color:var(--black)}
.status{background:var(--cyan);color:var(--black);display:flex;justify-content:space-between;padding:2px 10px;flex-wrap:wrap;gap:8px;margin-top:24px}
.status a{color:var(--blue)}
.cursor{display:inline-block;width:.6em;height:1em;background:var(--yellow);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.crt::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 120px rgba(0,0,0,.6)}
.crt{text-shadow:0 0 3px rgba(170,170,255,.45)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.dosrun{position:fixed;inset:0;background:#000;color:#AAA;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.ok{color:#55FF55}.bad{color:#FF5555}
.dialog .ok{color:#006600}.dialog .bad{color:#AA0000}