* { box-sizing: border-box; }
/* colors and metrics from HKCU\Control Panel\Colors and WindowMetrics */
:root {
  --face: #d4d0c8; --hi: #fff; --shadow: #808080; --dk: #404040; --sel: #0a246a;
  /* first shadow paints on top: outer before inner, bottom-right before top-left, so BR owns the corners like DrawEdge */
  --raised: inset -1px -1px var(--dk), inset 1px 1px var(--face), inset -2px -2px var(--shadow), inset 2px 2px var(--hi);
  --button: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--shadow), inset 2px 2px var(--face);
  --pushed: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--face), inset 2px 2px var(--shadow);
  --sunk: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--face), inset 2px 2px var(--dk);
}
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  display: flex; flex-direction: column; background: #008080; color: #000;
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
}
button { font: inherit; color: inherit; }
svg { shape-rendering: crispEdges; }
.btn, .b, .task { background: var(--face); border: 0; box-shadow: var(--button); cursor: default; }
.btn { min-width: 74px; height: 23px; padding: 0 8px; }
.btn:active, .btn.on, .task.on, .b:active { box-shadow: var(--pushed); }
.b:active svg { transform: translate(1px, 1px); }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.sunk { box-shadow: var(--sunk); }

#desk { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#icons { position: absolute; inset: 0; }
.ico {
  position: absolute; margin: 6px 0 0; width: 75px; touch-action: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0; background: none; border: 0; color: #fff; text-align: center; cursor: default;
}
.ico svg { width: 32px; height: 32px; }
.ico:focus { outline: 0; }
.ico span { padding: 1px 2px; }
.ico.sel span { background: var(--sel); color: #fff; outline: 1px dotted #fff; }

.win {
  position: absolute; display: flex; flex-direction: column; padding: 4px; overflow: hidden;
  min-width: 160px; min-height: 80px; resize: both; background: var(--face); box-shadow: var(--raised);
}
.win[hidden] { display: none; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; resize: none; }
.tb {
  display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 2px; flex: none;
  background: var(--face); color: #000; font-weight: bold; user-select: none; touch-action: none;
}
.tb svg { width: 16px; height: 16px; flex: none; }
.tb .t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b { width: 16px; height: 14px; padding: 0; flex: none; }
.b svg { display: block; width: 16px; height: 14px; }
.b.mx { margin-left: -3px; }
.b.x { margin-left: -1px; }
.b .m2, .max .b .m1 { display: none; }
.max .b .m2 { display: block; }
.client { flex: 1; min-height: 0; margin-top: 3px; display: flex; flex-direction: column; position: relative; }
.menubar { display: flex; gap: 12px; padding: 2px 6px 3px; }
.host { flex: 1; min-height: 0; position: relative; padding: 2px; overflow: hidden; background: #fff; }
.doc { background: var(--shadow); }
.doc img { display: block; width: 100%; max-width: 850px; margin: 8px auto; }

.files { display: flex; flex-wrap: wrap; align-content: flex-start; padding: 6px 2px; }
.fi { position: static; margin: 0 0 10px; color: #000; }
.fi.sel span { outline-color: #000; }
.status { flex: none; display: flex; margin-top: 2px; height: 20px; }
.status span { flex: 1; display: flex; align-items: center; padding: 0 4px; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); }

/* classic scrollbar, metrics from ScrollWidth/ScrollHeight (16px) */
.sc { position: absolute; top: 2px; left: 2px; bottom: 2px; right: 18px; overflow: auto; scrollbar-width: none; }
.sc::-webkit-scrollbar { display: none; }
.vbar { position: absolute; top: 2px; right: 2px; bottom: 2px; width: 16px; display: flex; flex-direction: column; }
.sb { flex: none; width: 16px; height: 16px; padding: 0; border: 0; background: var(--face) no-repeat 0 0 / 16px 16px; box-shadow: var(--button); }
.sb.up { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='7' y='6' width='1' height='1'/><rect x='6' y='7' width='3' height='1'/><rect x='5' y='8' width='5' height='1'/><rect x='4' y='9' width='7' height='1'/></svg>"); }
.sb.dn { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='4' y='6' width='7' height='1'/><rect x='5' y='7' width='5' height='1'/><rect x='6' y='8' width='3' height='1'/><rect x='7' y='9' width='1' height='1'/></svg>"); }
.vbar:not(.off) .sb:active { box-shadow: inset 0 0 0 1px var(--shadow); background-position: 1px 1px; }
.vbar.off .sb.up { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='8' y='7' width='1' height='1' fill=%27%23fff%27/><rect x='7' y='8' width='3' height='1' fill=%27%23fff%27/><rect x='6' y='9' width='5' height='1' fill=%27%23fff%27/><rect x='5' y='10' width='7' height='1' fill=%27%23fff%27/><rect x='7' y='6' width='1' height='1' fill=%27%23808080%27/><rect x='6' y='7' width='3' height='1' fill=%27%23808080%27/><rect x='5' y='8' width='5' height='1' fill=%27%23808080%27/><rect x='4' y='9' width='7' height='1' fill=%27%23808080%27/></svg>"); }
.vbar.off .sb.dn { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='5' y='7' width='7' height='1' fill=%27%23fff%27/><rect x='6' y='8' width='5' height='1' fill=%27%23fff%27/><rect x='7' y='9' width='3' height='1' fill=%27%23fff%27/><rect x='8' y='10' width='1' height='1' fill=%27%23fff%27/><rect x='4' y='6' width='7' height='1' fill=%27%23808080%27/><rect x='5' y='7' width='5' height='1' fill=%27%23808080%27/><rect x='6' y='8' width='3' height='1' fill=%27%23808080%27/><rect x='7' y='9' width='1' height='1' fill=%27%23808080%27/></svg>"); }
.trk { position: relative; flex: 1; background: repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
.thumb { position: absolute; left: 0; width: 16px; background: var(--face); box-shadow: var(--raised); }
.vbar.off .thumb { display: none; }

.proj { flex-direction: row; gap: 12px; padding: 12px; }
.pthumb { width: 96px; height: 72px; flex: none; background: var(--shadow); box-shadow: var(--sunk); }
.pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pinfo { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 0; }
.pinfo b { font-size: 12px; overflow-wrap: anywhere; }

#modal { position: fixed; inset: 0; z-index: 3000; }
.dlg { left: 50%; top: 40%; transform: translate(-50%, -50%); width: 320px; max-width: 94vw; min-width: 0; min-height: 0; resize: none; }
.dbody { display: flex; align-items: center; gap: 14px; padding: 18px 16px; }
.dbody svg { width: 32px; height: 32px; flex: none; }
.ok { align-self: center; margin-bottom: 10px; outline: 1px solid #000; outline-offset: 0; }

#taskbar {
  position: relative; z-index: 1000; display: flex; align-items: center; gap: 2px; flex: none;
  height: 28px; padding: 3px 2px 2px; background: var(--face); box-shadow: inset 0 1px var(--face), inset 0 2px var(--hi);
}
#start { display: flex; align-items: center; gap: 4px; min-width: 0; height: 22px; padding: 0 6px; font-weight: bold; }
#start svg { width: 16px; height: 16px; transform-origin: 50% 90%; }
#start.hi svg { animation: wave 1s ease-in-out .6s 2; }
#start:hover svg { animation: wave 1s ease-in-out; }
@keyframes wave { 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { #start.hi svg, #start:hover svg { animation: none; } }
#tasks { flex: 1; min-width: 0; display: flex; gap: 2px; }
.task { flex: 0 1 160px; min-width: 0; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 6px; text-align: left; }
.task svg { width: 16px; height: 16px; flex: none; }
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task.on { font-weight: bold; }
#tray { height: 22px; padding: 0 10px; display: flex; align-items: center; box-shadow: var(--sunk); }

#menu {
  position: fixed; left: 2px; bottom: 28px; z-index: 1001; display: flex; padding: 3px;
  background: var(--face); box-shadow: var(--raised);
}
#menu[hidden] { display: none; }
.banner { width: 24px; margin-right: 3px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; background: var(--shadow); color: var(--face); }
.banner span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px; font-weight: bold; }
.mi { position: relative; display: flex; align-items: center; gap: 10px; min-width: 170px; padding: 5px 24px 5px 6px; cursor: default; }
.mi svg { width: 32px; height: 32px; flex: none; }
.mi:hover { background: var(--sel); color: #fff; }
.mi hr, .mis > hr, .sub hr { margin: 3px 2px; border: 0; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--hi); }
.arr { position: absolute; right: 8px; border: 4px solid transparent; border-left-color: currentColor; border-right: 0; }
.sub {
  display: none; position: absolute; left: 100%; top: -3px; min-width: 150px; padding: 3px;
  background: var(--face); color: #000; box-shadow: var(--raised);
}
.has:hover > .sub, .has.open > .sub { display: block; }
.sub .mi { min-width: 0; gap: 8px; padding: 3px 16px 3px 4px; }
.sub .mi svg { width: 16px; height: 16px; }
.sub .mi:hover { color: #fff; }

#scr { position: fixed; inset: 0; z-index: 9999; font: 16px/1.4 "Lucida Console", "Courier New", monospace; }
#scr.off { display: grid; place-items: center; background: #000; color: #ff8000; font-size: 20px; text-align: center; opacity: 0; transition: opacity 1s linear; }
#scr.off.go { opacity: 1; }
#scr.bsod { padding: 8vh 8vw; background: #0000aa; color: #fff; white-space: pre-wrap; }
.hd { display: table; margin: 0 auto 24px; padding: 0 8px; background: #aaa; color: #0000aa; }