@font-face { font-family: "Pixelated MS Sans Serif"; font-style: normal; font-weight: 400; src: url("fonts/ms_sans_serif.woff2") format("woff2"); }
@font-face { font-family: "Pixelated MS Sans Serif"; font-style: normal; font-weight: 700; src: url("fonts/ms_sans_serif_bold.woff2") format("woff2"); }

:root { --u: 0.9px; }
@media (min-width: 1500px) and (min-height: 850px) { :root { --u: 1.8px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #008080;
  color: #000;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: calc(var(--u) * 11);
  -webkit-font-smoothing: none;
  user-select: none;
  cursor: default;
}
button, input, textarea { font: inherit; color: inherit; }

.window {
  position: absolute;
  background: #c0c0c0;
  padding: calc(var(--u) * 3);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #0a0a0a, inset calc(var(--u) * 1) calc(var(--u) * 1) #dfdfdf, inset calc(var(--u) * -2) calc(var(--u) * -2) #808080, inset calc(var(--u) * 2) calc(var(--u) * 2) #fff;
  display: flex;
  flex-direction: column;
}
.window.hidden { display: none; }
.window { max-width: calc(100vw - 8px); max-height: calc(100vh - calc(var(--u) * 34)); }
.title-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #000080; color: #fff; font-weight: 700;
  height: calc(var(--u) * 18); padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 3); flex: none;
}
.window.inactive .title-bar { background: #808080; }
.title-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: calc(var(--u) * 12); }
.title-bar-controls { display: flex; }
.title-bar-controls button {
  width: calc(var(--u) * 16); height: calc(var(--u) * 14); margin-left: calc(var(--u) * 2); padding: 0; border: 0; background-color: #c0c0c0;
  background-repeat: no-repeat; background-position: center;
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #0a0a0a, inset calc(var(--u) * 1) calc(var(--u) * 1) #fff, inset calc(var(--u) * -2) calc(var(--u) * -2) #808080, inset calc(var(--u) * 2) calc(var(--u) * 2) #dfdfdf;
}
.title-bar-controls button:active {
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #fff, inset calc(var(--u) * 1) calc(var(--u) * 1) #0a0a0a, inset calc(var(--u) * -2) calc(var(--u) * -2) #dfdfdf, inset calc(var(--u) * 2) calc(var(--u) * 2) #808080;
}
.title-bar-controls button[aria-label="Minimize"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 6) calc(var(--u) * 2); background-position: left calc(var(--u) * 4) bottom calc(var(--u) * 3);
}
.title-bar-controls button[aria-label="Maximize"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 9) calc(var(--u) * 9); background-position: left calc(var(--u) * 3) top calc(var(--u) * 2);
}
.title-bar-controls button[aria-label="Restore"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 8) calc(var(--u) * 9); background-position: left calc(var(--u) * 3) top calc(var(--u) * 2);
}
.title-bar-controls button[aria-label="Help"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 6) calc(var(--u) * 9); background-position: left calc(var(--u) * 5) top calc(var(--u) * 2);
}
.title-bar-controls button[aria-label="Close"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 8) calc(var(--u) * 7); background-position: left calc(var(--u) * 4) top calc(var(--u) * 3);
}
.window-body { margin: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 5); flex: 1; min-height: 0; display: flex; flex-direction: column; }

