/* Tokens, reset, shared utilities. Our own take on an early-2000s desktop. */
:root {
  --taskbar-h: 30px;
  --titlebar-h: 26px;
  --icon-size: 32px;
  --fallback-wallpaper: #3a6ea5;

  --blue-900: #0a246a;
  --blue-700: #1c4fc4;
  --blue-500: #3d7bef;
  --blue-300: #8fb4f5;
  --pane: #d6e3fb;
  --face: #ece9d8;
  --face-dark: #c9c4ad;
  --ink: #111;
  --white: #fff;
  --green-700: #2a8a2a;
  --green-500: #45b545;
  --focus: #ffd34d;

  --select: #316ac5;
  /* Fonts the visitor already has; we never ship Microsoft's font files (rule 10). */
  --ui-font: Tahoma, "Noto Sans", "Segoe UI", sans-serif;
  --title-font: "Trebuchet MS", "Fira Sans", Tahoma, sans-serif;
  --ui-size: 11px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font: var(--ui-size)/1.4 var(--ui-font); color: var(--ink); background: var(--fallback-wallpaper); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  :root { --taskbar-h: 40px; --ui-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}