/* ============================================================
   The Horizon BBS — "Modern Terminal" theme (retro-theme.css)
   Bootstrap 5 companion sheet. Replaces combined.min.css and
   hamburger-menu-modern.css (old files kept on disk).
   Palette per spec 2026-07-09; do not introduce new hues.
   ============================================================ */

/* ---- self-hosted fonts ---- */
@font-face {
  font-family: 'Web437 IBM VGA';
  src: url('../fonts/web437-ibm-vga-8x16.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- design tokens: light mode on :root, dark under body.dark ---- */
:root {
  --hz-blue: #2E9AFE;
  --hz-blue-lt: #75b8f1;
  --hz-blue-hover: #A9E2F3;
  --hz-green: #82E0AA;
  --hz-orange: #F0B27A;
  --hz-downvote: #85C1E9;

  --hz-page: #f0f0f0;
  --hz-surface: #ffffff;
  --hz-surface-2: #f7f9fc;
  --hz-fg: #333333;
  --hz-fg-muted: #667788;
  --hz-heading: #222222;
  --hz-link: #1a7fe0;
  --hz-border: rgba(46, 154, 254, 0.45);
  --hz-border-soft: rgba(46, 154, 254, 0.25);
  --hz-prompt: #2e9a5e;

  --hz-glow-card: none;
  --hz-glow-btn: none;
  --hz-glow-text: none;

  --hz-hero-bg: linear-gradient(180deg, #dfeaf6, #c3d9f0 78%, #f0f0f0);
  --hz-hero-title: #223a55;
  --hz-star: #5a8fc0;

  --hz-font-display: 'Web437 IBM VGA', 'VT323', 'Courier New', monospace;
  --hz-font-body: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Courier New', monospace;

  --hz-radius: 6px;
  --hz-transition: 200ms ease-in-out;
}
body.dark {
  --hz-page: #0d1117;
  --hz-surface: #10161f;
  --hz-surface-2: #0b1018;
  --hz-fg: #b9c8d8;
  --hz-fg-muted: #8aa4bd;
  --hz-heading: #e8f4fb;
  --hz-link: #75b8f1;
  --hz-border: rgba(46, 154, 254, 0.35);
  --hz-border-soft: rgba(46, 154, 254, 0.2);
  --hz-prompt: #82E0AA;

  --hz-glow-card: 0 0 14px rgba(46, 154, 254, 0.10);
  --hz-glow-btn: 0 0 10px rgba(46, 154, 254, 0.35), inset 0 0 10px rgba(46, 154, 254, 0.12);
  --hz-glow-text: 0 0 12px rgba(46, 154, 254, 0.6);

  --hz-hero-bg: linear-gradient(180deg, #020409, #0a1830 78%, #0d1117);
  --hz-hero-title: #ffffff;
  --hz-star: #A9E2F3;
}

/* ---- base ---- */
.hidden { display: none; }
html, body { overflow-x: hidden; }
body {
  padding-top: 70px;
  background-color: var(--hz-page);
  color: var(--hz-fg);
  font-family: var(--hz-font-body);
  font-size: 14px;
  line-height: 1.6;
  transition: background-color var(--hz-transition), color var(--hz-transition);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hz-font-display);
  color: var(--hz-heading);
  text-shadow: var(--hz-glow-text);
  line-height: 1.25;
  letter-spacing: 1px;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5, h6 { font-size: 16px; }
a { color: var(--hz-link); text-decoration: none; }
a:hover { color: var(--hz-blue-hover); }
hr { border-color: var(--hz-border-soft); opacity: 1; }
::selection { background: var(--hz-blue); color: #03080f; }

/* terminal-flavored scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--hz-page); }
::-webkit-scrollbar-thumb { background: var(--hz-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--hz-blue); }

/* ---- navbar ---- */
.navbar, .navbar.navbar-light, .navbar.bg-light {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
  border: none;
  border-bottom: 1px solid var(--hz-border);
  box-shadow: none;
}
body.dark .navbar, body.dark .navbar.navbar-light, body.dark .navbar.bg-light {
  background-color: rgba(13, 17, 23, 0.92) !important;
}
.navbar-brand {
  font-family: var(--hz-font-display);
  font-size: 22px;
  color: var(--hz-heading) !important;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  text-shadow: var(--hz-glow-text);
}
.navbar-brand::after {
  content: "\258A"; /* ▊ block cursor */
  color: var(--hz-blue);
  margin-left: 2px;
  animation: hz-blink 1.1s steps(1) infinite;
}
.navbar-brand .brand-icon { color: var(--hz-blue); margin-right: 6px; }
.navbar .nav-link {
  font-family: var(--hz-font-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hz-fg-muted) !important;
}
.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: var(--hz-blue) !important;
  text-shadow: var(--hz-glow-text);
}
.dropdown-menu {
  background-color: var(--hz-surface);
  border: 1px solid var(--hz-border);
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-glow-card);
  padding: 6px 0;
}
.dropdown-item {
  font-family: var(--hz-font-body);
  font-size: 13px;
  color: var(--hz-fg);
  cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--hz-surface-2);
  color: var(--hz-blue);
}
#button-logout { cursor: pointer; }
#login-form { min-width: 240px; }
#login-form .form-control { margin-bottom: 8px; }

/* ---- hero (home page: compact banner, content aligned to .container) ---- */
.hz-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 0 52px;
  background: var(--hz-hero-bg);
  border-bottom: 1px solid var(--hz-border);
  margin-bottom: 24px;
}
/* random (seeded) starfield — a single non-repeating SVG; a few extra
   stars twinkle via the ::before/::after overlay below */
.hz-starfield {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1920 300%22 preserveAspectRatio=%22none%22><rect x=%22282%22 y=%22231%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.81%22/><rect x=%221231%22 y=%2245%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.76%22/><rect x=%22290%22 y=%2278%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.81%22/><rect x=%221829%22 y=%22138%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.64%22/><rect x=%221309%22 y=%22196%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.49%22/><rect x=%22432%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.63%22/><rect x=%221916%22 y=%22288%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.85%22/><rect x=%22304%22 y=%2240%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.59%22/><rect x=%221385%22 y=%22181%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.77%22/><rect x=%221670%22 y=%2281%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.92%22/><rect x=%221881%22 y=%22204%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.74%22/><rect x=%221012%22 y=%22221%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.92%22/><rect x=%22926%22 y=%22124%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.65%22/><rect x=%22440%22 y=%22219%22 width=%224%22 height=%224%22 fill=%22%238fb4d8%22 opacity=%220.86%22/><rect x=%22884%22 y=%2229%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.52%22/><rect x=%22576%22 y=%22168%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.72%22/><rect x=%22504%22 y=%2252%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.82%22/><rect x=%22483%22 y=%2254%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.65%22/><rect x=%221839%22 y=%2218%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.55%22/><rect x=%22823%22 y=%2268%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.77%22/><rect x=%221691%22 y=%22107%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.76%22/><rect x=%221351%22 y=%2223%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.7%22/><rect x=%221374%22 y=%22116%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.81%22/><rect x=%22425%22 y=%2278%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.91%22/><rect x=%221915%22 y=%22205%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.91%22/><rect x=%221775%22 y=%22297%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.95%22/><rect x=%2250%22 y=%22283%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.8%22/><rect x=%22512%22 y=%22238%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.55%22/><rect x=%22128%22 y=%2289%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.84%22/><rect x=%221300%22 y=%22181%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.75%22/><rect x=%22677%22 y=%22284%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.88%22/><rect x=%221173%22 y=%2243%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.92%22/><rect x=%22371%22 y=%2231%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.66%22/><rect x=%221273%22 y=%22222%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.66%22/><rect x=%221365%22 y=%2252%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.8%22/><rect x=%22169%22 y=%2295%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.86%22/><rect x=%22548%22 y=%22218%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.87%22/><rect x=%22197%22 y=%22199%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.57%22/><rect x=%221165%22 y=%2293%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.87%22/><rect x=%22367%22 y=%22284%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.64%22/><rect x=%22779%22 y=%227%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.72%22/><rect x=%221524%22 y=%2218%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.91%22/><rect x=%221665%22 y=%22289%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.75%22/><rect x=%221176%22 y=%22129%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.48%22/><rect x=%221336%22 y=%2273%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.74%22/><rect x=%221121%22 y=%22243%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.78%22/><rect x=%221773%22 y=%2263%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.52%22/><rect x=%2229%22 y=%22111%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.66%22/><rect x=%221105%22 y=%22256%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.46%22/><rect x=%221294%22 y=%22175%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.95%22/><rect x=%22267%22 y=%22256%22 width=%224%22 height=%224%22 fill=%22%232a5aa0%22 opacity=%220.85%22/><rect x=%221021%22 y=%22234%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.83%22/><rect x=%22700%22 y=%22129%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.72%22/><rect x=%221318%22 y=%22201%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.91%22/><rect x=%221264%22 y=%22216%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.51%22/><rect x=%221612%22 y=%22255%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.76%22/><rect x=%22649%22 y=%22191%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.91%22/><rect x=%22391%22 y=%22257%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.62%22/><rect x=%221139%22 y=%22134%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.56%22/><rect x=%221599%22 y=%2235%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.66%22/><rect x=%22888%22 y=%2236%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.6%22/><rect x=%221911%22 y=%22162%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.74%22/><rect x=%221869%22 y=%22267%22 width=%224%22 height=%224%22 fill=%22%238fb4d8%22 opacity=%220.78%22/><rect x=%22990%22 y=%22180%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.67%22/><rect x=%22342%22 y=%22275%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.85%22/><rect x=%2275%22 y=%22176%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.96%22/><rect x=%22433%22 y=%22192%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.91%22/><rect x=%221684%22 y=%2227%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.87%22/><rect x=%22618%22 y=%22151%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.47%22/><rect x=%221524%22 y=%22172%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.63%22/><rect x=%221401%22 y=%22224%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.95%22/><rect x=%22855%22 y=%22226%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.49%22/><rect x=%22882%22 y=%22286%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.84%22/><rect x=%2211%22 y=%22138%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.93%22/><rect x=%221247%22 y=%2295%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.59%22/><rect x=%2299%22 y=%22226%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.71%22/><rect x=%22276%22 y=%22169%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.75%22/><rect x=%22788%22 y=%22294%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.7%22/><rect x=%2230%22 y=%22261%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.84%22/><rect x=%22854%22 y=%22100%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.5%22/><rect x=%22911%22 y=%227%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.92%22/><rect x=%221071%22 y=%2269%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.76%22/><rect x=%221769%22 y=%22288%22 width=%224%22 height=%224%22 fill=%22%238fb4d8%22 opacity=%220.66%22/><rect x=%221663%22 y=%2287%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.77%22/><rect x=%22702%22 y=%2258%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.64%22/><rect x=%221590%22 y=%22173%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.92%22/><rect x=%221151%22 y=%22137%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.63%22/><rect x=%22946%22 y=%22267%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.7%22/><rect x=%221457%22 y=%22148%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.5%22/><rect x=%22722%22 y=%22119%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%221.0%22/><rect x=%22927%22 y=%2213%22 width=%224%22 height=%224%22 fill=%22%235a8fc0%22 opacity=%220.68%22/><rect x=%22932%22 y=%22194%22 width=%224%22 height=%224%22 fill=%22%235a8fc0%22 opacity=%220.87%22/><rect x=%221645%22 y=%2254%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.61%22/><rect x=%22415%22 y=%22276%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.98%22/><rect x=%22902%22 y=%22153%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.69%22/><rect x=%221059%22 y=%22208%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.73%22/><rect x=%221613%22 y=%22297%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.73%22/><rect x=%22204%22 y=%22109%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.64%22/><rect x=%22779%22 y=%22171%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.93%22/><rect x=%22409%22 y=%2240%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.86%22/><rect x=%221703%22 y=%2277%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.68%22/><rect x=%22222%22 y=%22247%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.57%22/><rect x=%221521%22 y=%2237%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.45%22/><rect x=%22618%22 y=%22167%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.78%22/><rect x=%22869%22 y=%2231%22 width=%224%22 height=%224%22 fill=%22%235a8fc0%22 opacity=%220.51%22/><rect x=%221606%22 y=%2213%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.45%22/><rect x=%22324%22 y=%22234%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.9%22/><rect x=%22860%22 y=%22296%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.78%22/><rect x=%22834%22 y=%22175%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.86%22/><rect x=%22406%22 y=%22107%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.71%22/><rect x=%22641%22 y=%22159%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.8%22/><rect x=%2220%22 y=%22268%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.53%22/><rect x=%221592%22 y=%22176%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.75%22/><rect x=%221201%22 y=%22165%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.55%22/><rect x=%2238%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.64%22/><rect x=%22862%22 y=%2259%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.55%22/><rect x=%221850%22 y=%22141%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.5%22/><rect x=%22216%22 y=%22220%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.93%22/><rect x=%221745%22 y=%2243%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.64%22/><rect x=%221078%22 y=%22195%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.67%22/><rect x=%22297%22 y=%22293%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.51%22/><rect x=%221377%22 y=%2248%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.62%22/><rect x=%22151%22 y=%2216%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.86%22/><rect x=%221489%22 y=%22243%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.8%22/><rect x=%221853%22 y=%22139%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.85%22/><rect x=%221345%22 y=%22153%22 width=%224%22 height=%224%22 fill=%22%235a8fc0%22 opacity=%220.87%22/><rect x=%221686%22 y=%22222%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.94%22/><rect x=%22263%22 y=%2294%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.81%22/><rect x=%22347%22 y=%22261%22 width=%224%22 height=%224%22 fill=%22%235a8fc0%22 opacity=%220.77%22/><rect x=%221378%22 y=%22183%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.75%22/><rect x=%22813%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.95%22/><rect x=%22108%22 y=%2211%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.93%22/><rect x=%221199%22 y=%22141%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.71%22/><rect x=%22786%22 y=%22225%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.98%22/><rect x=%22375%22 y=%22249%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.87%22/><rect x=%22877%22 y=%22296%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.89%22/><rect x=%2241%22 y=%2227%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.75%22/><rect x=%22766%22 y=%22261%22 width=%224%22 height=%224%22 fill=%22%235a8fc0%22 opacity=%220.62%22/><rect x=%22642%22 y=%22294%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.59%22/><rect x=%22239%22 y=%2260%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.46%22/><rect x=%221835%22 y=%22174%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.65%22/><rect x=%221760%22 y=%22102%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.82%22/><rect x=%22364%22 y=%22108%22 width=%224%22 height=%224%22 fill=%22%238fb4d8%22 opacity=%220.69%22/><rect x=%221010%22 y=%22219%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.74%22/><rect x=%22470%22 y=%22241%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.76%22/><rect x=%221886%22 y=%22271%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.79%22/><rect x=%22288%22 y=%2279%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.5%22/><rect x=%221139%22 y=%22189%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.62%22/><rect x=%221593%22 y=%22268%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.88%22/><rect x=%221533%22 y=%22232%22 width=%224%22 height=%224%22 fill=%22%232a5aa0%22 opacity=%220.92%22/><rect x=%22336%22 y=%22105%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.66%22/><rect x=%221050%22 y=%22222%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.96%22/><rect x=%221364%22 y=%22226%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.91%22/><rect x=%221152%22 y=%22192%22 width=%224%22 height=%224%22 fill=%22%232a5aa0%22 opacity=%220.72%22/><rect x=%22154%22 y=%22108%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.71%22/><rect x=%22340%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%231a7fe0%22 opacity=%220.75%22/><rect x=%22670%22 y=%22193%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.62%22/><rect x=%221494%22 y=%22289%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.75%22/><rect x=%2215%22 y=%22148%22 width=%224%22 height=%224%22 fill=%22%232a5aa0%22 opacity=%220.93%22/><rect x=%22788%22 y=%2252%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.67%22/><rect x=%221826%22 y=%2268%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.54%22/><rect x=%221493%22 y=%22153%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.54%22/><rect x=%221322%22 y=%22255%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.62%22/><rect x=%22482%22 y=%22121%22 width=%223%22 height=%223%22 fill=%22%232a5aa0%22 opacity=%220.9%22/><rect x=%221105%22 y=%22137%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%221.0%22/><rect x=%221352%22 y=%2268%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.73%22/><rect x=%22404%22 y=%22264%22 width=%222%22 height=%222%22 fill=%22%231a7fe0%22 opacity=%220.74%22/><rect x=%2236%22 y=%2250%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.87%22/><rect x=%22446%22 y=%22201%22 width=%224%22 height=%224%22 fill=%22%238fb4d8%22 opacity=%220.9%22/><rect x=%22602%22 y=%2236%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.82%22/><rect x=%221434%22 y=%22163%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.86%22/><rect x=%22927%22 y=%22168%22 width=%224%22 height=%224%22 fill=%22%235a8fc0%22 opacity=%220.9%22/><rect x=%221704%22 y=%22118%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.81%22/><rect x=%221176%22 y=%22153%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.77%22/><rect x=%22808%22 y=%22178%22 width=%223%22 height=%223%22 fill=%22%231a7fe0%22 opacity=%220.91%22/><rect x=%22134%22 y=%2237%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.95%22/><rect x=%221227%22 y=%2294%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.91%22/><rect x=%221566%22 y=%2218%22 width=%223%22 height=%223%22 fill=%22%235a8fc0%22 opacity=%220.77%22/><rect x=%221268%22 y=%22170%22 width=%223%22 height=%223%22 fill=%22%238fb4d8%22 opacity=%220.55%22/><rect x=%2252%22 y=%2244%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.46%22/><rect x=%221211%22 y=%22133%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.61%22/><rect x=%2279%22 y=%22108%22 width=%222%22 height=%222%22 fill=%22%238fb4d8%22 opacity=%220.5%22/><rect x=%22281%22 y=%22127%22 width=%222%22 height=%222%22 fill=%22%235a8fc0%22 opacity=%220.89%22/><rect x=%221133%22 y=%2271%22 width=%222%22 height=%222%22 fill=%22%232a5aa0%22 opacity=%220.75%22/><rect x=%221610%22 y=%22118%22 width=%224%22 height=%224%22 fill=%22%231a7fe0%22 opacity=%220.76%22/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
body.dark .hz-starfield { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1920 300%22 preserveAspectRatio=%22none%22><rect x=%22253%22 y=%22272%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.62%22/><rect x=%221228%22 y=%2293%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.57%22/><rect x=%22939%22 y=%2211%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.64%22/><rect x=%221798%22 y=%22153%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.56%22/><rect x=%221845%22 y=%22288%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.85%22/><rect x=%221285%22 y=%2221%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.74%22/><rect x=%22638%22 y=%22195%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.84%22/><rect x=%221550%22 y=%2236%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.66%22/><rect x=%22217%22 y=%2217%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.82%22/><rect x=%221824%22 y=%22142%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.67%22/><rect x=%221356%22 y=%2251%22 width=%224%22 height=%224%22 fill=%22%2375b8f1%22 opacity=%220.86%22/><rect x=%22356%22 y=%22194%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.76%22/><rect x=%22139%22 y=%22218%22 width=%224%22 height=%224%22 fill=%22%232E9AFE%22 opacity=%220.86%22/><rect x=%2239%22 y=%2228%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.92%22/><rect x=%221721%22 y=%2296%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.91%22/><rect x=%2223%22 y=%22109%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.99%22/><rect x=%22883%22 y=%22216%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.6%22/><rect x=%22379%22 y=%22283%22 width=%224%22 height=%224%22 fill=%22%23A9E2F3%22 opacity=%220.6%22/><rect x=%221303%22 y=%22123%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.5%22/><rect x=%22500%22 y=%22164%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.66%22/><rect x=%22318%22 y=%2219%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.52%22/><rect x=%221210%22 y=%2288%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.79%22/><rect x=%221502%22 y=%2264%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.59%22/><rect x=%2251%22 y=%2263%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.87%22/><rect x=%221377%22 y=%2250%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.64%22/><rect x=%22180%22 y=%2217%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.69%22/><rect x=%221742%22 y=%22118%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.87%22/><rect x=%22428%22 y=%22222%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.72%22/><rect x=%2229%22 y=%22110%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.77%22/><rect x=%2282%22 y=%2269%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.47%22/><rect x=%2255%22 y=%2213%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.65%22/><rect x=%22842%22 y=%22292%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.6%22/><rect x=%2224%22 y=%2267%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.78%22/><rect x=%221693%22 y=%22262%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.52%22/><rect x=%221067%22 y=%2245%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.8%22/><rect x=%22909%22 y=%2228%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.61%22/><rect x=%22193%22 y=%22190%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.84%22/><rect x=%221865%22 y=%2263%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.67%22/><rect x=%221002%22 y=%2255%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.69%22/><rect x=%221153%22 y=%22292%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.71%22/><rect x=%221334%22 y=%22259%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.56%22/><rect x=%221282%22 y=%2248%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.64%22/><rect x=%22337%22 y=%223%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.53%22/><rect x=%22380%22 y=%2236%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.6%22/><rect x=%221634%22 y=%22261%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.97%22/><rect x=%2277%22 y=%22113%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.63%22/><rect x=%22555%22 y=%2284%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.75%22/><rect x=%221151%22 y=%2282%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.82%22/><rect x=%221889%22 y=%22112%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.74%22/><rect x=%22590%22 y=%2271%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.88%22/><rect x=%22486%22 y=%22247%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.63%22/><rect x=%22884%22 y=%22198%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.76%22/><rect x=%22417%22 y=%22289%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.7%22/><rect x=%22711%22 y=%22119%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.64%22/><rect x=%221504%22 y=%22180%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.58%22/><rect x=%221880%22 y=%22262%22 width=%224%22 height=%224%22 fill=%22%2375b8f1%22 opacity=%220.84%22/><rect x=%221001%22 y=%22168%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.61%22/><rect x=%221517%22 y=%22108%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.95%22/><rect x=%22375%22 y=%22175%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.61%22/><rect x=%221869%22 y=%2266%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.6%22/><rect x=%221017%22 y=%22212%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.51%22/><rect x=%22835%22 y=%22122%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.89%22/><rect x=%22935%22 y=%22225%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.8%22/><rect x=%221716%22 y=%22275%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.5%22/><rect x=%22692%22 y=%2226%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.86%22/><rect x=%221144%22 y=%22252%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.61%22/><rect x=%22587%22 y=%2274%22 width=%224%22 height=%224%22 fill=%22%2375b8f1%22 opacity=%220.89%22/><rect x=%221881%22 y=%22199%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.7%22/><rect x=%221481%22 y=%2291%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.97%22/><rect x=%22725%22 y=%22139%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.73%22/><rect x=%22748%22 y=%2239%22 width=%224%22 height=%224%22 fill=%22%23A9E2F3%22 opacity=%220.49%22/><rect x=%22770%22 y=%22228%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.62%22/><rect x=%221256%22 y=%2283%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.82%22/><rect x=%221420%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.93%22/><rect x=%221713%22 y=%22291%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.54%22/><rect x=%221572%22 y=%22157%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.56%22/><rect x=%221302%22 y=%22129%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.83%22/><rect x=%221872%22 y=%2241%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.73%22/><rect x=%22685%22 y=%22160%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.84%22/><rect x=%221477%22 y=%2237%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.85%22/><rect x=%221206%22 y=%22208%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.46%22/><rect x=%221904%22 y=%22106%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.91%22/><rect x=%22134%22 y=%22165%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.48%22/><rect x=%22725%22 y=%22265%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.64%22/><rect x=%221788%22 y=%2290%22 width=%224%22 height=%224%22 fill=%22%232E9AFE%22 opacity=%220.99%22/><rect x=%22211%22 y=%22200%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.71%22/><rect x=%221695%22 y=%22176%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.73%22/><rect x=%22265%22 y=%22241%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.77%22/><rect x=%221438%22 y=%22178%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.84%22/><rect x=%221391%22 y=%22185%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.96%22/><rect x=%221069%22 y=%22209%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.51%22/><rect x=%22966%22 y=%22247%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.79%22/><rect x=%221655%22 y=%22128%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.98%22/><rect x=%22794%22 y=%2222%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.76%22/><rect x=%22990%22 y=%22165%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.51%22/><rect x=%22762%22 y=%2248%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.79%22/><rect x=%22114%22 y=%2285%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.55%22/><rect x=%221606%22 y=%2292%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.57%22/><rect x=%221686%22 y=%2238%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.76%22/><rect x=%22293%22 y=%2289%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.8%22/><rect x=%22550%22 y=%22241%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.48%22/><rect x=%22261%22 y=%22156%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.91%22/><rect x=%221829%22 y=%22211%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.64%22/><rect x=%22605%22 y=%22142%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.56%22/><rect x=%22363%22 y=%22192%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.95%22/><rect x=%221122%22 y=%22273%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.55%22/><rect x=%22915%22 y=%22186%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.98%22/><rect x=%221654%22 y=%22120%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.91%22/><rect x=%221393%22 y=%22152%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.96%22/><rect x=%22268%22 y=%2267%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.76%22/><rect x=%22403%22 y=%2215%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.56%22/><rect x=%22492%22 y=%22286%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.72%22/><rect x=%22770%22 y=%22254%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.66%22/><rect x=%22788%22 y=%22217%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.48%22/><rect x=%2225%22 y=%2230%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.94%22/><rect x=%22608%22 y=%22260%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.82%22/><rect x=%22185%22 y=%2255%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.99%22/><rect x=%221442%22 y=%22273%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.5%22/><rect x=%221857%22 y=%22138%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.76%22/><rect x=%22539%22 y=%22138%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.46%22/><rect x=%221101%22 y=%22288%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.66%22/><rect x=%221347%22 y=%22207%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.72%22/><rect x=%221343%22 y=%22294%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.76%22/><rect x=%22916%22 y=%22186%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.8%22/><rect x=%221150%22 y=%22109%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.83%22/><rect x=%221869%22 y=%22135%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.82%22/><rect x=%22281%22 y=%22202%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.93%22/><rect x=%22540%22 y=%22280%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.82%22/><rect x=%221749%22 y=%22194%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.73%22/><rect x=%221551%22 y=%22263%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.81%22/><rect x=%221469%22 y=%22147%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.47%22/><rect x=%221704%22 y=%2234%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.55%22/><rect x=%221521%22 y=%2261%22 width=%224%22 height=%224%22 fill=%22%232E9AFE%22 opacity=%220.88%22/><rect x=%221290%22 y=%22168%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.82%22/><rect x=%221392%22 y=%2222%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.84%22/><rect x=%221198%22 y=%22279%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.99%22/><rect x=%22766%22 y=%2257%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.56%22/><rect x=%22807%22 y=%2225%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.79%22/><rect x=%221036%22 y=%22174%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.91%22/><rect x=%221847%22 y=%22270%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.62%22/><rect x=%22810%22 y=%22238%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.81%22/><rect x=%221622%22 y=%2245%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.8%22/><rect x=%221645%22 y=%22114%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.85%22/><rect x=%221222%22 y=%22194%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.46%22/><rect x=%2243%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.88%22/><rect x=%22413%22 y=%22283%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.75%22/><rect x=%22685%22 y=%22279%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.73%22/><rect x=%22284%22 y=%2248%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.7%22/><rect x=%22384%22 y=%22202%22 width=%224%22 height=%224%22 fill=%22%23ffffff%22 opacity=%220.86%22/><rect x=%221811%22 y=%22191%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.55%22/><rect x=%221590%22 y=%22248%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.7%22/><rect x=%221290%22 y=%22136%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.82%22/><rect x=%22664%22 y=%22186%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.62%22/><rect x=%22416%22 y=%22156%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.69%22/><rect x=%22652%22 y=%2286%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.91%22/><rect x=%221328%22 y=%22260%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.83%22/><rect x=%22745%22 y=%22127%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.51%22/><rect x=%22696%22 y=%22203%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.62%22/><rect x=%22131%22 y=%22100%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.95%22/><rect x=%22435%22 y=%22100%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.49%22/><rect x=%22566%22 y=%22155%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.87%22/><rect x=%221552%22 y=%2234%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.67%22/><rect x=%221101%22 y=%22236%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.74%22/><rect x=%221342%22 y=%22257%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.69%22/><rect x=%22260%22 y=%2246%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.47%22/><rect x=%221641%22 y=%2221%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.84%22/><rect x=%221035%22 y=%22288%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.84%22/><rect x=%22381%22 y=%22289%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.83%22/><rect x=%22601%22 y=%2271%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.52%22/><rect x=%221336%22 y=%2210%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.97%22/><rect x=%22408%22 y=%22246%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.66%22/><rect x=%22454%22 y=%22262%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%220.83%22/><rect x=%221914%22 y=%22269%22 width=%224%22 height=%224%22 fill=%22%2375b8f1%22 opacity=%220.77%22/><rect x=%221114%22 y=%22103%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.67%22/><rect x=%221866%22 y=%22150%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.58%22/><rect x=%22852%22 y=%22159%22 width=%223%22 height=%223%22 fill=%22%2375b8f1%22 opacity=%220.84%22/><rect x=%22655%22 y=%22202%22 width=%222%22 height=%222%22 fill=%22%23A9E2F3%22 opacity=%220.49%22/><rect x=%221813%22 y=%2282%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.96%22/><rect x=%221322%22 y=%22158%22 width=%224%22 height=%224%22 fill=%22%232E9AFE%22 opacity=%220.58%22/><rect x=%221521%22 y=%2257%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.78%22/><rect x=%22961%22 y=%22132%22 width=%223%22 height=%223%22 fill=%22%232E9AFE%22 opacity=%220.46%22/><rect x=%22755%22 y=%2228%22 width=%223%22 height=%223%22 fill=%22%23A9E2F3%22 opacity=%220.82%22/><rect x=%221161%22 y=%22249%22 width=%222%22 height=%222%22 fill=%22%2375b8f1%22 opacity=%220.48%22/><rect x=%22420%22 y=%2277%22 width=%222%22 height=%222%22 fill=%22%23ffffff%22 opacity=%220.56%22/><rect x=%221132%22 y=%2292%22 width=%222%22 height=%222%22 fill=%22%232E9AFE%22 opacity=%220.69%22/></svg>"); }
/* twinkling stars: two box-shadow clusters on incommensurate periods
   (3.7s vs 5.3s, so the combined pattern repeats only every ~20s);
   the global prefers-reduced-motion rule kills the animation */
.hz-starfield::before,
.hz-starfield::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--hz-star);
}
.hz-starfield::before {
  transform: translate(8vw, 38px);
  box-shadow:
    22vw  96px 2px var(--hz-star),
    41vw  22px 1px var(--hz-star),
    67vw 130px 2px var(--hz-star),
    83vw  48px 1px var(--hz-star),
    54vw 170px 2px var(--hz-star);
  animation: hz-twinkle 3.7s ease-in-out infinite;
}
.hz-starfield::after {
  transform: translate(14vw, 150px);
  box-shadow:
    19vw  -96px 1px var(--hz-star),
    36vw   40px 2px var(--hz-star),
    59vw  -58px 1px var(--hz-star),
    76vw   70px 2px var(--hz-star),
    88vw -120px 1px var(--hz-star);
  animation: hz-twinkle 5.3s ease-in-out -1.9s infinite;
}
@keyframes hz-twinkle {
  0%, 100% { opacity: .12; }
  12% { opacity: .9; }
  30% { opacity: .25; }
  55% { opacity: 1; }
  78% { opacity: .3; }
}

.hz-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90px at 50% 115%, rgba(46, 154, 254, 0.45), rgba(46, 154, 254, 0.12) 55%, transparent 75%);
}
.hz-horizon::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hz-blue) 30%, var(--hz-blue-hover) 50%, var(--hz-blue) 70%, transparent);
  box-shadow: 0 0 12px rgba(46, 154, 254, 0.8);
}

