:root{--bg:#0e0d0b;--panel:#171613;--chip:#262420;--line:#2a2823;--ink:#f1eee6;--body:#d6d2c8;--muted:#b5b0a4;--dim:#8a857a;--accent:#d4f25c;--serif:'Instrument Serif',Georgia,serif;--mono:'Geist Mono',ui-monospace,monospace;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{padding:0 12px 12px}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60}

.header-shell{position:sticky;top:0;z-index:50;padding:12px 0 0}
header{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(23,22,19,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(241,238,230,.08)}
.logo{display:flex;align-items:baseline;gap:6px;color:var(--ink)}
.logo .name{font-family:var(--serif);font-size:24px;letter-spacing:-.01em}
.logo .ai{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:4px;background:var(--accent);color:var(--bg)}
.switch{display:flex;gap:4px;padding:4px;border-radius:999px;background:#1a1916}
.switch a{padding:8px 16px;border-radius:999px;color:var(--muted);font-size:14px;transition:background .2s,color .2s}
.switch a:hover{color:var(--ink)}
.switch a[aria-current=page]{background:var(--chip);color:var(--ink)}

.hero{max-width:1320px;margin:12px auto 0;border-radius:28px;background:var(--panel);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:28px}
.hero .label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(52px,8vw,120px);line-height:.9;letter-spacing:-.03em}
h1 em{color:var(--accent)}
.meta{display:flex;gap:10px;flex-wrap:wrap}
.meta span{font-family:var(--mono);font-size:12px;padding:8px 12px;border-radius:999px;background:var(--chip);color:var(--muted)}
.lead{margin:0;max-width:640px;font-size:18px;line-height:1.6;color:var(--muted)}

.layout{max-width:1320px;margin:12px auto 0;display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;align-items:start}
.toc{position:sticky;top:96px;border-radius:28px;background:var(--panel);padding:24px}
.toc .label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;padding:7px 10px;border-radius:10px;color:var(--muted);font-size:14px;line-height:1.35;transition:background .2s,color .2s}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--dim);padding-top:2px}
.toc a:hover{color:var(--ink);background:#1c1b17}
.toc a.active{color:var(--ink);background:var(--chip)}
.toc a.active::before{color:var(--accent)}

article{border-radius:28px;background:var(--panel);padding:clamp(28px,5vw,64px);counter-reset:s}
article section{padding:32px 0;border-top:1px solid var(--line);counter-increment:s}
article section:first-child{border-top:0;padding-top:0}
article h2{display:flex;gap:16px;align-items:baseline;margin:0 0 16px;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.01em}
article h2::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--accent)}
article h3{margin:24px 0 8px;font-size:17px;font-weight:600}
article p,article li{color:var(--body);font-size:16px;line-height:1.7}
article p{margin:0 0 14px;max-width:72ch}
article ul{margin:0 0 14px;padding-left:20px;max-width:72ch}
article li{margin-bottom:6px}
article li::marker{color:var(--accent)}
article strong{color:var(--ink);font-weight:600}
article a{border-bottom:1px solid rgba(212,242,92,.35)}
.callout{margin:16px 0;padding:20px 22px;border-radius:16px;background:#1f1d19;border:1px solid var(--line)}
.callout p:last-child{margin:0}
.contact-card{margin-top:8px;padding:24px;border-radius:20px;background:var(--accent);color:var(--bg)}
.contact-card p{color:var(--bg);margin:0 0 6px}
.contact-card strong{color:var(--bg);font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.01em}
.contact-card a{color:var(--bg);border-bottom-color:rgba(14,13,11,.35);font-weight:600}

footer{max-width:1320px;margin:12px auto 0;padding:24px 8px 12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:#6b665c}
footer a{color:#6b665c}
footer a:hover{color:var(--accent)}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .toc{position:static}
}
@media (max-width:560px){
  .switch a{padding:8px 12px}
  header{padding-left:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{
  :root{--bg:#fff;--panel:#fff;--ink:#000;--body:#222;--muted:#444}
  .header-shell,.toc,.progress,footer{display:none}
  .layout{display:block}
  h1 em,article h2::before{color:#000}
}