:root{color-scheme:light dark;
--bg:#fbfbfc;--bg2:#f3f4f7;--panel:#ffffff;--ink:#0d1117;--ink2:#2f3742;--muted:#566070;--line:#e3e6eb;--line2:#d4d8df;
--accent:#4b44d6;--accent2:#3a33c2;--accent-soft:#eeeefe;--accent-ink:#ffffff;--ok:#0b6b4a;--ok-soft:#e5f5ee;
--warn:#6b4700;--warn-soft:#fff6e0;--warn-line:#f0cf80;--info-soft:#eef3fd;--info-line:#bcd0f5;
--code-bg:#0d1017;--code-ink:#dde3ec;--code-line:#202634;--shadow:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.06);
--r:14px;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
@media (prefers-color-scheme:dark){:root{--bg:#0a0b0f;--bg2:#101219;--panel:#13151c;--ink:#eceef3;--ink2:#c9ced8;--muted:#9aa3b3;--line:#232733;--line2:#2e3341;
--accent:#9198ff;--accent2:#aab0ff;--accent-soft:#1b1d36;--accent-ink:#0a0b0f;--ok:#5fd3a5;--ok-soft:#0f2a20;--warn:#f5cf7a;--warn-soft:#2a2210;--warn-line:#5a4615;--info-soft:#121a2c;--info-line:#24365a;
--code-bg:#0b0d13;--code-line:#1d2230;--shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.35)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}a:hover{color:var(--accent2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;border-radius:8px;z-index:50}.skip:focus{left:12px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
code{font-family:var(--mono);font-size:.88em;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:.08em .35em;word-break:break-word}
/* header */
.site-h{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.site-h .wrap{display:flex;align-items:center;gap:24px;height:62px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:750;font-size:18px;letter-spacing:-.02em}
.logo svg{width:28px;height:28px;flex:none}.logo b{color:var(--accent);font-weight:750}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:550;padding:7px 11px;border-radius:8px;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{background:var(--bg2);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:650;font-size:15px;border-radius:10px;padding:10px 16px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-p{background:var(--accent);color:var(--accent-ink)}.btn-p:hover{background:var(--accent2);color:var(--accent-ink)}
.btn-g{background:var(--panel);color:var(--ink);border-color:var(--line2)}.btn-g:hover{border-color:var(--muted);color:var(--ink)}
.site-h .btn{padding:7px 13px;font-size:14px}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:72px 0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:5px 12px 5px 10px;margin-bottom:20px}
.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
h1{font-size:clamp(34px,5vw,54px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px;font-weight:780}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--ink2);margin:0 0 26px;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
/* harness badges */
.hb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;line-height:1;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);white-space:nowrap}
.hb:before{content:"";width:8px;height:8px;border-radius:3px;background:var(--dot,#888)}
.hb-cc{--dot:#d97757}.hb-cx{--dot:#10a37f}.hb-oc{--dot:#6b7280}.hb-gs{--dot:#e1a23b}.hb-ai{--dot:#14b8a6}.hb-oh{--dot:#8b5cf6}.hb-gm{--dot:#4285f4}.hb-gb{--dot:#111827}
@media (prefers-color-scheme:dark){.hb-gb{--dot:#e5e7eb}.hb-oc{--dot:#a3a9b6}}
.kind{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.kind-Compare{background:#fdeee8;color:#9a3412}.kind-Recipe{background:var(--ok-soft);color:var(--ok)}.kind-Guide{background:var(--info-soft);color:#1d4ed8}
@media (prefers-color-scheme:dark){.kind-Compare{background:#2c1710;color:#fdba8c}.kind-Guide{color:#93b4ff}}
/* terminal */
.term{background:var(--code-bg);border:1px solid var(--code-line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--code-line)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#3a4050}.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-bar span{margin-left:8px;font:12.5px var(--mono);color:#8a93a6}
.term pre{margin:0;padding:18px 20px 22px;font:13px/1.7 var(--mono);color:var(--code-ink);overflow:auto}
.term .k{color:#9db4ff}.term .g{color:#7ee2b8}.term .c{color:#7d879a}
/* signup */
.signup{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.signup:before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(135deg,var(--accent),transparent 40%,transparent 60%,var(--ok));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55}
.signup h2{font-size:18px;margin:0 0 4px;letter-spacing:-.01em}.signup p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.signup form{display:flex;gap:8px;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);color:var(--ink)}
.signup input[type=email]::placeholder{color:var(--muted)}
.signup input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.signup button[disabled]{opacity:.65;cursor:wait}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}.msg{font-size:14px;margin-top:8px;min-height:21px}.ok{color:var(--ok)}.err{color:#c0262d}
@media (prefers-color-scheme:dark){.err{color:#ff8a8a}}
/* sections */
.sec{padding:56px 0 8px}.sec-h{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}
.sec h2,.prose h2{font-size:clamp(23px,2.4vw,28px);letter-spacing:-.025em;line-height:1.2;margin:0}
.sec-h p{margin:6px 0 0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s,box-shadow .15s}
a.card{text-decoration:none;color:inherit}a.card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.card h3{font-size:17px;line-height:1.3;margin:0;letter-spacing:-.01em;color:var(--ink)}.card p{margin:0;color:var(--muted);font-size:14.5px}
.card .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card .more{margin-top:auto;font-size:14px;font-weight:650;color:var(--accent)}
.setup{font:12.5px/1.55 var(--mono);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink2);white-space:pre-wrap;word-break:break-word;margin-top:auto}
.src{font-size:12.5px;color:var(--muted)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feat div{padding:4px 0}.feat h3{font-size:16px;margin:0 0 6px}.feat p{margin:0;color:var(--muted);font-size:14.5px}
.feat svg{width:22px;height:22px;color:var(--accent);margin-bottom:8px}
/* article */
.crumbs{font-size:13.5px;color:var(--muted);padding-top:34px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.art-h{padding:14px 0 26px;border-bottom:1px solid var(--line);margin-bottom:8px}
.art-h h1{font-size:clamp(32px,4.4vw,46px);margin:14px 0 14px}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;color:var(--muted)}.meta span{display:inline-flex;align-items:center;gap:6px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px}
.prose{min-width:0;max-width:780px}.prose>section{padding-top:30px}
.prose h2{margin:0 0 12px}.prose h3{font-size:17px}
.prose p,.prose li{color:var(--ink2)}.prose ul,.prose ol{padding-left:1.25em}.prose li{margin:6px 0}
.fine{font-size:13px;color:var(--muted)!important}
.toc{position:sticky;top:86px;align-self:start;padding-top:30px;font-size:14px}
.toc h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.toc ol{list-style:none;margin:0 0 22px;padding:0;border-left:1px solid var(--line)}.toc li{margin:0}
.toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink);border-left-color:var(--accent)}
.mini{background:var(--accent-soft);border-radius:12px;padding:14px;font-size:13.5px;color:var(--ink2)}.mini a{font-weight:650}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:6px 0 16px}
.pick{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}.pick h3{margin:10px 0 6px;font-size:15.5px}.pick p{margin:0;font-size:14.5px;color:var(--muted)}
.callout{border:1px solid var(--info-line);background:var(--info-soft);border-radius:12px;padding:12px 16px;margin:16px 0}.callout p{margin:0;font-size:14.5px;color:var(--ink2)}
.callout.warn{border-color:var(--warn-line);background:var(--warn-soft)}.callout.warn b{color:var(--warn)}
/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:14px 0;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
thead th{position:sticky;top:0;background:var(--bg2);text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
tbody tr:last-child>*{border-bottom:0}tbody th{font-weight:650;color:var(--ink);white-space:nowrap}
tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
td code,th code{font-size:12.5px}
.bench td:nth-child(3),.bench td:nth-child(4),.bench td:nth-child(5),.bench td:nth-child(6){font-variant-numeric:tabular-nums;white-space:nowrap}
.bench tbody tr:first-child th:after{content:"Top";margin-left:8px;font-size:11px;background:var(--ok-soft);color:var(--ok);padding:2px 7px;border-radius:999px}
/* code */
figure.code{margin:16px 0;background:var(--code-bg);border:1px solid var(--code-line);border-radius:12px;overflow:hidden}
figure.code figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 8px 7px 14px;border-bottom:1px solid var(--code-line);font:12.5px var(--mono);color:#9aa4b6}
.copy{font:600 12px var(--font);color:#c8cfdb;background:#1b2130;border:1px solid #2a3142;border-radius:7px;padding:5px 10px;cursor:pointer}
.copy:hover{background:#252c3e;color:#fff}.copy.done{color:#7ee2b8;border-color:#2c6b52}
figure.code pre{margin:0;padding:14px 16px;overflow:auto;font:13px/1.65 var(--mono);color:var(--code-ink);tab-size:2}
figure.code code{background:none;border:0;padding:0;font-size:inherit;color:inherit;word-break:normal;white-space:pre}
.t-c{color:#7d879a;font-style:italic}.t-s{color:#a5e3a0}.t-k{color:#9db4ff}.t-n{color:#f7b07a}.t-h{color:#f0a8ff;font-weight:600}.t-m{color:#7fdbe6}.t-f{color:#ffd580}.t-o{color:#ff8fa3}
/* faq */
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:10px 0}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:20px;line-height:1;color:var(--muted)}
.faq details[open] summary:after{content:"−"}.faq details>div{padding:0 18px 14px;color:var(--ink2)}.faq details p{margin:0}
.sources ol{font-size:14px;padding-left:1.3em}.sources li{color:var(--muted)}
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
/* footer */
.site-f{margin-top:80px;border-top:1px solid var(--line);background:var(--bg2)}
.site-f .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:44px 24px 28px}
.site-f h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px}
.site-f ul{list-style:none;padding:0;margin:0}.site-f li{margin:7px 0}.site-f a{color:var(--ink2);text-decoration:none;font-size:14.5px}.site-f a:hover{color:var(--accent)}
.site-f p{color:var(--muted);font-size:13.5px;margin:10px 0 0;max-width:40ch}
.legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;font-size:12.5px;color:var(--muted)}
@media(max-width:1020px){.layout{grid-template-columns:1fr}.toc{display:none}.hero{grid-template-columns:1fr;gap:36px;padding-top:44px}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.wrap{padding:0 18px}.grid,.feat,.related{grid-template-columns:1fr}.site-h .wrap{gap:12px}.site-h .btn{display:none}
.site-h .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:6px}.nav{order:3;flex-basis:100%;margin:0 -6px}.nav a{padding:6px 9px;font-size:14px}
.sec-h{display:block}.site-f .wrap{grid-template-columns:1fr 1fr}.site-f .brand{grid-column:1/-1}th,td{padding:10px 12px}figure.code pre{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}