/* two columns: copy left, Saturn right — inside the same .container as the
   page content below so the hero lines up with the card grid */
.hz-hero-inner {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  gap: 44px;
}
.hz-hero-copy { flex: 1 1 0; min-width: 0; }
.hz-est {
  font-family: var(--hz-font-display);
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1.15;
  color: var(--hz-hero-title);
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(46, 154, 254, 0.8);
  margin: 0 0 12px;
}
.hz-blurb {
  color: var(--hz-fg-muted);
  font-size: 13px;
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 20px;
}
.hz-btn {
  display: inline-block;
  font-family: var(--hz-font-display);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--hz-blue);
  color: var(--hz-blue);
  background: transparent;
  border-radius: 4px;
  padding: 9px 22px;
  margin: 0 8px 8px 0;
  box-shadow: var(--hz-glow-btn);
  transition: all var(--hz-transition);
  cursor: pointer;
}
.hz-btn:hover { background: rgba(46, 154, 254, 0.15); color: var(--hz-blue-hover); }
.hz-btn-fill { background: var(--hz-blue); color: #03080f; font-weight: 600; }
.hz-btn-fill:hover { background: var(--hz-blue-lt); color: #03080f; }

/* Saturn: ray-rendered PNG, upgraded in place to a live WebGL render
   (saturn3d.js) that slowly rotates the cloud bands in 3D */
.hz-saturn {
  flex: 0 0 auto;
  width: clamp(240px, 25vw, 360px);
}
.hz-saturn img, .hz-saturn canvas { display: block; width: 100%; height: auto; }

@media (max-width: 767.98px) {
  .hz-hero { padding: 20px 0 44px; }
  .hz-hero-inner { display: block; text-align: center; }
  .hz-hero-copy { position: relative; z-index: 2; }
  .hz-blurb { margin-left: auto; margin-right: auto; }
  .hz-btn { margin: 0 4px 8px; }
  /* upper-right, cropping off-screen is fine; sits behind the copy */
  .hz-saturn { position: absolute; top: -12px; right: -62px; width: 228px; z-index: 1; opacity: 0.85; }
}

/* ---- terminal card (leads the main column on the home page) ---- */
#hz-terminal-card { scroll-margin-top: 84px; }
#hz-terminal-card .hz-card-hd { display: flex; align-items: center; gap: 6px; }
.hz-term-meta { margin-left: auto; color: var(--hz-fg-muted); }
.hz-led { width: 7px; height: 7px; border-radius: 50%; }
.hz-led-g { background: var(--hz-green); box-shadow: 0 0 6px var(--hz-green); }
.hz-led-o { background: var(--hz-orange); box-shadow: 0 0 6px var(--hz-orange); }
#hz-terminal-card .hz-card-bd { padding: 8px; background: #0b0f16; }
.hz-term {
  background: #000;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
/* reserve the 80x25 footprint until fTelnet's canvas arrives (no layout jump) */
.hz-term.loading { aspect-ratio: 8 / 5; }
/* scanlines live ONLY here, per the effects budget */
.hz-term::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
/* fTelnet manages its own canvas sizing — do not constrain it */
.hz-term canvas { display: block; }

/* ---- terminal cards (home content + generic) ---- */
.hz-card {
  background: var(--hz-surface);
  border: 1px solid var(--hz-border);
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-glow-card);
  margin-bottom: 16px;
  overflow: hidden;
}
.hz-card-hd {
  padding: 9px 14px;
  font-family: var(--hz-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hz-blue);
  border-bottom: 1px solid var(--hz-border-soft);
}
.hz-card-hd::before { content: "> "; color: var(--hz-prompt); }
.hz-card-bd { padding: 12px 14px; }
.hz-card-bd p:last-child { margin-bottom: 0; }
.hz-news-row { display: flex; gap: 12px; padding: 4px 0; }
.hz-news-date { color: var(--hz-orange); white-space: nowrap; font-size: 12px; padding-top: 1px; }

/* ---- sidebar widgets become terminal cards ---- */
#sidebar .list-group { gap: 16px; display: flex; flex-direction: column; }
#sidebar .list-group-item.sidebar {
  background: var(--hz-surface);
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-glow-card);
  color: var(--hz-fg);
  padding: 0 0 8px;
  overflow: hidden;
}
#sidebar .list-group-item.sidebar > h4 {
  font-family: var(--hz-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hz-blue);
  text-shadow: none;
  border-bottom: 1px solid var(--hz-border-soft);
  padding: 9px 14px;
  margin: 0 0 8px;
}
#sidebar .list-group-item.sidebar > h4::before { content: "> "; color: var(--hz-prompt); }
#sidebar .list-group-item a { color: var(--hz-link); }
#sidebar .list-group-item a:hover { color: var(--hz-blue-hover); }
#sidebar table { margin-bottom: 4px; }

