:root{
  --blue:#0000AA; --dblue:#000055; --cyan:#00AAAA; --lcyan:#55FFFF;
  --gray:#AAAAAA; --white:#FFFFFF; --yellow:#FFFF55; --red:#AA0000; --lred:#FF5555; --green:#55FF55;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--dblue);color:var(--gray);font-family:'VT323',monospace;font-size:19px}
body{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at top, #0000aa 0%, #000044 70%, #000022 100%);
  min-height:100vh;
}
button{font-family:inherit;border-radius:0}
.dos-btn{background:var(--gray);color:#000;padding:2px 12px;border:none;box-shadow:3px 3px 0 #000;font-size:20px;cursor:pointer;white-space:nowrap}
.dos-btn:hover{background:var(--white)}
.dos-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.dos-btn.hot{background:var(--cyan);color:#000}
.dos-btn.red{background:var(--lred)}
.box{border:4px double var(--gray);background:var(--blue);position:relative}
.box-title{position:absolute;top:-14px;left:14px;background:var(--blue);color:var(--yellow);padding:0 6px;font-size:20px;line-height:22px}
.screen-wrap{position:relative;background:#000;border:4px double var(--gray);outline:none}
.screen-wrap:focus{border-color:var(--lcyan)}
.screen-wrap canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.screen-wrap.crt canvas{filter:drop-shadow(0 0 2px rgba(200,200,255,.55)) contrast(1.1)}
.screen-wrap.crt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 60px rgba(0,0,0,.8)}
.tab{background:var(--dblue);color:var(--gray);border:none;padding:0 8px;font-size:19px;cursor:pointer}
.tab.on{background:var(--cyan);color:#000}
.led{display:inline-flex;flex-direction:column;align-items:center;width:34px;font-size:18px}
.led i{width:16px;height:16px;border:2px solid #000;background:#330000;display:block;margin-bottom:2px}
.led.on i{background:var(--lred);box-shadow:0 0 8px var(--lred)}
.reg{background:#000;color:var(--gray);padding:0 6px;transition:background .5s,color .5s}
.reg.chg{background:var(--yellow);color:#000;transition:none}
.mono-scroll{overflow:auto;scrollbar-color:var(--cyan) var(--dblue)}
.dis-row{cursor:pointer;white-space:pre}
.dis-row:hover{background:var(--dblue)}
.dis-row.cur{background:var(--cyan);color:#000}
.editor{background:#000;color:var(--lcyan);font-family:'VT323',monospace;font-size:19px;line-height:1.05;border:none;outline:none;resize:vertical;width:100%;padding:8px;caret-color:var(--yellow)}
.dos-in{background:#000;color:var(--white);border:2px solid var(--gray);font-family:inherit;font-size:19px;padding:0 6px;outline:none}
.op-cell{font-size:14px;line-height:1;padding:3px 1px;text-align:center;cursor:help;border:1px solid #000;overflow:hidden;min-height:30px}
.cat-alu{background:#004d4d;color:#55ffff}.cat-jump{background:#550055;color:#ff77ff}.cat-mov{background:#004400;color:#77ff77}
.cat-stack{background:#553300;color:#ffcc55}.cat-string{background:#003366;color:#88bbff}.cat-misc{background:#333;color:#ddd}
.cat-prefix{background:#440000;color:#ff8888}.cat-none{background:#111;color:#444}
.turbo-led{width:12px;height:12px;display:inline-block;border:1px solid #000;background:#330;margin-right:6px;vertical-align:middle}
.turbo-led.on{background:#ffff55;box-shadow:0 0 10px #ff5}
.boot{animation:boot .6s steps(6) both}
@keyframes boot{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
input[type=range]{accent-color:var(--cyan)}
a{color:var(--yellow)}