:root{--g:#c0c0c0;--dk:#808080;--nv:#000080;--teal:#008080;--mag:#d000d0}
*{border-radius:0!important}
body{margin:0;font-family:'Pixelify Sans',monospace;font-size:14px;color:#000;
background-color:var(--teal);
background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1px);background-size:4px 4px}
.mono{font-family:'IBM Plex Mono',monospace}
.w3win{background:var(--g);border:1px solid #000;box-shadow:inset 0 0 0 3px var(--g),inset 0 0 0 4px #000}
.w3title{background:var(--nv);color:#fff;font-weight:700;text-align:center;height:22px;line-height:22px;position:relative;letter-spacing:.5px;font-size:13px}
.w3title .sys{position:absolute;left:0;top:0;width:22px;height:22px;background:var(--g);border-right:1px solid #000}
.w3title .sys:after{content:'';position:absolute;left:4px;top:9px;width:13px;height:4px;background:#fff;border:1px solid #000}
.w3title .mm{position:absolute;top:0;width:22px;height:22px;background:var(--g);border-left:1px solid #000;color:#000;font-size:10px;line-height:22px}
.pane{background:var(--g);border:1px solid #000}
.pane>.ph{background:#fff;color:#000;border-bottom:1px solid #000;font-weight:700;text-align:center;font-size:12px;padding:2px}
.sunk{border:2px solid;border-color:#808080 #fff #fff #808080;background:#fff}
.btn{background:var(--g);border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px #808080;padding:2px 10px;cursor:pointer;font-family:inherit;font-size:13px;outline:1px solid #000}
.btn:active,.btn.on{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px #808080}
.btn:disabled{color:#808080}
.menu-item{padding:1px 8px;cursor:pointer}
.menu-item:hover,.menu-item.open{background:var(--nv);color:#fff}
.dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid #000;box-shadow:2px 2px 0 #000;z-index:50;min-width:210px}
.dropdown div{padding:3px 14px;cursor:pointer;white-space:nowrap}
.dropdown div:hover{background:var(--nv);color:#fff}
.dropdown hr{border:0;border-top:1px solid #000;margin:2px 0}
.flash{background:#ffff00!important;transition:none}
.reg{transition:background .4s}
.led{width:22px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;border:1px solid #000;font-weight:700}
.led.on{background:#e00000;color:#fff;box-shadow:0 0 6px #f00}
.led.off{background:#400;color:#a66}
.disline{white-space:pre;font-size:11.5px;line-height:15px;padding:0 4px}
.disline.cur{background:var(--nv);color:#fff}
.disline.magic{color:var(--mag);font-weight:700}
.disline.cur.magic{background:var(--mag);color:#fff}
.hex{font-size:11px;line-height:15px;white-space:pre}
.hb{padding:0 1px}
.hb.th{outline:1px solid var(--mag);color:var(--mag);font-weight:700}
.hb.imp{background:#ffd27f}
.hb.ip{background:#ff0}
.crtwrap{position:relative}
.crt:after{content:'';position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
box-shadow:inset 0 0 60px rgba(0,0,0,.45)}
canvas{image-rendering:pixelated;touch-action:none;display:block;width:100%;height:auto;cursor:default}
.logbox{font-size:11px;line-height:14px;white-space:pre-wrap;word-break:break-all}
.lg-hle{color:var(--mag)} .lg-ld{color:#806000} .lg-err{color:#c00;font-weight:700}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:100}
input[type=range]{accent-color:var(--nv)}
.boot{animation:boot .5s steps(6) both}
@keyframes boot{from{opacity:0;transform:scaleY(.02)}to{opacity:1;transform:none}}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}