/* ---- footer as a terminal status line ---- */
footer {
  padding: 16px 0 26px;
  border-top: 1px solid var(--hz-border-soft);
  color: var(--hz-fg-muted);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
footer p { margin: 0; }

/* ---- buttons (Bootstrap) ---- */
.btn {
  font-family: var(--hz-font-display);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all var(--hz-transition);
}
.btn-primary {
  background: var(--hz-blue);
  border-color: var(--hz-blue);
  color: #03080f;
  box-shadow: var(--hz-glow-btn);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--hz-blue-lt);
  border-color: var(--hz-blue-lt);
  color: #03080f;
}
.btn-default, .btn-secondary, .btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--hz-border);
  color: var(--hz-fg);
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
  border-color: var(--hz-blue);
  color: var(--hz-blue);
}
.btn-success { background: var(--hz-green); border-color: var(--hz-green); color: #03260f; }
.btn-danger { color: #fff; }

/* ---- badges ---- */
.badge {
  font-family: var(--hz-font-body);
  font-weight: 600;
  letter-spacing: 1px;
}
span.badge.new, .badge.bg-primary { background: var(--hz-blue) !important; color: #fff; }
.badge.scanned { background: var(--hz-orange); color: #03080f; }

/* ---- tables ---- */
.table { color: var(--hz-fg); border-color: var(--hz-border-soft); }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-color: var(--hz-border-soft); }
.table th { color: var(--hz-heading); font-weight: 600; }
.table-condensed th, .table-condensed td { padding: 4px 8px; }
.striped:nth-of-type(even),
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background: var(--hz-surface-2);
}

/* ---- list groups (forum, files, games, mail) ---- */
.list-group-item {
  background: var(--hz-surface);
  border-color: var(--hz-border-soft);
  color: var(--hz-fg);
}
a.list-group-item, .list-group-item a { color: var(--hz-link); }
a.list-group-item:hover, a.list-group-item:active, li.list-group-item.mail:hover {
  background-color: rgba(46, 154, 254, 0.12);
  color: var(--hz-blue-hover);
}
a.list-group-item.scanned:hover { background-color: rgba(46, 154, 254, 0.12); }
/* mail read/unread states */
a.unread { background: var(--hz-surface); font-weight: 600; border-left: 3px solid var(--hz-blue); }
a.read { background: var(--hz-surface-2); }

/* ---- breadcrumbs & pagination ---- */
.breadcrumb {
  background: var(--hz-surface);
  border: 1px solid var(--hz-border-soft);
  border-radius: var(--hz-radius);
  padding: 8px 14px;
  font-family: var(--hz-font-body);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--hz-fg-muted); }
.page-link {
  background: var(--hz-surface);
  border-color: var(--hz-border-soft);
  color: var(--hz-link);
  font-family: var(--hz-font-body);
}
.page-item.active .page-link { background: var(--hz-blue); border-color: var(--hz-blue); color: #03080f; }

/* ---- games page: pills become launch chips ---- */
#xtrn-list .list-group-item { padding: 12px 14px; }
#xtrn-list h4 {
  font-family: var(--hz-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hz-blue);
  text-shadow: none;
}
#xtrn-list h4::before { content: "> "; color: var(--hz-prompt); }
#xtrn-list .nav-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#xtrn-list .nav-pills a {
  display: inline-block;
  border: 1px solid var(--hz-border);
  border-radius: 4px;
  padding: 5px 12px;
  color: var(--hz-link);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--hz-transition);
}
#xtrn-list .nav-pills a:hover {
  border-color: var(--hz-blue);
  color: var(--hz-blue-hover);
  box-shadow: var(--hz-glow-btn);
}

