/* Dark theme + switch. Light is the default; dark applies only when the visitor opts in. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#9fb0ff;--accent-soft:#7f93f0;--bg:#0e1424;--bg-soft:#161d33;
  --ink:#eceff6;--ink-soft:#c7cfe0;--sub:#8f9ab3;--rule:#2a3552;--rule-soft:#1f2942;
}
:root[data-theme="dark"] .book{color:#0b1020}
.topbar{flex-wrap:wrap;row-gap:8px}
.topright{display:flex;align-items:center;gap:18px}

/* the switch: a track with a sliding thumb; the thumb shows the current mode (sun = light, moon = dark) */
.theme-switch{
  position:relative;display:inline-block;vertical-align:middle;
  width:46px;height:26px;margin-left:18px;padding:0;
  border:1px solid var(--sub);border-radius:999px;background:transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.theme-switch .thumb{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--sub);color:var(--bg);
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.theme-switch .thumb svg{
  grid-area:1/1;width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.theme-switch .moon{display:none}
.theme-switch[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.theme-switch[aria-checked="true"] .thumb{transform:translateX(22px);background:var(--bg);color:var(--accent)}
.theme-switch[aria-checked="true"] .sun{display:none}
.theme-switch[aria-checked="true"] .moon{display:block}
.theme-switch:hover{border-color:var(--accent)}
.theme-switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.topright .theme-switch{margin-left:0}
@media (prefers-reduced-motion:reduce){.theme-switch,.theme-switch .thumb{transition:none}}