:root {
  --bg: #070a0f;
  --surface: rgba(15, 21, 31, .86);
  --surface-strong: #111824;
  --ink: #f1f5f7;
  --muted: #98a6b7;
  --line: rgba(184, 202, 220, .15);
  --line-strong: rgba(199, 255, 74, .32);
  --signal: #c7ff4a;
  --blue: #73a7ff;
  --violet: #a48bff;
  --bad: #ff8a8a;
  --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 78% -8%, rgba(72, 109, 255, .16), transparent 34rem), radial-gradient(circle at 8% 22%, rgba(199, 255, 74, .06), transparent 28rem), var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.wrap { width: min(var(--max), calc(100% - 2.5rem)); margin-inline: auto; }
.nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(7, 10, 15, .82); border-bottom: 1px solid var(--line); }
.nav-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.back { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); text-decoration: none; font-size: .88rem; transition: color .2s ease; }
.back:hover { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 760; letter-spacing: -.025em; font-size: .92rem; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(199, 255, 74, .08); color: var(--signal); font: 800 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
main { padding-block: clamp(2.5rem, 6vw, 4rem) 5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: var(--signal); font: 760 .74rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
h1 { margin: 1rem 0 1.1rem; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 780; max-width: 780px; }
.lede { max-width: 700px; color: #afbdca; font-size: clamp(1.02rem, 1.6vw, 1.15rem); margin: 0 0 2.2rem; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2.6rem; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: .38rem .75rem; color: #c7d2dc; font-size: .78rem; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 3rem; }
.kpi { border: 1px solid var(--line); border-radius: 1rem; padding: 1.15rem 1.1rem; background: var(--surface); }
.kpi strong { display: block; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--signal); letter-spacing: -.03em; }
.kpi span { color: var(--muted); font-size: .75rem; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 1rem; }
section.block { margin-bottom: 3rem; }
.prose { color: #c3ced8; max-width: 720px; }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
table.model-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 0; font-size: .9rem; }
table.model-table th, table.model-table td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
table.model-table th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
table.model-table tr.chosen td { color: var(--signal); font-weight: 700; }
.insight-box { border: 1px solid var(--line-strong); border-radius: 1rem; padding: 1.3rem 1.4rem; background: rgba(199,255,74,.05); }
.insight-box strong { display: block; color: var(--signal); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.insight-box p { margin: 0; color: #d6e0e8; }
.actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.5rem; }
.btn { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: .7rem; padding: .7rem 1.05rem; text-decoration: none; font-weight: 720; font-size: .9rem; transition: transform .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); border-color: rgba(199,255,74,.5); }
.btn-primary { color: #0c1105; background: var(--signal); border-color: var(--signal); }
.btn-secondary { background: rgba(255,255,255,.03); }
footer { color: var(--muted); font-size: .8rem; padding-block: 2rem; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  table.model-table { font-size: .8rem; }
  .brand > span:last-child { display: none; }
}

/* Theme toggle and light theme (shared by all case-study pages and the resume page) */
.nav-right { display: flex; align-items: center; gap: .9rem; }
.theme-toggle { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.045); cursor: pointer; padding: 0; }
.theme-toggle:hover { border-color: var(--line-strong); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle .i-sun { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }
html[data-theme="light"] { color-scheme: light; --bg: #f4f6f9; --surface: rgba(255,255,255,.92); --surface-strong: #ffffff; --ink: #0f1722; --muted: #475569; --line: rgba(15,23,34,.14); --line-strong: rgba(63,98,18,.42); --signal: #3f6212; --blue: #2b59c3; --violet: #6a4bd0; --bad: #b42318; }
html[data-theme="light"] body { background: radial-gradient(circle at 78% -8%, rgba(72,109,255,.10), transparent 34rem), radial-gradient(circle at 8% 22%, rgba(120,190,20,.10), transparent 28rem), var(--bg); }
html[data-theme="light"] .nav { background: rgba(244,246,249,.86); }
html[data-theme="light"] .lede { color: #3b4a5e; }
html[data-theme="light"] .tag { color: #2a384b; }
html[data-theme="light"] .prose { color: #243247; }
html[data-theme="light"] .kpi { background: #ffffff; box-shadow: 0 1px 2px rgba(15,23,34,.05); }
html[data-theme="light"] .insight-box { background: rgba(63,98,18,.07); }
html[data-theme="light"] .insight-box p { color: #1e293b; }
html[data-theme="light"] .btn-primary { color: #0c1105; background: #c7ff4a; border-color: #8fbf1f; }
html[data-theme="light"] .btn-secondary, html[data-theme="light"] .theme-toggle { background: rgba(15,23,34,.05); }