/* Theme variables + base resets, lifted from the design. Component styling stays inline
   in the templates to preserve the original look exactly. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { margin: 0; }

:root {
  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --fg: #18181b;
  --fg-muted: #6b6b76;
  --border: #ececef;
  --card: #ffffff;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --shadow: 0 1px 2px rgba(10, 10, 20, 0.04), 0 10px 30px -16px rgba(10, 10, 20, 0.18);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --bg-subtle: #161619;
  --fg: #fafafa;
  --fg-muted: #9b9ba6;
  --border: #27272c;
  --card: #121215;
  --accent-soft: rgba(37, 99, 235, 0.18);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 34px -16px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

::selection { background: var(--accent-soft); }

a { color: inherit; }

/* theme toggle icon visibility */
.theme-sun { display: none; }
.theme-moon { display: block; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }

/* tab panels: shown/hidden by JS via [hidden] */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- article body */

.article {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg);
  text-wrap: pretty;
}
.article > * + * { margin-top: 1.1em; }
.article h1, .article h2, .article h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.3px;
  margin-top: 1.6em;
}
.article h1 { font-size: 26px; }
.article h2 { font-size: 21px; }
.article h3 { font-size: 17px; }
.article p, .article li { color: var(--fg-muted); }
.article strong { color: var(--fg); font-weight: 600; }
.article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.article a:hover { border-bottom-color: var(--accent); }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin-top: 0.4em; }
.article blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  color: var(--fg-muted);
}
.article img { max-width: 100%; border-radius: 12px; }
.article hr { border: none; border-top: 1px solid var(--border); }
.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.article th, .article td {
  border: 1px solid var(--border);
  padding: 8px 11px;
  text-align: left;
}
.article th { background: var(--bg-subtle); font-weight: 600; color: var(--fg); }

/* inline code */
.article :not(pre) > code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--fg);
}

/* fenced code blocks (Pygments codehilite) */
.article .codehilite {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
}
.article .codehilite pre { margin: 0; }
.article .codehilite code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
  background: none;
  border: none;
  padding: 0;
}

/* A compact, theme-aware Pygments token palette (works in light and dark). */
.codehilite .c, .codehilite .c1, .codehilite .cm, .codehilite .cs { color: #8a8a94; font-style: italic; }
.codehilite .k, .codehilite .kd, .codehilite .kn, .codehilite .kc, .codehilite .kr { color: #8b5cf6; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb, .codehilite .sd { color: #16a34a; }
:root[data-theme="dark"] .codehilite .s,
:root[data-theme="dark"] .codehilite .s1,
:root[data-theme="dark"] .codehilite .s2,
:root[data-theme="dark"] .codehilite .sb,
:root[data-theme="dark"] .codehilite .sd { color: #4ade80; }
.codehilite .nf, .codehilite .nd { color: #2563eb; }
.codehilite .nb, .codehilite .bp { color: #0891b2; }
.codehilite .mi, .codehilite .mf, .codehilite .mh, .codehilite .il { color: #ea580c; }
.codehilite .o, .codehilite .ow { color: var(--fg); }
.codehilite .n, .codehilite .p { color: var(--fg); }
.codehilite .nc, .codehilite .nn { color: #ca8a04; }