.w95-btn {
  background: #c0c0c0; border: 0; border-radius: 0; color: #000;
  min-height: calc(var(--u) * 23); min-width: calc(var(--u) * 75); padding: 0 calc(var(--u) * 12);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #0a0a0a, inset calc(var(--u) * 1) calc(var(--u) * 1) #fff, inset calc(var(--u) * -2) calc(var(--u) * -2) #808080, inset calc(var(--u) * 2) calc(var(--u) * 2) #dfdfdf;
}
.w95-btn:active:not(:disabled) {
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #fff, inset calc(var(--u) * 1) calc(var(--u) * 1) #0a0a0a, inset calc(var(--u) * -2) calc(var(--u) * -2) #dfdfdf, inset calc(var(--u) * 2) calc(var(--u) * 2) #808080;
  padding: calc(var(--u) * 2) calc(var(--u) * 11) 0 calc(var(--u) * 13);
}
.w95-btn.default { outline: calc(var(--u) * 1) solid #000; outline-offset: calc(var(--u) * -1); }
.w95-btn:focus-visible { outline: calc(var(--u) * 1) dotted #000; outline-offset: calc(var(--u) * -4); }
.w95-btn:disabled { color: #808080; text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) #fff; }

.w95-input, .sunken {
  background: #fff; border: 0; border-radius: 0; outline: 0; color: #000; user-select: text;
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #fff, inset calc(var(--u) * 1) calc(var(--u) * 1) #808080, inset calc(var(--u) * -2) calc(var(--u) * -2) #dfdfdf, inset calc(var(--u) * 2) calc(var(--u) * 2) #0a0a0a;
}
.w95-input { padding: calc(var(--u) * 3) calc(var(--u) * 4); height: calc(var(--u) * 21); }
.sunken { padding: calc(var(--u) * 2); }

.progress {
  height: calc(var(--u) * 18); padding: calc(var(--u) * 2); background: #c0c0c0;
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #fff, inset calc(var(--u) * 1) calc(var(--u) * 1) #808080;
}
.progress-fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, #000080 0, #000080 calc(var(--u) * 8), transparent calc(var(--u) * 8), transparent calc(var(--u) * 10));
}

.fieldset { border: calc(var(--u) * 2) groove #fff; padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 10); margin: 0; }
.fieldset legend { padding: 0 calc(var(--u) * 3); background: #c0c0c0; }

::-webkit-scrollbar { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
::-webkit-scrollbar-corner { background: #dfdfdf; }
::-webkit-scrollbar-track {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: calc(var(--u) * 2) calc(var(--u) * 2);
}
::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #0a0a0a, inset calc(var(--u) * 1) calc(var(--u) * 1) #fff, inset calc(var(--u) * -2) calc(var(--u) * -2) #808080, inset calc(var(--u) * 2) calc(var(--u) * 2) #dfdfdf;
}
::-webkit-scrollbar-button:single-button { display: block; background-color: #c0c0c0; background-repeat: no-repeat; background-position: center; background-size: calc(var(--u) * 7) calc(var(--u) * 4);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #0a0a0a, inset calc(var(--u) * 1) calc(var(--u) * 1) #fff, inset calc(var(--u) * -2) calc(var(--u) * -2) #808080, inset calc(var(--u) * 2) calc(var(--u) * 2) #dfdfdf; }
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; width: 0; height: 0; }
::-webkit-scrollbar-button:vertical:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment { height: calc(var(--u) * 16); width: calc(var(--u) * 16); }
::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:horizontal:end:increment { width: calc(var(--u) * 16); height: calc(var(--u) * 16); background-size: calc(var(--u) * 4) calc(var(--u) * 7); }
::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z' fill='%23000'/%3E%3C/svg%3E");
}

.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 28); z-index: 9000;
  background: #c0c0c0; display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 2);
  box-shadow: inset 0 calc(var(--u) * 1) #fff, inset 0 calc(var(--u) * 2) #dfdfdf;
}
.task-btn {
  height: calc(var(--u) * 22); min-width: calc(var(--u) * 60); max-width: calc(var(--u) * 160); padding: 0 calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 4);
  background: #c0c0c0; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #0a0a0a, inset calc(var(--u) * 1) calc(var(--u) * 1) #fff, inset calc(var(--u) * -2) calc(var(--u) * -2) #808080, inset calc(var(--u) * 2) calc(var(--u) * 2) #dfdfdf;
}
.task-btn.active {
  font-weight: 700;
  background-image: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%);
  background-size: calc(var(--u) * 2) calc(var(--u) * 2);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #fff, inset calc(var(--u) * 1) calc(var(--u) * 1) #0a0a0a, inset calc(var(--u) * -2) calc(var(--u) * -2) #dfdfdf, inset calc(var(--u) * 2) calc(var(--u) * 2) #808080;
}
.task-start { font-weight: 700; min-width: calc(var(--u) * 54); }
.task-sep { width: calc(var(--u) * 2); height: calc(var(--u) * 22); box-shadow: inset calc(var(--u) * 1) 0 #808080, inset calc(var(--u) * 2) 0 #fff; margin: 0 calc(var(--u) * 2); }
.tray {
  margin-left: auto; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 10); display: flex; align-items: center;
  box-shadow: inset calc(var(--u) * 1) calc(var(--u) * 1) #808080, inset calc(var(--u) * -1) calc(var(--u) * -1) #fff;
}

.desk-icon { position: absolute; width: calc(var(--u) * 75); text-align: center; color: #fff; }
.desk-icon svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); display: block; margin: 0 auto calc(var(--u) * 4); shape-rendering: crispEdges; }
.desk-icon span { display: inline-block; padding: calc(var(--u) * 1) calc(var(--u) * 2); max-width: 100%; }
.desk-icon.sel span { background: #000080; outline: calc(var(--u) * 1) dotted #ffff00; }

.start-menu {
  position: fixed; left: calc(var(--u) * 2); bottom: calc(var(--u) * 28); z-index: 9500; width: calc(var(--u) * 190); display: none;
  background: #c0c0c0; padding: calc(var(--u) * 3);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) #0a0a0a, inset calc(var(--u) * 1) calc(var(--u) * 1) #dfdfdf, inset calc(var(--u) * -2) calc(var(--u) * -2) #808080, inset calc(var(--u) * 2) calc(var(--u) * 2) #fff;
}
.start-menu.open { display: flex; }
.start-banner {
  width: calc(var(--u) * 26); background: #808080; color: #c0c0c0; font-size: calc(var(--u) * 24); font-weight: 700;
  writing-mode: vertical-rl; transform: rotate(180deg); padding: calc(var(--u) * 6) 0; letter-spacing: 0;
}
.start-items { flex: 1; }
.start-item { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 8); }
.start-item:hover { background: #000080; color: #fff; }
.start-item svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); shape-rendering: crispEdges; }
.start-sep { height: 0; margin: calc(var(--u) * 3) calc(var(--u) * 2); border-top: calc(var(--u) * 1) solid #808080; border-bottom: calc(var(--u) * 1) solid #fff; }

.msgbox-shade { position: fixed; inset: 0; z-index: 9800; display: none; }
.msgbox-shade.open { display: block; }
.msgbox { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); min-width: calc(var(--u) * 280); max-width: calc(var(--u) * 420); }
.msgbox-row { display: flex; gap: calc(var(--u) * 14); align-items: flex-start; }
.msgbox-icon { width: calc(var(--u) * 32); height: calc(var(--u) * 32); flex: none; }
.msgbox-actions { display: flex; justify-content: center; margin-top: calc(var(--u) * 14); }