:root {
  color-scheme: dark;
  --comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  --ui: Tahoma, "MS Sans Serif", "Segoe UI", Arial, sans-serif;
  --silver: #c0c0c0;
  --navy: #000080;

  --raised: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  --sunken: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --button: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px;
  padding: 10px 14px 8px;
  background: #0b0020 url("art/stars.png") repeat;
  color: #ffffff; font: 14px/1.4 var(--comic);
}
a { color: #00ffff; }
a:visited { color: #ff66ff; }
a:hover { color: #ffff00; }

header { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.title { display: flex; align-items: center; gap: 14px; }
.title .logo { height: 46px; width: auto; filter: drop-shadow(2px 2px 0 #000); }
.spin { height: 40px; width: auto; animation: spin 5s linear infinite; }
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
marquee {
  display: block; width: min(760px, 100%); padding: 1px 0;
  background: #000; border: 2px ridge var(--silver); color: #00ff00; font: bold 13px/1.4 "Courier New", monospace;
}
.nav { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: bold; }
.nav a, .nav a:visited { color: #00ffff; }
.nav a:hover { color: #ffff00; }
.nav [aria-current="page"] { color: #ffff00; text-decoration: none; text-shadow: 1px 1px 0 #cc0000; }
.nav .star { color: #ff66ff; }
hr.rainbow-hr {
  width: min(1100px, 100%); height: 3px; border: 0; margin: 2px 0 0;
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #6666ff, #ff00ff);
}

.box {
  background: rgba(0, 0, 70, .85); border: 3px ridge var(--silver); padding: 8px 11px 10px;
}
.box h2 {
  margin: 0 0 6px; font: bold 15px/1.2 var(--comic); color: #ffff00; text-align: center;
  text-shadow: 1px 1px 0 #cc0000;
}
.box p, .box ul { margin: 0 0 6px; font-size: 13px; line-height: 1.4; }
.box ul { padding-left: 18px; }
.box li { margin-bottom: 4px; }
.box li::marker { content: "\2605  "; color: #ffff00; }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
.construction { padding: 0; background: #000; }
.construction .stripes { height: 10px; background: repeating-linear-gradient(-45deg, #ffcc00 0 9px, #000 9px 18px); }
.construction .inner { padding: 7px 10px; text-align: center; font-size: 13px; color: #ffcc00; }
.construction .inner strong { display: block; font-size: 15px; color: #fff; text-shadow: 1px 1px 0 #cc0000; }

.win98 {
  background: var(--silver); padding: 3px;
  box-shadow: var(--raised), 5px 5px 0 rgba(0, 0, 0, .55);
  color: #000; font: 12px/1 var(--ui);
}
.titlebar {
  height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 2px 0 4px;
  background: linear-gradient(90deg, var(--navy), #1084d0); color: #fff; font-weight: bold;
  user-select: none;
}
.titlebar img { width: 16px; height: 16px; }
.titlebar span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-btn {
  width: 18px; height: 16px; padding: 0; border: 0; background: var(--silver); box-shadow: var(--button);
  display: grid; place-items: center; cursor: pointer; color: #000;
}
.tb-btn:active { box-shadow: var(--sunken); }
.tb-btn svg { width: 9px; height: 9px; }
.win-body { margin-top: 3px; padding: 2px; box-shadow: var(--sunken); background: #000; }
.statusbar { display: flex; align-items: center; gap: 10px; padding: 5px 4px 2px; }
.statusbar label { display: inline-flex; align-items: center; gap: 6px; }
.field { padding: 3px 6px; min-width: 48px; text-align: right; background: #fff; box-shadow: var(--sunken);
  font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.btn98 {
  min-width: 88px; padding: 4px 10px; border: 0; background: var(--silver); box-shadow: var(--button);
  font: 12px var(--ui); color: #000; cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
}
a.btn98, a.btn98:visited, a.btn98:hover { color: #000; }
.btn98:active { box-shadow: var(--sunken); padding: 5px 9px 3px 11px; }
.btn98:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: default; }
.btn98:disabled:active { box-shadow: var(--button); padding: 4px 10px; }
.btn98:focus-visible, .tb-btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }

.trackbar {
  -webkit-appearance: none; appearance: none; width: clamp(100px, 14vw, 170px); height: 21px;
  background: transparent; cursor: pointer; margin: 0;
}
.trackbar::-webkit-slider-runnable-track { height: 4px; background: #fff; box-shadow: var(--sunken); }
.trackbar::-moz-range-track { height: 4px; background: #fff; box-shadow: var(--sunken); }
.trackbar::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 21px; margin-top: -8.5px; border: 0; border-radius: 0;
  background: var(--silver); box-shadow: var(--button);
}
.trackbar::-moz-range-thumb { width: 11px; height: 21px; border: 0; border-radius: 0; background: var(--silver); box-shadow: var(--button); }
.trackbar:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

.check98 {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin: 0; background: #fff;
  box-shadow: var(--sunken); display: grid; place-items: center; cursor: pointer;
}
.check98:checked::after { content: ""; width: 7px; height: 7px; margin-top: -1px;
  clip-path: polygon(0 45%, 35% 80%, 100% 10%, 100% 35%, 35% 100%, 0 70%); background: #000; }
.check98:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  color: #b0a0d8; font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
}