*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Themes ─────────────────────────────────────────────────────────── */

:root, [data-theme="zinc"] {
  --bg:           #09090b;
  --bg-panel:     rgba(24,24,27,0.5);
  --border:       #27272a;
  --border-faint: #1c1c1e;
  --active:       #34d399;
  --accent:       #f4f4f5;
  --text:         #f4f4f5;
  --text-dim:     #a1a1aa;
  --text-muted:   #52525b;
  --text-subtle:  #3f3f46;
  --info:         #34d399;
  --warn:         #fbbf24;
  --fail:         #f87171;
  --code-bg:      #27272a;
  --code-fg:      #6ee7b7;
  --accent-faint: rgba(52,211,153,0.4);
  --active-faint: rgba(52,211,153,0.4);
  --active-dim:   rgba(52,211,153,0.7);
  --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
  --serif: 'Newsreader', 'Georgia', serif;
  --prose: 'Charter', 'Bitstream Charter', 'Georgia', serif;
}

[data-theme="menace"] {
  --bg:           #0d0d0d;
  --bg-panel:     rgba(20,20,20,0.5);
  --border:       #585858;
  --border-faint: #2a2a2a;
  --active:       #3aff37;
  --accent:       #ff3dbe;
  --text:         #e4e4e4;
  --text-dim:     #9a9a9a;
  --text-muted:   #6e6e6e;
  --text-subtle:  #4e4e4e;
  --info:         #5de4c7;
  --warn:         #d29922;
  --fail:         #f85149;
  --code-bg:      #111;
  --code-fg:      #d29922;
  --accent-faint: rgba(255,61,190,0.35);
  --active-faint: rgba(58,255,55,0.35);
  --active-dim:   rgba(58,255,55,0.7);
}

[data-theme="gruvbox"] {
  --bg:           #1d2021;
  --bg-panel:     rgba(32,30,28,0.5);
  --border:       #504945;
  --border-faint: #3c3836;
  --active:       #b8bb26;
  --accent:       #fe8019;
  --text:         #ebdbb2;
  --text-dim:     #bdae93;
  --text-muted:   #665c54;
  --text-subtle:  #504945;
  --info:         #83a598;
  --warn:         #fabd2f;
  --fail:         #fb4934;
  --code-bg:      #282828;
  --code-fg:      #fabd2f;
  --accent-faint: rgba(254,128,25,0.35);
  --active-faint: rgba(184,187,38,0.35);
  --active-dim:   rgba(184,187,38,0.7);
}

[data-theme="cyberpunk"] {
  --bg:           #050505;
  --bg-panel:     rgba(28,28,28,0.5);
  --border:       #2a2a2a;
  --border-faint: #1c1c1c;
  --active:       #ff8c00;
  --accent:       #ff4500;
  --text:         #e0e0e0;
  --text-dim:     #666666;
  --text-muted:   #444444;
  --text-subtle:  #333333;
  --info:         #00ffff;
  --warn:         #ffa500;
  --fail:         #ff0000;
  --code-bg:      #111;
  --code-fg:      #ffa500;
  --accent-faint: rgba(255,69,0,0.35);
  --active-faint: rgba(255,140,0,0.35);
  --active-dim:   rgba(255,140,0,0.7);
}

[data-theme="midnight"] {
  --bg:           #1a1b26;
  --bg-panel:     rgba(30,31,46,0.5);
  --border:       #3b4261;
  --border-faint: #292e42;
  --active:       #7aa2f7;
  --accent:       #bb9af7;
  --text:         #c0caf5;
  --text-dim:     #9aa5ce;
  --text-muted:   #414868;
  --text-subtle:  #3b4261;
  --info:         #7dcfff;
  --warn:         #e0af68;
  --fail:         #f7768e;
  --code-bg:      #16161e;
  --code-fg:      #e0af68;
  --accent-faint: rgba(187,154,247,0.35);
  --active-faint: rgba(122,162,247,0.35);
  --active-dim:   rgba(122,162,247,0.7);
}

