/* Base: reset, fonts, scrollbars */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body {
  font: var(--fs-ui) var(--font-ui);
  color: #000;
  -webkit-user-select: none; user-select: none;
  cursor: default;
  -webkit-font-smoothing: auto;
}
#screen { position: fixed; inset: 0; overflow: hidden; }
.ico { display: inline-block; vertical-align: middle; image-rendering: auto; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.title-font { font-family: var(--font-title); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* XP scrollbars */
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track { background: var(--cream-100); border-left: 1px solid var(--cream-300); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d5e0fb, #aebfe8 50%, #d5e0fb);
  border: 1px solid #fff; border-radius: 2px;
  box-shadow: inset 0 0 0 1px #6f86c4;
}
::-webkit-scrollbar-button:single-button {
  background: linear-gradient(135deg, #dbe5fc, #aebfe8); border: 1px solid #fff; border-radius: 2px;
  box-shadow: inset 0 0 0 1px #6f86c4; height: 17px; width: 17px;
}
::-webkit-scrollbar-corner { background: var(--surface); }
* { scrollbar-color: #aebfe8 var(--cream-100); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200000; background: var(--amber); color: #000; padding: 6px 10px; }
.skip:focus { left: 8px; top: 8px; }
.noscript { color: #fff; padding: 2em; font: 16px/1.5 var(--font-ui); }
.noscript a { color: #cfe0ff; }

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