/* ---- forms ---- */
.form-control, .form-select {
  background: var(--hz-surface-2);
  border: 1px solid var(--hz-border-soft);
  color: var(--hz-fg);
  font-family: var(--hz-font-body);
  border-radius: 4px;
}
.form-control:focus, .form-select:focus {
  background: var(--hz-surface-2);
  border-color: var(--hz-blue);
  color: var(--hz-fg);
  box-shadow: 0 0 0 0.2rem rgba(46, 154, 254, 0.25);
}
.form-control::placeholder { color: var(--hz-fg-muted); }
label, .form-label, .control-label { color: var(--hz-fg-muted); font-size: 12px; letter-spacing: 1px; }

/* ---- modals & alerts ---- */
.modal-content {
  background: var(--hz-surface);
  border: 1px solid var(--hz-border);
  color: var(--hz-fg);
}
.modal-header, .modal-footer { border-color: var(--hz-border-soft); }
.alert { border-radius: var(--hz-radius); font-family: var(--hz-font-body); }

/* ---- dark mode switch in navbar ---- */
.dark-mode-switch .form-check-input {
  cursor: pointer;
  background-color: #6c757d;
  border-color: var(--hz-border);
}
.dark-mode-switch .form-check-input:checked {
  background-color: var(--hz-blue);
  border-color: var(--hz-blue);
}
.navbar-darkswitch { background-color: transparent !important; }

