:root{
  color-scheme: dark;
  --bg: oklch(0.16 0.025 255);
  --bg2: oklch(0.20 0.035 255);
  --surface: oklch(0.24 0.035 255);
  --surface2: oklch(0.29 0.04 255);
  --ink: oklch(0.95 0.015 250);
  --muted: oklch(0.78 0.025 250);
  --line: oklch(0.38 0.035 255);
  --blue: oklch(0.72 0.16 235);
  --red: oklch(0.70 0.18 25);
  --green: oklch(0.78 0.15 155);
  --amber: oklch(0.82 0.15 80);
  --shadow: 0 16px 48px oklch(0.08 0.02 255 / .32);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 20% 0%,oklch(0.28 0.08 245),transparent 34rem),linear-gradient(180deg,var(--bg),oklch(0.12 0.025 255));color:var(--ink);line-height:1.6}
a{color:inherit}.label{margin:0 0 .75rem;color:var(--green);font-weight:700;letter-spacing:.02em}.lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:64ch;color:var(--muted)}
.nav{position:sticky;top:0;z-index:5;display:flex;gap:.45rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:.9rem;background:oklch(0.14 0.025 255 / .86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav a,.nav button,.primary,.secondary{border:1px solid var(--line);background:oklch(0.24 0.035 255 / .82);color:var(--ink);padding:.65rem .9rem;border-radius:999px;text-decoration:none;font:inherit;cursor:pointer;transition:background .18s ease,transform .18s ease,border-color .18s ease}.nav a:hover,.nav button:hover,.secondary:hover{background:var(--surface2);transform:translateY(-1px);border-color:var(--blue)}
.hero{min-height:92vh}.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:2rem;max-width:1180px;margin:0 auto;padding:clamp(4rem,8vw,8rem) 1.25rem 4rem;align-items:center}.hero h1{font-size:clamp(3rem,8vw,6rem);line-height:.95;letter-spacing:-.035em;margin:.2rem 0 1.2rem;text-wrap:balance}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}.primary{background:var(--blue);border-color:var(--blue);color:oklch(0.12 0.03 245);font-weight:800}.brief,.person,.code-grid article,.answer-grid article,.timeline article,.deep-dive{background:linear-gradient(180deg,var(--surface),oklch(0.20 0.03 255));border:1px solid var(--line);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow)}.brief h2{margin-top:0}.brief ol{padding-left:1.35rem}.brief li+li{margin-top:.75rem}
.section{max-width:1180px;margin:0 auto;padding:4.5rem 1.25rem;border-top:1px solid oklch(0.32 0.03 255)}.section h2{font-size:clamp(2rem,4vw,3.8rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 1.5rem;text-wrap:balance}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start}.reverse{direction:rtl}.reverse>*{direction:ltr}.text{font-size:1.1rem;color:var(--muted)}
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.timeline span{color:var(--amber);font-weight:800}.timeline h3,.person h3,.code-grid h3,.answer-grid h3{margin:.35rem 0 .6rem;font-size:1.35rem}.timeline p,.person li,.person .tip,.code-grid p,.answer-grid p,.redflags li{color:var(--muted)}
.person-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.person.nate{border-color:oklch(0.55 0.12 235)}.person.phil{border-color:oklch(0.55 0.13 25)}.role{color:var(--green);font-weight:800}.intel{margin-top:.7rem;padding:.7rem .8rem;border:1px solid oklch(0.35 0.05 255);border-radius:12px;background:oklch(0.18 0.025 255);color:oklch(0.86 0.035 245)!important}.source-note{margin:1rem 0 0;color:var(--muted);font-size:.92rem}.tip{padding-top:.8rem;border-top:1px solid var(--line)}
.question-list{display:grid;gap:.8rem}details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem}summary{font-weight:800;cursor:pointer}details ul{margin-bottom:0;color:var(--muted)}
.code-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}pre{overflow-x:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:oklch(0.12 0.02 255);border:1px solid oklch(0.30 0.03 255);border-radius:12px;padding:1rem;font-size:.9rem}pre code{white-space:inherit;overflow-wrap:inherit;word-break:inherit;color:oklch(0.91 0.025 245)}code{font-family:"SFMono-Regular",Consolas,monospace;color:oklch(0.90 0.08 160)}.tok-keyword{color:oklch(0.78 0.18 300);font-weight:700}.tok-string{color:oklch(0.84 0.14 145)}.tok-number{color:oklch(0.82 0.16 70)}.tok-func{color:oklch(0.82 0.13 220)}.tok-comment{color:oklch(0.66 0.04 245);font-style:italic}.tok-sql{color:oklch(0.80 0.17 35);font-weight:800}.deep-dive{margin-top:1rem}.deep-dive ul{columns:2;column-gap:2rem}.deep-dive li{break-inside:avoid;margin-bottom:.8rem;color:var(--muted)}
.answer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.checks{display:grid;gap:.75rem}.checks label{display:flex;gap:.75rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem}.checks input{margin-top:.25rem;accent-color:var(--green)}.redflags ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem;padding:0;list-style:none}.redflags li{background:oklch(0.23 0.055 25);border:1px solid oklch(0.45 0.11 25);border-radius:12px;padding:1rem}
.strategy-grid,.snippet-grid,.practice-grid,.dosdonts,.vscode-layout,.vscode-commands{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.strategy-grid article,.snippet-grid article,.practice-grid article,.dosdonts article,.script-card,.setup-card,.vscode-commands article,.example-card{background:linear-gradient(180deg,var(--surface),oklch(0.20 0.03 255));border:1px solid var(--line);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow)}.strategy-grid ol,.strategy-grid ul,.dosdonts ul,.script-card ol,.setup-card ul{padding-left:1.25rem;color:var(--muted)}.strategy-grid li+li,.dosdonts li+li,.script-card li+li,.setup-card li+li{margin-top:.45rem}.library-list,.shortcut-grid{display:grid;gap:.75rem}.library-list article,.shortcut-grid article{display:grid;grid-template-columns:9rem 1fr;gap:1rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem}.library-list strong,.shortcut-grid strong{color:var(--amber);font-size:1.05rem}.library-list span,.shortcut-grid span{color:var(--muted)}.practice-grid article{min-height:12rem}.practice-grid h3,.strategy-grid h3,.snippet-grid h3,.dosdonts h3,.script-card h3,.setup-card h3,.vscode-commands h3{margin-top:0}.script-card{margin-top:1rem;background:oklch(0.22 0.055 155)}kbd{display:inline-block;min-width:1.7em;padding:.12rem .35rem;border-radius:6px;background:oklch(0.13 0.02 255);border:1px solid var(--line);color:var(--ink);font-size:.85em;text-align:center;box-shadow:inset 0 -1px 0 oklch(0.05 0.01 255 / .5)}.spoken{color:var(--ink);background:oklch(0.16 0.035 235);border:1px solid oklch(0.36 0.07 235);border-radius:12px;padding:.85rem}.vscode-commands{margin-top:1rem}.example-stack{display:grid;gap:1.25rem}.example-card{display:grid;gap:.75rem}.example-card h3{margin:0;font-size:1.45rem}.example-card h4{margin:.1rem 0 .4rem}.example-card p{margin:.2rem 0;color:var(--muted)}.explain{background:oklch(0.18 0.035 255);border:1px solid var(--line);border-radius:12px;padding:1rem}.explain ul{margin:0;padding-left:1.2rem;color:var(--muted)}.explain li+li{margin-top:.35rem}
footer{max-width:1180px;margin:0 auto;padding:2rem 1.25rem 4rem;color:var(--muted)}
.gate{position:fixed;inset:0;display:grid;place-items:center;z-index:20;background:radial-gradient(circle at 50% 0%,oklch(0.28 0.08 245),transparent 28rem),oklch(0.12 0.025 255)}.gate[hidden]{display:none}.gate-panel{width:min(92vw,520px);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2rem;box-shadow:var(--shadow)}.gate-panel h1{font-size:clamp(2rem,7vw,4rem);line-height:1;margin:.3rem 0}.pin-row{display:flex;gap:.6rem;margin-top:1rem}.pin-row input{min-width:0;flex:1;border:1px solid var(--line);border-radius:999px;background:oklch(0.14 0.02 255);color:var(--ink);padding:.8rem 1rem;font:inherit}.pin-row button{border:0;border-radius:999px;background:var(--green);color:oklch(0.13 0.035 155);font-weight:800;padding:.8rem 1rem;cursor:pointer}.error{color:var(--red);font-weight:800}
@media (max-width:760px){.hero-grid,.split{grid-template-columns:1fr}.hero-grid{padding-top:3rem}.deep-dive ul{columns:1}.pin-row{flex-direction:column}.nav{justify-content:flex-start;overflow:auto;flex-wrap:nowrap}.nav a,.nav button{white-space:nowrap}.section{padding:3.5rem 1rem}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}