*, *::before, *::after { box-sizing: border-box; }
:root {
  --font: "Nunito", sans-serif;
  --small: 0.78rem;
  --base: 0.9rem;
  --fg: #000;
  --bg: #fff;
  --muted-1: rgba(0,0,0,0.55);
  --muted-2: rgba(0,0,0,0.6);
  --muted-3: rgba(0,0,0,0.75);
  --border: rgba(0,0,0,0.2);
  --border-hover: rgba(0,0,0,0.5);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8e8e8;
    --bg: #111;
    --muted-1: rgba(255,255,255,0.5);
    --muted-2: rgba(255,255,255,0.55);
    --muted-3: rgba(255,255,255,0.7);
    --border: rgba(255,255,255,0.2);
    --border-hover: rgba(255,255,255,0.5);
  }
}
html.dark {
  color-scheme: dark;
  --fg: #e8e8e8;
  --bg: #111;
  --muted-1: rgba(255,255,255,0.5);
  --muted-2: rgba(255,255,255,0.55);
  --muted-3: rgba(255,255,255,0.7);
  --border: rgba(255,255,255,0.2);
  --border-hover: rgba(255,255,255,0.5);
}
html.light {
  color-scheme: light;
  --fg: #000;
  --bg: #fff;
  --muted-1: rgba(0,0,0,0.55);
  --muted-2: rgba(0,0,0,0.6);
  --muted-3: rgba(0,0,0,0.75);
  --border: rgba(0,0,0,0.2);
  --border-hover: rgba(0,0,0,0.5);
}
html { font-size: 16px; }
body {
  font-family: var(--font);
  font-size: var(--base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
  max-width: 1200px;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.meta-line { font-size: 0.7rem; color: var(--muted-1); margin-bottom: 0.2rem; }
.meta-line .venue { font-style: italic; }
.authors { font-size: var(--small); color: var(--muted-2); }
.cite-btn { display: inline-block; background: transparent; color: var(--muted-1); border: 1px solid var(--border); padding: 0.15rem 0.55rem; font: inherit; font-size: 0.68rem; cursor: pointer; border-radius: 2px; line-height: 1.4; }
.cite-btn:hover { color: var(--fg); border-color: var(--border-hover); }
.cite-btn.copied { color: var(--fg); border-color: var(--fg); }

/* ── Mode toggle ── */
.mode-toggle {
  position: fixed;
  top: 1.2rem;
  right: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 2px;
  display: flex;
  opacity: 0.4;
  z-index: 10;
}
.mode-toggle:hover { opacity: 1; }
.mode-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mode-toggle .icon-sun { display: none; }
.mode-toggle .icon-moon { display: flex; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .mode-toggle .icon-sun { display: flex; }
  html:not(.light) .mode-toggle .icon-moon { display: none; }
}
html.dark .mode-toggle .icon-sun { display: flex; }
html.dark .mode-toggle .icon-moon { display: none; }
html.light .mode-toggle .icon-sun { display: none; }
html.light .mode-toggle .icon-moon { display: flex; }