/* ---- offcanvas sidebar behavior (ported from offcanvas.css) ---- */
@media screen and (max-width: 767px) {
  .sidebar-offcanvas { display: none; }
}

/* ---- accessibility: kill all animation on request ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes hz-blink { 50% { opacity: 0; } }

/* ---- hamburger menu (ported verbatim from hamburger-menu-modern.css) ---- */
/* Modern Hamburger Menu Design for WebV4 */
/* ======================================= */

/* CSS Custom Properties for Theming */
:root {
  /* Light Mode Colors */
  --hamburger-color: #333;
  --hamburger-hover-color: #000;
  --navbar-bg: #f8f9fa;
  --navbar-border: #dee2e6;
  --menu-bg: #ffffff;
  --menu-text: #333;
  --menu-hover-bg: #f8f9fa;
  --menu-shadow: rgba(0, 0, 0, 0.1);
  
  /* Animation Properties */
  --hamburger-animation-duration: 0.3s;
  --menu-animation-duration: 0.4s;
  
  /* Dimensions */
  --hamburger-size: 44px;
  --hamburger-line-height: 3px;
  --hamburger-line-spacing: 6px;
  --hamburger-padding: 10px;
}

/* Dark Mode Custom Properties */
body.dark {
  --hamburger-color: #f8f9fa;
  --hamburger-hover-color: #ffffff;
  --navbar-bg: #212529;
  --navbar-border: #495057;
  --menu-bg: #343a40;
  --menu-text: #f8f9fa;
  --menu-hover-bg: #495057;
  --menu-shadow: rgba(0, 0, 0, 0.3);
}

