:root{
  --blue:#0000AA; --gray:#AAAAAA; --white:#FFFFFF; --black:#000000; --cyan:#00AAAA; --dgray:#555555;
  --fs:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0a0a12;color:var(--gray);font-family:'VT323','Courier New',monospace;overflow:hidden}
body{background:radial-gradient(ellipse at 50% 40%,#1b1b2a 0%,#07070c 70%)}
#stage{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;gap:6px}
#crt{position:relative;padding:14px;background:linear-gradient(#2b2a26,#1d1c19);border-radius:18px;box-shadow:0 0 0 2px #3a3833,0 20px 60px #000,inset 0 0 20px #000}
#screen{position:relative;overflow:hidden;background:var(--black);font-size:var(--fs);line-height:1.15;border-radius:4px;width:640px;height:480px}
#crt.crt-on #screen{border-radius:22px/18px;filter:saturate(1.15) contrast(1.05)}
#crt.crt-on #screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:70;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,transparent 1px,transparent 3px),
  radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%);}
#crt.crt-on #screen::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:71;background:linear-gradient(transparent 0,rgba(255,255,255,.035) 50%,transparent 100%);background-size:100% 10px;animation:roll 7s linear infinite}
@keyframes roll{from{background-position:0 0}to{background-position:0 100vh}}

#ide{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--blue)}
#menubar{background:var(--gray);color:var(--black);display:flex;white-space:nowrap;padding:0 .4em;user-select:none;flex:none;overflow-x:auto;scrollbar-width:none}
#menubar::-webkit-scrollbar{display:none}
#menubar .mi{padding:0 .6em;cursor:pointer}
#menubar .mi b{color:var(--white);font-weight:normal}
#menubar .mi.open{background:var(--black);color:var(--gray)}
#menubar .spacer{flex:1}
.win{position:relative;border:3px double var(--gray);margin:.6em 0 0;background:var(--blue);display:flex}
#editwin{flex:1;min-height:0}
#immwin{flex:none;height:3.2em}
.wtitle{position:absolute;top:-.7em;left:0;right:0;text-align:center;pointer-events:none;z-index:2;line-height:1.15}
.wtitle span{background:var(--gray);color:var(--blue);padding:0 .4em}
.wtitle span.dim{background:var(--blue);color:var(--gray)}
#editor,#imm{flex:1;width:100%;background:transparent;color:var(--gray);border:0;outline:0;resize:none;font:inherit;line-height:1.15;padding:.35em .5em;caret-color:var(--white);white-space:pre;overflow:auto;border-radius:0}
#editor::selection,#imm::selection{background:var(--gray);color:var(--blue)}
#editor::-webkit-scrollbar{width:.9em;height:.9em;background:var(--black)}
#editor::-webkit-scrollbar-thumb{background:var(--gray);border:3px solid var(--black)}
#editor::-webkit-scrollbar-corner{background:var(--gray)}
#editor{scrollbar-color:var(--gray) var(--black)}
#status{background:var(--cyan);color:var(--white);display:flex;justify-content:space-between;white-space:nowrap;overflow:hidden;padding:0 .5em;flex:none;margin-top:2px}
#st-left{overflow:hidden;text-overflow:ellipsis}
#st-right{color:var(--black);padding-left:1em;flex:none}

#outwrap{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:20}
.hidden{display:none!important}
#canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}

#menus{position:absolute;inset:0;pointer-events:none;z-index:30}
.dd{position:absolute;pointer-events:auto;background:var(--gray);color:var(--black);border:3px double var(--black);outline:2px solid var(--gray);box-shadow:.7em .7em 0 rgba(0,0,0,.85);min-width:12em;padding:.15em 0;white-space:nowrap;user-select:none}
.dd .it{display:flex;justify-content:space-between;gap:2em;padding:0 1em;cursor:pointer}
.dd .it b{color:var(--white);font-weight:normal}
.dd .it.sel{background:var(--black);color:var(--gray)}
.dd .sep{border-top:2px solid var(--black);margin:.2em 0}

#dlgroot{position:absolute;inset:0;z-index:40;pointer-events:none}
.dlg-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;outline:0}
.dlg{background:var(--gray);color:var(--black);border:3px double var(--black);outline:3px solid var(--gray);box-shadow:1em 1em 0 rgba(0,0,0,.85);max-width:94%;max-height:88%;display:flex;flex-direction:column;min-width:min(22em,90%);animation:pop .14s steps(3)}
.dlg.wide{width:58em}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.dlg-title{text-align:center;padding:.1em 0}
.dlg-title span{background:var(--black);color:var(--gray);padding:0 .5em}
.dlg-title span:empty{display:none}
.dlg-body{padding:.3em 1.1em;overflow:auto}
.dlg-body p{margin:.3em 0}
.dlg-body .c{text-align:center}
.dlg-body pre{margin:.2em 0;font:inherit;white-space:pre-wrap;color:var(--blue)}
.dlg-body h4{margin:.5em 0 .1em;font-weight:normal;color:var(--white);background:var(--blue);display:inline-block;padding:0 .4em}
.dlg-btns{display:flex;justify-content:center;gap:1em;border-top:2px solid var(--black);padding:.3em .5em;flex-wrap:wrap}
.dbtn{background:transparent;border:0;font:inherit;color:var(--black);cursor:pointer;padding:.05em .3em;min-height:1.6em}
.dbtn:focus,.dbtn:hover{outline:0;color:var(--white);background:var(--black)}
.dinp{display:block;width:100%;margin:.4em 0;background:var(--black);color:var(--white);border:0;font:inherit;padding:.1em .4em;outline:0;caret-color:var(--white)}
.dlist{background:var(--blue);color:var(--gray);border:3px double var(--black);max-height:12em;overflow:auto;margin:.4em 0;outline:0}
.dlist .li{padding:0 .5em;cursor:pointer;white-space:pre}
.dlist .li.sel{background:var(--gray);color:var(--blue)}

#boot{position:absolute;inset:0;background:#000;color:var(--gray);z-index:60;padding:.6em 1em;white-space:pre;cursor:pointer}
#boot .cur{animation:blink 1s steps(1) infinite}

#controls{display:none;gap:4px;flex-wrap:wrap;justify-content:center;max-width:100%}
#controls button{font-family:'VT323',monospace;font-size:20px;background:var(--gray);color:var(--black);border:0;min-width:44px;min-height:40px;padding:0 10px;box-shadow:3px 3px 0 #000;cursor:pointer;touch-action:manipulation}
#controls button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000;background:var(--white)}
@media (max-width:900px),(pointer:coarse){#controls{display:flex}}

footer{display:flex;gap:2em;justify-content:center;font-size:18px;color:var(--gray);flex-wrap:wrap}
footer a{color:#55FFFF;text-decoration:none}
footer a:hover{background:#55FFFF;color:#000}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#kb{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;font-size:16px;border:0;padding:0}