[data-theme="catppuccin"] {
  --bg:           #1e1e2e;
  --bg-panel:     rgba(30,30,46,0.5);
  --border:       #585b70;
  --border-faint: #45475a;
  --active:       #a6e3a1;
  --accent:       #f5c2e7;
  --text:         #cdd6f4;
  --text-dim:     #bac2de;
  --text-muted:   #585b70;
  --text-subtle:  #45475a;
  --info:         #89dceb;
  --warn:         #f9e2af;
  --fail:         #f38ba8;
  --code-bg:      #181825;
  --code-fg:      #f9e2af;
  --accent-faint: rgba(245,194,231,0.35);
  --active-faint: rgba(166,227,161,0.35);
  --active-dim:   rgba(166,227,161,0.7);
}

/* ─── Base ────────────────────────────────────────────────────────────── */

html { background: var(--bg); color: var(--text); font-size: 21px; }
body { min-height: 100vh; }

a { color: var(--active-faint); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--active); }
em { font-style: italic; }
strong { color: var(--text); font-weight: 600; }

/* ─── Nav ─────────────────────────────────────────────────────────────── */

nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(88,88,88,0.4);
  padding: 0.875rem 1.5rem;
  background: var(--bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
nav .inner {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav a { text-decoration: none; }
nav span {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: -0.01em;
  transition: color 0.15s;
}
nav a:hover span { color: var(--text); }
nav .nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
nav .nav-links a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
nav .nav-links a:hover { color: var(--text-dim); }
nav .nav-links a.active { color: var(--text); }

/* Theme switcher */
.theme-switcher {
  position: relative;
  display: flex;
  align-items: center;
}
.theme-btn {
  background: none;
  border: 1px solid var(--border-faint);
  border-radius: 0.375rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.theme-btn:hover { color: var(--active); border-color: var(--border); }
.theme-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  min-width: 8rem;
  z-index: 100;
}
.theme-dropdown.open { display: block; }
.theme-option {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.theme-option:hover { color: var(--active); background: var(--border-faint); }
.theme-option.current { color: var(--accent); }

/* ─── Layout ──────────────────────────────────────────────────────────── */

.content {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.5rem 8rem;
}

/* ─── Hero ────────────────────────────────────────────────────────────── */

.hero { margin-top: 5rem; margin-bottom: 4rem; }
h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.byline {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

/* ─── Section headings ────────────────────────────────────────────────── */

h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 5rem;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

h3 {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Prose ───────────────────────────────────────────────────────────── */

.prose {
  font-family: var(--prose);
  font-size: 1.25rem;
  line-height: 1.85;
  color: var(--text-dim);
}
.prose p + p { margin-top: 1rem; }

/* ─── Divider ─────────────────────────────────────────────────────────── */

hr {
  border: none;
  border-top: 1px solid var(--border-faint);
  margin: 4rem 0;
}

/* ─── Code ────────────────────────────────────────────────────────────── */

code {
  font-family: var(--mono);
  font-size: 0.875rem;
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
pre {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
pre.default {
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
pre.accent {
  background: var(--bg);
  border: 1px solid var(--accent-faint);
  color: var(--accent-faint);
}

/* ─── Badge ───────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  background: var(--border-faint);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

/* ─── Block label ─────────────────────────────────────────────────────── */

.block-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.block-label.emerald { color: var(--active-dim); }
.block-label.red     { color: var(--fail); }
.block-label.amber   { color: var(--warn); }

/* ─── Interactive block ───────────────────────────────────────────────── */

.interactive-block {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 2.5rem auto;
  max-width: 56rem;
}
.interactive-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--active-dim);
  margin-bottom: 1rem;
}

/* ─── Form ────────────────────────────────────────────────────────────── */

label.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}
select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--mono);
  margin-bottom: 0.75rem;
  outline: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23585858' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
select:focus { border-color: var(--active); box-shadow: 0 0 0 1px var(--active); }

button.primary {
  margin-top: 1rem;
  background: var(--active);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.875rem;
  font-family: var(--mono);
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
button.primary:hover { opacity: 0.85; }

button.toggle-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  padding: 0;
  transition: color 0.15s;
}
button.toggle-link:hover { color: var(--text-dim); }

/* ─── Prompt output ───────────────────────────────────────────────────── */

.prompt-output { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* ─── Badges row ──────────────────────────────────────────────────────── */

.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* ─── Code grid ───────────────────────────────────────────────────────── */

.code-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 56rem;
  margin: 2rem auto;
}
@media (max-width: 640px) { .code-grid { grid-template-columns: 1fr; } }

/* ─── Tool pills ──────────────────────────────────────────────────────── */

.tool-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tool-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--active);
}

/* ─── Comparison table ────────────────────────────────────────────────── */

.comparison-wrap { max-width: 56rem; margin: 0 auto; }
table {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.875rem;
  border-collapse: collapse;
}
.table-wrap {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 2rem;
}
thead tr { border-bottom: 1px solid var(--border); }
thead th { padding: 0.75rem 1rem; font-weight: 500; }
thead th:first-child { text-align: left; color: var(--text-muted); }
thead th.wf { text-align: right; color: var(--active-dim); }
thead th.ag { text-align: right; color: var(--warn); }
tbody tr { border-bottom: 1px solid var(--border-faint); }
tbody tr:last-child { border-bottom: none; }
tbody td { padding: 0.625rem 1rem; color: var(--text-dim); }
tbody td.val-same { text-align: right; color: var(--text); }
tbody td.val-wf { text-align: right; color: var(--active); }
tbody td.val-ag { text-align: right; color: var(--text-dim); }

/* ─── Tab group ───────────────────────────────────────────────────────── */

.tab-group {
  display: flex;
  gap: 0.25rem;
  background: var(--code-bg);
  border-radius: 0.5rem;
  padding: 0.25rem;
  width: fit-content;
  margin-bottom: 1.5rem;
}
.tab {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--mono);
  border: none;
  cursor: pointer;
  background: none;
  color: var(--text-muted);
  transition: color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active-wf { background: var(--border); color: var(--active); }
.tab.active-ag { background: var(--border); color: var(--warn); }

/* ─── Trace steps ─────────────────────────────────────────────────────── */

.trace { display: flex; flex-direction: column; gap: 0.75rem; }
.step {
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 2px solid;
}
.step.wf-step   { border-color: var(--active-faint); }
.step.ag-tool   { border-color: rgba(210,153,34,0.5); }
.step.ag-reason { border-color: rgba(210,153,34,0.3); }
.step-header { display: flex; align-items: center; justify-content: space-between; }
.step-left { display: flex; align-items: center; gap: 0.5rem; }
.step-tag { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; }
.step-tag.emerald      { color: var(--active-dim); }
.step-tag.amber-tool   { color: var(--warn); }
.step-tag.amber-reason { color: rgba(210,153,34,0.5); }
.step-name { font-family: var(--mono); font-size: 0.875rem; color: var(--text); }
.step-badges { display: flex; gap: 0.5rem; }
.reasoning-text {
  font-family: var(--prose);
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.25rem;
  line-height: 1.6;
}
.step-output { margin-top: 0.5rem; }

/* ─── Totals bar ──────────────────────────────────────────────────────── */

.totals {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: var(--mono);
  font-size: 0.875rem;
}
.totals.wf { border: 1px solid var(--active-faint); background: var(--active-faint); color: var(--active-dim); }
.totals.ag { border: 1px solid rgba(210,153,34,0.3); background: rgba(210,153,34,0.08); color: var(--warn); }

/* ─── Sign-off ────────────────────────────────────────────────────────── */

.signoff {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-faint);
}
.signoff a { transition: color 0.15s; }
.signoff a:hover { color: var(--text-dim); }

/* ─── Retry section ───────────────────────────────────────────────────── */

.retry-steps { display: flex; flex-direction: column; gap: 0.75rem; max-width: 56rem; margin: 2rem auto; }

/* ─── Canned example ──────────────────────────────────────────────────── */

.canned { max-width: 56rem; margin: 1.5rem auto; }

/* ─── Post list (home page) ───────────────────────────────────────────── */

.post-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: stretch;
}
@media (max-width: 640px) { .post-list { grid-template-columns: 1fr; } }
.post-item {
  padding: 1.5rem;
  border: 1px solid var(--border-faint);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  justify-content: space-between;
}
.post-item-top { display: flex; flex-direction: column; gap: 0.375rem; }
.post-item a { text-decoration: none; color: inherit; }
.post-item a:hover .post-title { color: var(--accent); }
.post-title {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.15s;
}
.post-desc {
  font-family: var(--prose);
  font-size: 0.9375rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.post-date {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}