/* Hamburger Button Styling */
.navbar-toggler {
  position: relative;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  padding: var(--hamburger-padding);
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: all var(--hamburger-animation-duration) ease;
  overflow: visible;
  z-index: 1040;
}

/* Focus State */
.navbar-toggler:focus {
  outline: 2px solid var(--hamburger-color);
  outline-offset: 2px;
  box-shadow: none;
}

/* Remove Bootstrap's Default Icon */
.navbar-toggler-icon {
  display: none;
}

/* Custom Hamburger Lines Container */
.hamburger-lines {
  position: relative;
  display: block;
  width: 24px;
  height: 20px;
  margin: 0 auto;
}

/* Individual Hamburger Lines */
.hamburger-line {
  position: absolute;
  display: block;
  width: 100%;
  height: var(--hamburger-line-height);
  background: var(--hamburger-color);
  border-radius: 2px;
  transition: all var(--hamburger-animation-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
}

/* Line Positions */
.hamburger-line:nth-child(1) {
  top: 0;
}

.hamburger-line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-line:nth-child(3) {
  bottom: 0;
}

/* Hover State */
.navbar-toggler:hover .hamburger-line {
  background: var(--hamburger-hover-color);
}

/* Active/Open State - Transform to X */
/* Note: Bootstrap adds 'collapsed' class when menu is CLOSED, not open */
.navbar-toggler:not(.collapsed) .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.navbar-toggler:not(.collapsed) .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.navbar-toggler:not(.collapsed) .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Container */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--menu-bg);
    border-top: 1px solid var(--navbar-border);
    box-shadow: 0 4px 6px var(--menu-shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--menu-animation-duration) ease-in-out;
  }
  
  .navbar-collapse.show {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  
  /* Menu Items */
  .navbar-nav {
    padding: 1rem 0;
  }
  
  .navbar-nav .nav-item {
    border-bottom: 1px solid var(--navbar-border);
  }
  
  .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  
  .navbar-nav .nav-link {
    color: var(--menu-text);
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s ease;
  }
  
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background: var(--menu-hover-bg);
    color: var(--menu-text);
  }
  
  /* Dropdown Menus in Mobile */
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin: 0;
    background: var(--menu-hover-bg);
    border: none;
    box-shadow: none;
  }
  
  .navbar-nav .dropdown-item {
    padding: 0.5rem 2.5rem;
    color: var(--menu-text);
  }
  
  .navbar-nav .dropdown-item:hover,
  .navbar-nav .dropdown-item:focus {
    background: var(--navbar-border);
  }
}

