:root { --desk:#a0a0a4; --title:#a6caf0; --gray:#c0c0c0; --dark:#808080; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--desk);
  font-family:'vgasys','VT323',monospace; font-size:18px; color:#000; user-select:none; -webkit-user-select:none; }
canvas,img { image-rendering:pixelated; }
.desk { position:fixed; inset:0 0 34px 0; }
.icon { position:absolute; width:84px; text-align:center; cursor:default; }
.icon .glyph { width:40px; height:40px; margin:0 auto 2px; }
.icon span { padding:0 3px; line-height:1.05; display:inline-block; }
.icon.sel span { background:#000080; color:#fff; }
.win { position:absolute; background:var(--gray); border:1px solid #000; padding:3px; display:flex; flex-direction:column; }
.win::after { content:""; position:absolute; inset:-1px; pointer-events:none;
  border:1px solid transparent; outline:none;
  background:
   linear-gradient(#000,#000) 22px 0/1px 4px no-repeat,
   linear-gradient(#000,#000) calc(100% - 22px) 0/1px 4px no-repeat,
   linear-gradient(#000,#000) 22px 100%/1px 4px no-repeat,
   linear-gradient(#000,#000) calc(100% - 22px) 100%/1px 4px no-repeat,
   linear-gradient(#000,#000) 0 22px/4px 1px no-repeat,
   linear-gradient(#000,#000) 100% 22px/4px 1px no-repeat,
   linear-gradient(#000,#000) 0 calc(100% - 22px)/4px 1px no-repeat,
   linear-gradient(#000,#000) 100% calc(100% - 22px)/4px 1px no-repeat; }
.tbar { display:flex; height:22px; border:1px solid #000; }
.tbtn { width:21px; height:20px; background:var(--gray); border-right:1px solid #000; position:relative; flex:none; }
.tbtn.r { border-right:none; border-left:1px solid #000; box-shadow:inset 1px 1px #fff, inset -2px -2px var(--dark); }
.tbtn.menu::before { content:""; position:absolute; left:4px; top:8px; width:12px; height:3px; background:#fff; border:1px solid #000; box-shadow:1px 1px var(--dark); }
.tri { position:absolute; left:5px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; }
.tri.dn { top:7px; border-top:5px solid #000; }
.tri.up { top:6px; border-bottom:5px solid #000; }
.ttext { flex:1; text-align:center; line-height:20px; overflow:hidden; white-space:nowrap; background:#fff; }
.win.active .ttext { background:var(--title); }
.mbar { display:flex; background:#fff; border:1px solid #000; border-top:none; position:relative; }
.mbar > div { padding:0 8px; cursor:default; }
.mbar > div.open { background:#000080; color:#fff; }
.drop { position:absolute; top:100%; background:#fff; border:1px solid #000; box-shadow:2px 2px #000; z-index:50; min-width:130px; color:#000; }
.drop div { padding:1px 14px; white-space:nowrap; }
.drop div:hover { background:#000080; color:#fff; }
.content { flex:1; background:#fff; border:1px solid #000; border-top:none; overflow:auto; position:relative; }
.status { display:flex; gap:4px; padding-top:3px; font-size:16px; }
.status > div { border:1px solid; border-color:var(--dark) #fff #fff var(--dark); padding:0 4px; white-space:nowrap; overflow:hidden; }
.btn { background:var(--gray); border:1px solid #000; box-shadow:inset 1px 1px #fff, inset -2px -2px var(--dark); padding:3px 16px; font:inherit; min-width:76px; cursor:pointer; }
.btn:active { box-shadow:inset 2px 2px var(--dark); }
.btn:focus-visible span, .btn.def span { outline:1px dotted #000; }
.modal-bg { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; }
.dlg { background:var(--gray); border:2px solid #000; width:min(360px,92vw); box-shadow:3px 3px #000; }
.dlg .ttext { background:var(--title); border-bottom:1px solid #000; }
.dlg-body { padding:14px; display:flex; gap:12px; align-items:flex-start; }
.dlg-btns { display:flex; justify-content:center; gap:10px; padding-bottom:12px; }
.task { position:fixed; left:0; right:0; bottom:0; height:34px; background:var(--gray); border-top:2px solid #fff; display:flex; align-items:center; gap:6px; padding:0 6px; z-index:8000; }
.task a { color:#000; text-decoration:none; }
.minicon { position:absolute; bottom:6px; width:84px; text-align:center; }
input.txt { font:inherit; border:1px solid #000; box-shadow:inset 1px 1px var(--dark); padding:2px 4px; width:100%; }