:root{--teal:#008080;--face:#c0c0c0;--shadow:#808080;--hl:#ffffff;--dark:#000;--navy:#000080;--title2:#1084d0;}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{font-family:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;font-size:11px;color:#000;
background:var(--teal);
background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.08),transparent 60%),repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px);}
.mono{font-family:"VT323",monospace;font-size:15px;line-height:1.05}
.pix{font-family:"Silkscreen",Tahoma,sans-serif}
.out{background:var(--face);border:1px solid;border-color:#dfdfdf #000 #000 #dfdfdf;box-shadow:inset -1px -1px var(--shadow),inset 1px 1px #fff}
.in{background:#fff;border:1px solid;border-color:var(--shadow) #fff #fff var(--shadow);box-shadow:inset 1px 1px #000,inset -1px -1px #dfdfdf}
.btn{background:var(--face);border:none;box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px var(--shadow),inset 2px 2px #dfdfdf;padding:4px 10px;min-width:64px;font:inherit;cursor:pointer}
.btn:active:not(:disabled),.btn.pressed{box-shadow:inset 1px 1px #000,inset -1px -1px #fff,inset 2px 2px var(--shadow),inset -2px -2px #dfdfdf;padding:5px 9px 3px 11px}
.btn:disabled{color:var(--shadow);text-shadow:1px 1px #fff;cursor:default}
.title{background:linear-gradient(90deg,var(--navy),var(--title2));color:#fff;font-weight:bold;padding:3px 3px 3px 5px;display:flex;align-items:center;gap:4px;user-select:none;touch-action:none}
.title.inactive{background:linear-gradient(90deg,#808080,#b5b5b5)}
.tbtn{width:16px;height:14px;background:var(--face);box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px var(--shadow);border:none;font:bold 10px/10px Tahoma;padding:0;color:#000;cursor:pointer}
.tab{padding:3px 10px;margin-right:-2px;background:var(--face);border:1px solid;border-color:#fff #000 transparent #fff;border-radius:3px 3px 0 0;cursor:pointer;position:relative;top:1px;white-space:nowrap}
.tab.active{top:0;padding-bottom:5px;z-index:2;font-weight:bold}
.drop{border:2px dashed #000080;background:repeating-linear-gradient(45deg,#e8e8e8 0 6px,#dcdcdc 6px 12px);transition:background .2s}
.drop.over{background:#ffffcc;border-color:#c00}
.floppy{width:46px;height:46px;background:#202060;position:relative;border-radius:2px;flex:none}
.floppy:before{content:"";position:absolute;left:10px;top:0;width:24px;height:16px;background:#bbb}
.floppy:after{content:"";position:absolute;left:6px;bottom:3px;width:34px;height:20px;background:#eee}
.icon{width:76px;text-align:center;color:#fff;cursor:pointer;padding:4px}
.icon span{display:inline-block;padding:1px 3px;text-shadow:1px 1px #000}
.icon:hover span,.icon:focus span{background:var(--navy);outline:1px dotted #ff0}
.glyph{font-size:30px;line-height:36px;filter:drop-shadow(1px 1px 0 #000)}
.bsod{background:#0000aa;color:#fff;font-family:"VT323",monospace;font-size:22px}
.bsod .hdr{background:#aaa;color:#0000aa;padding:0 8px}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.boot{background:#000;color:#fff}
.mebar{height:10px;width:200px;border:1px solid #444;overflow:hidden;position:relative}
.mebar i{position:absolute;top:1px;height:6px;width:36px;background:linear-gradient(90deg,#1b3bd6,#5ea1ff,#1b3bd6);animation:slide 1.4s linear infinite}
@keyframes slide{from{left:-40px}to{left:210px}}
.slidein{animation:slidein .6s ease-out}
@keyframes slidein{from{transform:translateX(-120%) scale(.6);opacity:0}to{transform:none;opacity:1}}
.pop{animation:pop .18s ease-out}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.balloon{background:#ffffe1;border:1px solid #000;border-radius:8px;padding:8px;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.hl{background:#000080;color:#fff}
.scroll::-webkit-scrollbar{width:16px;height:16px;background:#dfdfdf}
.scroll::-webkit-scrollbar-thumb{background:var(--face);box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px var(--shadow)}
canvas{image-rendering:pixelated}
a{color:#0000ee}