/* Smooth Scrolling for Mobile Menu */
@media (max-width: 991.98px) {
  .navbar-collapse {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent body scroll when menu is open */
  body.navbar-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

/* Accessibility Improvements */
.navbar-toggler[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.05);
}

body.dark .navbar-toggler[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.05);
}

/* Screen Reader Text */
.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;
}

/* Keyboard Navigation Indicators */
.navbar-toggler:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--hamburger-color);
  outline-offset: 2px;
}

/* Animation Performance Optimization */
.hamburger-line,
.navbar-collapse,
.nav-link {
  will-change: transform, opacity, max-height;
}

/* Desktop Styles - Hide Hamburger */
@media (min-width: 992px) {
  .navbar-toggler {
    display: none;
  }
  
  .navbar-collapse {
    display: flex !important;
    position: static;
    max-height: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  
  body.navbar-menu-open {
    overflow: auto;
    position: static;
  }
}

/* Fix for Bootstrap 5 Compatibility */
.navbar-expand-lg .navbar-toggler {
  display: block;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

/* Override Any Previous Hamburger Fixes */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  display: none !important;
}

/* Clean up old SVG background */
.navbar-toggler-icon {
  background-image: none !important;
}

/* Override problematic overflow-x from offcanvas.css */
@media (max-width: 991.98px) {
  /* Only hide overflow when menu is closed */
  body:not(.navbar-menu-open) {
    overflow-x: hidden;
  }
}

/* Ensure proper navbar spacing */
body {
  padding-top: 56px; /* Standard navbar height */
}

@media (min-width: 992px) {
  body {
    padding-top: 70px; /* Match existing desktop spacing */
  }
}
/* hamburger recolor to theme tokens (overrides ported rules above) */
.hamburger-line { background-color: var(--hz-fg) !important; }
.navbar-toggler:hover .hamburger-line { background-color: var(--hz-blue) !important; }
@media (max-width: 991.98px) {
  .navbar-collapse { background-color: var(--hz-surface); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); }
}

