:root {
  color-scheme: dark;
  --slate-low: #2b3440;
  --slate-high: #3d4a5c;
  --ink: #f3f6fa;
  --muted: #e0e8f0;
  --accent: #dceff7;
  --rule: rgba(226, 236, 249, 0.24);
  --glass: rgba(242, 247, 255, 0.055);
  --focus: #fbe2ac;
  --font: "Commissioner", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-block-start: 24px; }
body { margin: 0; }
body, button, summary { font-family: var(--font); font-size: 18px; }
body { color: var(--ink); line-height: 1.65; }
h1, h2, p, ol, ul, figure { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
button { color: inherit; line-height: 1.4; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
::selection { color: #202936; background: #d0e8f1; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

.guide-page {
  min-width: 0;
  background: var(--slate-high);
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  color: #202936;
  background: var(--focus);
  border-radius: 6px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}