@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/geist.woff2?v=1') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/geist-mono.woff2?v=1') format('woff2'); }
:root { --bg:#000; --raised:#0E0E13; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --ink:#EDEDF1; --ink-2:#A3A3AE; --ink-3:#6C6C78; --accent:#8E7DFA; --accent-soft:#B9AEFF;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --gutter:clamp(16px,4vw,40px); color-scheme:dark; }
* { box-sizing:border-box; } [hidden]{display:none!important}
html,body { margin:0; } body { background:var(--bg); color:var(--ink); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent-soft); text-underline-offset:3px; } a:hover { color:#D6CEFF; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1160px; margin-inline:auto; padding-inline:var(--gutter); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* nav */
.nav { position:sticky; top:0; z-index:10; background:rgba(0,0,0,.72); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:28px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:600 18px/1 var(--sans); letter-spacing:-.02em; }
.brand svg { width:28px; height:28px; flex:none; }
.wm { background:linear-gradient(120deg,#C9C0FF 0%,#9B8CFF 55%,#7560F4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; }
.wm span { font-weight:500; background:linear-gradient(120deg,#B6ACEB,#8E81DB); -webkit-background-clip:text; background-clip:text; color:transparent; }
.links { display:flex; gap:22px; margin-left:auto; }
.links a { color:var(--ink-2); text-decoration:none; font-size:14.5px; } .links a:hover, .links a[aria-current] { color:var(--ink); }
.btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border-radius:999px; font:500 14.5px/1 var(--sans); text-decoration:none; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,#A496FF 0%,#7A66F5 55%,#634EEA 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 20px -8px rgba(122,102,245,.7); }
.btn:hover { color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 5px rgba(142,125,250,.22); }
.nav .btn { height:36px; padding:0 16px; font-size:14px; }
@media (max-width:640px){ .links { gap:14px; } .nav .btn { display:none; } }
/* article */
.crumbs { font:500 13px/1 var(--mono); color:var(--ink-3); margin:44px 0 18px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:var(--ink-2); text-decoration:none; }
.article { max-width:740px; margin-inline:auto; padding-inline:var(--gutter); }
.article h1 { font-size:clamp(34px,5vw,52px); line-height:1.08; letter-spacing:-.04em; font-weight:600; margin:0; text-wrap:balance; }
.dek { font-size:20px; color:var(--ink-2); margin:18px 0 0; line-height:1.5; }
.meta { display:flex; gap:10px; align-items:center; margin:22px 0 36px; padding-bottom:28px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-3); flex-wrap:wrap; }
.meta b { color:var(--ink); font-weight:500; }
.prose h2 { font-size:26px; letter-spacing:-.02em; line-height:1.2; margin:44px 0 12px; font-weight:600; }
.prose p, .prose li { color:#C9C9D2; }
.prose ul { padding-left:22px; } .prose li { margin:6px 0; }
.prose code { font:500 .88em/1.4 var(--mono); background:#15151C; border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:#E2DDFF; }
.prose pre { background:#0C0C11; border:1px solid var(--line); border-radius:14px; padding:18px 20px; overflow-x:auto; }
.prose pre code { background:none; border:0; padding:0; font-size:13.5px; line-height:1.6; color:#D8D8E2; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin:24px 0; }
table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
th { text-align:left; font:600 12px/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding:14px 16px; border-bottom:1px solid var(--line); background:#0B0B10; }
td { padding:13px 16px; border-bottom:1px solid var(--line); color:#C9C9D2; vertical-align:top; } tr:last-child td { border-bottom:0; } td:first-child { color:var(--ink); font-weight:500; }
.cta-box { margin:56px 0 0; padding:28px; border:1px solid rgba(142,125,250,.3); border-radius:20px; background:radial-gradient(120% 140% at 0% 0%,rgba(142,125,250,.14),rgba(142,125,250,0) 60%),#0B0B10; }
.cta-box h2 { margin:0 0 8px; font-size:24px; letter-spacing:-.02em; } .cta-box p { margin:0 0 18px; color:var(--ink-2); }
.related { margin:64px 0 0; } .related h2 { font-size:15px; font-family:var(--mono); color:var(--ink-3); font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.card { display:block; padding:22px; border:1px solid var(--line); border-radius:16px; background:#0A0A0E; text-decoration:none; color:var(--ink); transition:border-color .15s; }
.card:hover { border-color:rgba(142,125,250,.45); color:var(--ink); }
.card h3 { margin:0 0 8px; font-size:19px; letter-spacing:-.02em; line-height:1.25; } .card p { margin:0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.card .k { font:500 12px/1 var(--mono); color:var(--ink-3); margin-top:14px; display:block; }
.page-head { padding:64px 0 28px; } .page-head h1 { font-size:clamp(38px,6vw,64px); letter-spacing:-.045em; line-height:1.02; margin:0; font-weight:600; }
.page-head p { color:var(--ink-2); font-size:19px; max-width:60ch; margin:16px 0 0; }
/* footer */
.site-foot { border-top:1px solid var(--line); margin-top:96px; padding:48px 0 36px; font-size:14px; color:var(--ink-3); }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1.6fr 1fr; gap:32px; }
.foot-grid .fh { font:600 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 14px; }
.foot-grid ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; } .foot-grid a { color:var(--ink-2); text-decoration:none; } .foot-grid a:hover { color:var(--ink); }
.foot-brand p { margin:14px 0 0; max-width:30ch; line-height:1.5; }
.foot-base { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
@media (max-width:860px){ .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid { grid-template-columns:1fr; } }