/* ============================================================
   Post-review fixes (whole-branch review 2026-07-09)
   ============================================================ */

/* 1. Light-mode legibility: darker hover/date/sub tokens on :root,
      original bright values restored under body.dark */
:root {
  --hz-hover: #1a7fe0;
  --hz-date: #a35f1b;
  --hz-hero-sub: #2a5aa0;
}
body.dark {
  --hz-hover: #A9E2F3;
  --hz-date: #F0B27A;
  --hz-hero-sub: #75b8f1;
}
a:hover { color: var(--hz-hover); }
.hz-btn:hover { color: var(--hz-hover); }
a.list-group-item:hover, a.list-group-item:active, li.list-group-item.mail:hover { color: var(--hz-hover); }
.hz-news-date { color: var(--hz-date); }
.hz-sub { color: var(--hz-hero-sub); }

/* 2. Bootstrap .card surfaces (register, userlist, sbbslist) */
.card { background: var(--hz-surface); border: 1px solid var(--hz-border); color: var(--hz-fg); }
.card .card-title { color: var(--hz-heading); }
.card .card-header { background: var(--hz-surface-2); border-bottom: 1px solid var(--hz-border-soft); }

/* 3. Forum vote badges (classes emitted by 001-forum.ssjs) */
.upvote-bg { background: var(--hz-orange) !important; color: #03080f; }
.downvote-bg { background: var(--hz-downvote) !important; color: #03080f; }
.upvote-fg, .upvote:hover { color: var(--hz-orange); }
.downvote-fg, .downvote:hover { color: var(--hz-downvote); }

/* 4. Muted/status text on dark surfaces (BS5 defaults are near-invisible) */
body.dark .text-muted { color: var(--hz-fg-muted) !important; }
body.dark .text-danger { color: #f1948a !important; }
body.dark .text-success { color: var(--hz-green) !important; }

/* 5. Terminal-block rendering for message <pre> bodies (ANSI/CP437 posts
      are authored against a black background; .ansi needs line-height 1) */
pre { background: #000; color: #82E0AA; padding: 8px 10px; border-radius: 4px; overflow-x: auto; }
pre.ansi { line-height: 1; }

/* 6. Forum/mail control button spacing (ported .icon rule from legacy sheet) */
.icon { margin: 0 1em 1em 0; }

/* ============================================================
   Live-iteration fixes (sysop feedback 2026-07-09)
   ============================================================ */

/* Terminal box: fTelnet sizes the canvas natively; no aspect lock */
.hz-term { min-height: 0; }

/* Navbar links were rendering flush together */
.navbar .nav-link { padding: 8px 14px; }

/* Skip-link injected by modern-enhancements.js: hide until keyboard focus */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--hz-blue);
  color: #03080f;
  padding: 6px 14px;
  border-radius: 0 0 4px 0;
}
.skip-to-content:focus { left: 0; }

/* ---- terminal fit (responsive audit 2026-07-09) ----
   fTelnet manages its own scrollback scrolling; its scrollbars (and ours)
   are hidden inside the bezel so they never spill out of the frame —
   mouse wheel / touch scrollback still works. On screens narrower than
   fTelnet's smallest 80-col font (480px), hero.xjs scales the whole
   terminal down proportionally via transform. */
.hz-term { overflow: hidden; }
.hz-term * { scrollbar-width: none; }
.hz-term ::-webkit-scrollbar { width: 0; height: 0; }
#fTelnetContainer { transform-origin: top left; }

/* ---- navbar top-level page links (navbar.xjs emits .dropdown-item at top level;
   outside .dropdown-menu, Bootstrap's padding vars are unset and collapse to 0) ---- */
.navbar-nav > li > .dropdown-item {
  display: inline-block;
  width: auto;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hz-fg-muted);
  background: transparent;
}
.navbar-nav > li > .dropdown-item:hover,
.navbar-nav > li > .dropdown-item:focus {
  color: var(--hz-blue);
  background: transparent;
  text-shadow: var(--hz-glow-text);
}
/* items inside real dropdown menus keep comfortable padding */
.dropdown-menu .dropdown-item { padding: 8px 18px; }