:root {
  --xp-blue: #0755c6; --xp-blue-dark: #003c9d; --xp-sky: #79a9e8;
  --paper: #fffbe8; --panel: #ece9d8; --ink: #151515; --link: #0000c8;
  --visited: #681da8; --acid: #f2ff00; --green: #00853e; --red: #c40000;
  --border-light: #fff; --border-mid: #aca899; --border-dark: #404040;
  --body-font: Tahoma, Verdana, Arial, sans-serif; --mono: "Courier New", monospace;
}
* { box-sizing: border-box; }
html { min-width: 300px; background: #147c8f url("/assets/stars.svg"); color: var(--ink); font-family: var(--body-font); font-size: 16px; }
body { margin: 0; padding: 18px; }
a { color: var(--link); text-decoration-thickness: 1px; }
a:visited { color: var(--visited); }
a:hover { background: var(--acid); color: #000; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #ff3b00; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 99; top: .5rem; left: .5rem; padding: .65rem 1rem; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-frame { width: min(100%, 1040px); margin: auto; border: 3px outset var(--panel); background: var(--paper); box-shadow: 8px 8px 0 rgb(0 0 0 / .4); }
.site-header { background: var(--panel); }
.titlebar { display: flex; align-items: center; gap: .45rem; min-height: 34px; padding: 4px 7px; color: #fff; background: linear-gradient(90deg, var(--xp-blue-dark), var(--xp-blue) 60%, var(--xp-sky)); text-shadow: 1px 1px #000; }
.titlebar img { image-rendering: pixelated; }
.window-controls { margin-left: auto; letter-spacing: .45rem; font-weight: bold; }
.hero { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: linear-gradient(135deg, #faffd5, #9cf5ff); border-bottom: 2px groove #fff; }
.hero p { margin: .25rem 0; }
.ascii-logo { font: bold clamp(1.35rem, 5vw, 2.6rem)/1 var(--mono); color: #c3008c; letter-spacing: -.08em; text-shadow: 2px 2px #00ffff; }
.blink-badge { flex: 0 0 auto; padding: .5rem; border: 3px double #000; background: var(--acid); color: var(--red); font: bold .8rem var(--mono); transform: rotate(-4deg); }
.ticker { overflow: hidden; margin: 0; padding: .35rem; white-space: nowrap; background: #000; color: #39ff14; font-family: var(--mono); }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 22s linear infinite; }
nav ul { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 6px; list-style: none; background: #d4d0c8; border-bottom: 2px solid var(--border-dark); }
nav a { display: block; padding: .45rem .55rem; border: 2px outset #fff; background: var(--panel); color: #000; font-size: .78rem; font-weight: bold; text-decoration: none; }
nav a:active, nav a[aria-current="page"] { border-style: inset; background: #fff; color: #000080; }
main { min-height: 55vh; padding: 1rem; }
.panel { margin-bottom: 1rem; border: 2px outset var(--panel); background: var(--panel); }
.panel > h1, .panel > h2, .panel-title { margin: 0; padding: .35rem .55rem; background: linear-gradient(90deg, #082c88, #488bea); color: #fff; font-size: 1rem; text-shadow: 1px 1px #000; }
.panel-body { padding: .8rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .8rem; }
.card { padding: .65rem; border: 1px solid var(--border-mid); border-top-color: #fff; border-left-color: #fff; background: #fff; box-shadow: 2px 2px 0 #777; }
.card h2, .card h3 { margin-top: 0; }
.status { display: inline-block; padding: .15rem .4rem; border: 1px solid currentColor; font: bold .72rem var(--mono); }
.status--verified { color: #005b2b; background: #caffd5; }
.status--review { color: #714600; background: #fff2b6; }
.status--lost { color: #7a0000; background: #ffd0d0; }
.button, button { padding: .45rem .7rem; border: 2px outset #fff; background: var(--panel); color: #000; font: bold .85rem var(--body-font); cursor: pointer; }
.button:active, button:active { border-style: inset; }
.notice { padding: .75rem; border: 2px dashed var(--red); background: #fff9b7; }
.counter { padding: 2px 5px; border: 2px inset #777; background: #000; color: #5cff36; font-family: var(--mono); letter-spacing: .12em; }
footer { padding: .7rem; border-top: 2px groove #fff; background: #d4d0c8; text-align: center; font-size: .8rem; }
footer p { margin: .3rem; }
footer img { vertical-align: middle; }
.stats-strip { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-around; }
.stats-strip span, .tag { padding: .3rem .5rem; border: 1px inset #888; background: #fff; }
.random-box { text-align: center; background: radial-gradient(circle, #fff 0, #fff9b7 65%, #ffb3e6); }
.dialup, .smallprint { font: .78rem var(--mono); }
.button--loud { display: inline-block; background: #ffea00; color: #70005c; text-decoration: none; }
input[type="search"] { width: min(100%, 28rem); padding: .45rem; border: 2px inset #fff; background: #fff; font: inherit; }
.archive-list { padding-left: 1.4rem; line-height: 1.7; }
.menu-grid a { color: #000080; text-decoration: none; }
.menu-grid a:hover { background: #f2ff00; }
.iceberg { margin: 0; padding: 0; list-style: none; text-align: center; }
.iceberg li { padding: .8rem; border-bottom: 1px dashed #0755c6; }
.timeline { border-left: 5px solid #0755c6; padding-left: 1rem; }
.tier-list { width: 100%; border-collapse: collapse; }
.tier-list th, .tier-list td { padding: .45rem; border: 1px solid #777; text-align: left; }
.hidden { display: none !important; }
.video-frame { position: relative; aspect-ratio: 16/9; background: #000; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
@keyframes ticker { to { transform: translateX(-200%); } }
@media (prefers-reduced-motion: reduce) { .ticker span { padding-left: 0; animation: none; } *, *::before, *::after { scroll-behavior: auto !important; } }
@media (max-width: 600px) { body { padding: 5px; } .site-frame { box-shadow: 3px 3px 0 rgb(0 0 0 / .4); } .hero { align-items: flex-start; } .blink-badge { display: none; } nav li { flex: 1 1 30%; } nav a { text-align: center; } main { padding: .55rem; } }
@media (forced-colors: active) { .site-frame, .panel, .card { border: 1px solid CanvasText; } }