:root[data-theme="light"] {
  color-scheme: light;
  --site-bg: #f7f7f5;
  --site-surface: #ffffff;
  --site-ink: #151515;
  --site-muted: #666666;
  --site-line: #d9d9d5;
  --site-hover: #efefeb;
  --site-accent: #287a4b;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --site-bg: #0a0a0a;
  --site-surface: #141414;
  --site-ink: #f4f4f4;
  --site-muted: #a3a3a3;
  --site-line: #333333;
  --site-hover: #1d1d1d;
  --site-accent: #49d17d;
}

* { box-sizing: border-box; }
html.theme-animate body { transition: background-color .2s ease, color .2s ease; }

.theme-toggle {
  position: fixed;
  z-index: 100;
  top: 20px;
  left: 20px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--site-line, var(--line, #777));
  border-radius: 999px;
  color: var(--site-ink, var(--ink, currentColor));
  background: var(--site-surface, var(--surface, transparent));
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.theme-toggle:hover { background: var(--site-hover, var(--code-bg, transparent)); }
.theme-toggle:focus-visible { outline: 2px solid var(--site-accent, var(--accent, #49d17d)); outline-offset: 3px; }

.section-page {
  margin: 0;
  min-height: 100vh;
  color: var(--site-ink);
  background: var(--site-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site-shell { width: min(88vw, 760px); margin: 0 auto; padding: 72px 0 52px; }
.section-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.back-link, .section-link { color: var(--site-muted); text-decoration: none; }
.back-link:hover, .section-link:hover, .section-link[aria-current="page"] { color: var(--site-ink); }
.section-links { display: flex; gap: 18px; font-size: 14px; font-weight: 600; }
.section-header { margin: 40px 0 52px; }
.section-eyebrow { margin: 0 0 12px; color: var(--site-muted); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.section-title { margin: 0 0 12px; font-size: clamp(52px, 11vw, 96px); line-height: .95; letter-spacing: -.06em; }
.section-intro { max-width: 640px; margin: 0; color: var(--site-muted); font-size: 18px; line-height: 1.7; }
.content-list { border-top: 1px solid var(--site-line); }
.content-item { display: block; padding: 28px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--site-line); }
.content-item:hover .content-title { color: var(--site-accent); }
.content-meta { color: var(--site-muted); font-size: 14px; }
.content-title { margin: 8px 0; font-size: clamp(22px, 4vw, 30px); line-height: 1.25; letter-spacing: -.02em; transition: color .15s ease; }
.content-summary { margin: 0; color: var(--site-muted); line-height: 1.6; }
.empty-state { padding: 32px 0; border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); }
.empty-state-title { margin: 0 0 8px; font-size: 22px; }
.empty-state p { margin: 0; color: var(--site-muted); line-height: 1.6; }
.site-footer { margin-top: 52px; color: var(--site-muted); font-size: 13px; }

@media (max-width: 560px) {
  .site-shell { width: min(90vw, 760px); padding-top: 68px; }
  .section-nav { align-items: flex-start; }
  .section-links { gap: 12px; }
  .section-header { margin-top: 36px; }
}
@media print { .theme-toggle { display: none !important; } }