:root {
  color-scheme: light;
  --bg: #fff; --fg: #222; --muted: #555; --link: #1a5fb4;
  --popup-bg: #fffbe6; --popup-fg: #222; --popup-border: #ccb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c1c1e; --fg: #ddd; --muted: #999; --link: #8ab4f8;
    --popup-bg: #2b2a24; --popup-fg: #e6e2d3; --popup-border: #4d4a3c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1c1e; --fg: #ddd; --muted: #999; --link: #8ab4f8;
  --popup-bg: #2b2a24; --popup-fg: #e6e2d3; --popup-border: #4d4a3c;
}

body {
  max-width: 40rem; margin: 2rem auto; padding: 0 1rem;
  font-family: system-ui, sans-serif; line-height: 1.5;
  background: var(--bg); color: var(--fg);
}
a { color: var(--link); text-decoration: none; }
header { display: flex; justify-content: space-between; align-items: center; }
header a { font-weight: bold; color: var(--fg); }
#theme-toggle {
  display: inline-flex; color: var(--muted);
  background: none; border: none; padding: 0.25rem; cursor: pointer; border-radius: 4px;
}
#theme-toggle:hover { color: var(--fg); }
#theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Citations: hidden inside links, shown as a popup on hover/focus. */
a:has(x-citation) { position: relative; }
x-citation { display: none; }
a:hover x-citation, a:focus x-citation {
  display: block; position: absolute; left: 0; top: 100%; z-index: 10;
  width: min(24rem, 80vw); padding: 0.5rem 0.75rem;
  background: var(--popup-bg); color: var(--popup-fg); border: 1px solid var(--popup-border); border-radius: 4px;
  font-size: 0.85rem; font-weight: normal; line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.stage { font-style: italic; color: var(--muted); }