:root{
  --bg:#08080c;
  --bg-2:#0d0d14;
  --surface:#10101a;
  --surface-2:#15151f;
  --border:#1e1e2e;
  --border-2:#2a2a3e;
  --text:#e8e8ee;
  --muted:#9a9ab0;
  --dim:#6c6c80;
  --teal:#5eead4;
  --teal-2:#22d3ee;
  --violet:#a78bfa;
  --pink:#f472b6;
  --green:#4ade80;
  --amber:#fbbf24;
  --red:#f87171;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-feature-settings:"cv11","ss01","ss03";
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(94,234,212,.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(167,139,250,.10), transparent 60%),
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255,255,255,.025) 100%) 0 0 / 100% 32px,
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,.025) 100%) 0 0 / 32px 100%;
  pointer-events:none;
  z-index:0;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 80%);
}
main, nav, footer, article{position:relative; z-index:1}
a{color:inherit; text-decoration:none}
code,pre,.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace}
::selection{background:rgba(94,234,212,.25); color:#fff}

.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:780px; margin:0 auto; padding:0 24px}

/* nav */
nav.top{
  position:sticky; top:0; z-index:50;
  background:rgba(8,8,12,.72);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
}
nav.top .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em}
.logo .dot{width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--teal),var(--violet)); box-shadow:0 0 16px rgba(94,234,212,.6)}
.logo span.mono{color:var(--muted); font-weight:500}
nav.top ul{display:flex; gap:6px; list-style:none; padding:0; margin:0}
nav.top a.nav{
  padding:8px 12px; border-radius:8px; color:var(--muted);
  font-size:14px; font-weight:500; transition:.15s color, .15s background;
}
nav.top a.nav:hover{color:var(--text); background:var(--surface)}
nav.top a.nav.active{color:var(--text)}
nav.top .gh{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  font-size:13px; font-weight:600;
}
nav.top .gh:hover{border-color:var(--border-2); background:var(--surface-2)}
@media(max-width:720px){ nav.top ul{display:none} }

/* hero */
header.hero{padding:80px 0 64px; position:relative}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--surface);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--muted);
  margin-bottom:24px;
}
.eyebrow .pulse{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(74,222,128,.5);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
h1{
  font-size:clamp(36px, 6vw, 64px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
  margin:0 0 20px;
  max-width:14ch;
}
h1 .grad{
  background:linear-gradient(120deg,var(--teal) 0%, var(--teal-2) 35%, var(--violet) 75%, var(--pink) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lede{font-size:clamp(16px,1.6vw,19px); color:var(--muted); max-width:60ch; margin:0 0 32px}
.lede strong{color:var(--text); font-weight:600}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:10px;
  font-weight:600; font-size:14px;
  border:1px solid transparent;
  transition:.15s transform, .15s background, .15s border-color;
  will-change:transform;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  color:#04201d;
  box-shadow:0 8px 24px -8px rgba(94,234,212,.5);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface); border-color:var(--border-2); color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.arrow{transition:.15s transform}
.btn:hover .arrow{transform:translateX(2px)}

.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:32px} }

/* terminal card */
.terminal{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), var(--shadow);
}
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--dim);
}
.tl{width:11px; height:11px; border-radius:50%}
.tl.r{background:#ff5f57} .tl.y{background:#febc2e} .tl.g{background:#28c840}
.terminal-bar .title{margin-left:8px}
.terminal pre{
  margin:0; padding:18px 20px;
  font-family:'JetBrains Mono',monospace; font-size:13.5px;
  line-height:1.7;
  color:var(--text);
  overflow-x:auto;
}
.tk-c{color:var(--dim)}
.tk-k{color:var(--violet)}
.tk-s{color:var(--teal)}
.tk-f{color:var(--teal-2)}
.tk-n{color:var(--amber)}
.tk-p{color:var(--pink)}

/* stats strip */
.stats{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.015));
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:32px 0;
  gap:24px;
}
.stat .num{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(24px,3vw,32px);
  font-weight:600;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--text),var(--muted));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat .lbl{color:var(--muted); font-size:13px; margin-top:4px}
@media(max-width:720px){ .stats-grid{grid-template-columns:repeat(2,1fr); gap:20px 16px} }

/* sections */
section{padding:96px 0; position:relative}
section .head{margin-bottom:48px; max-width:680px}
section .kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--teal);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
section h2{
  font-size:clamp(28px,3.5vw,40px);
  letter-spacing:-.02em;
  line-height:1.15;
  font-weight:700;
  margin:0 0 14px;
}
section .sub{color:var(--muted); font-size:17px; margin:0; max-width:60ch}

/* product cards */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:900px){ .products{grid-template-columns:1fr} }
.product{
  position:relative;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  transition:.2s border-color, .2s transform;
  overflow:hidden;
}
.product::before{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--accent,var(--teal)) 0%, transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite:exclude;
  opacity:0; transition:.2s opacity;
  pointer-events:none;
}
.product:hover{transform:translateY(-2px); border-color:var(--border-2)}
.product:hover::before{opacity:.7}
.product .badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--accent,var(--teal));
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--accent,var(--teal)) 12%, transparent);
  margin-bottom:18px;
}
.product h3{font-size:22px; margin:0 0 8px; letter-spacing:-.01em}
.product p{color:var(--muted); margin:0 0 22px; font-size:14.5px; min-height:60px}
.product ul{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:6px}
.product ul li{
  font-family:'JetBrains Mono',monospace; font-size:11.5px;
  padding:4px 9px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--muted);
}
.product .link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--accent,var(--teal)); font-weight:600; font-size:14px;
}
.product[data-accent="violet"]{--accent:var(--violet)}
.product[data-accent="pink"]{--accent:var(--pink)}

/* mcp install */
.mcp{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:900px){ .mcp{grid-template-columns:1fr} }
.mcp-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  display:flex; flex-direction:column; gap:14px;
}
.mcp-card h4{margin:0; font-size:18px; letter-spacing:-.01em}
.mcp-card .desc{color:var(--muted); font-size:13.5px; margin:0; flex:1}
.install{
  position:relative;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px 44px 11px 14px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--text);
  overflow-x:auto;
  white-space:nowrap;
}
.install .p{color:var(--violet)}
.install .v{color:var(--teal)}
.copy{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:transparent; border:1px solid var(--border); border-radius:6px;
  width:30px; height:30px; padding:0;
  color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:.15s color,.15s border-color,.15s background;
}
.copy:hover{color:var(--text); border-color:var(--border-2); background:var(--surface-2)}
.copy.copied{color:var(--green); border-color:var(--green)}

.mcp-meta{display:flex; gap:14px; align-items:center; font-size:12.5px; color:var(--dim)}
.mcp-meta a{color:var(--muted)}
.mcp-meta a:hover{color:var(--text)}

/* libraries grid */
.libs{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(max-width:780px){ .libs{grid-template-columns:1fr} }
.lib{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:18px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  transition:.15s border-color, .15s background;
}
.lib:hover{border-color:var(--border-2); background:var(--surface-2)}
.lib .left{min-width:0; flex:1}
.lib h4{margin:0 0 4px; font-size:15px; letter-spacing:-.005em}
.lib h4 .name{font-family:'JetBrains Mono',monospace; color:var(--teal)}
.lib p{margin:0; font-size:13px; color:var(--muted); line-height:1.5}
.lib .right{display:flex; align-items:center; gap:8px; flex-shrink:0}
.lib img{display:block; height:20px}

/* bots */
.bots{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:780px){ .bots{grid-template-columns:1fr} }
.bot{
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  transition:.15s border-color;
}
.bot:hover{border-color:var(--border-2)}
.bot .ico{
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg, rgba(94,234,212,.15), rgba(167,139,250,.15));
  border:1px solid var(--border-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px;
  margin-bottom:14px;
}
.bot h4{margin:0 0 6px; font-size:16px; font-family:'JetBrains Mono',monospace; color:var(--text); letter-spacing:-.01em}
.bot p{margin:0; font-size:13.5px; color:var(--muted)}

/* faq */
details.faq{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  margin-bottom:10px;
  overflow:hidden;
}
details.faq[open]{border-color:var(--border-2)}
details.faq summary{
  cursor:pointer; padding:18px 22px;
  font-weight:600; font-size:15.5px;
  list-style:none; position:relative;
  padding-right:50px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--muted);
  transition:.15s transform,.15s color;
}
details.faq[open] summary::after{transform:translateY(-50%) rotate(45deg); color:var(--teal)}
details.faq .ans{padding:0 22px 20px; color:var(--muted); font-size:14.5px}
details.faq .ans a{color:var(--teal); border-bottom:1px solid color-mix(in srgb, var(--teal) 30%, transparent)}

/* CTA band */
.cta-band{
  margin:0 24px;
  border-radius:20px;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(94,234,212,.18), transparent 60%),
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(167,139,250,.18), transparent 60%),
    var(--surface);
  border:1px solid var(--border-2);
  padding:48px;
  text-align:center;
}
.cta-band h3{font-size:clamp(22px,2.6vw,30px); margin:0 0 10px; letter-spacing:-.02em}
.cta-band p{margin:0 0 24px; color:var(--muted); max-width:50ch; margin-left:auto; margin-right:auto}
@media(max-width:600px){ .cta-band{padding:32px 24px} }

/* footer */
footer{
  border-top:1px solid var(--border);
  padding:48px 0 32px;
  margin-top:64px;
  color:var(--muted);
  font-size:13.5px;
}
footer .row{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
footer .col h5{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--dim); letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 10px;
}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
footer a:hover{color:var(--text)}
footer .legal{margin-top:32px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
footer .legal .mono{color:var(--dim)}

svg.icon{width:14px; height:14px; flex-shrink:0}

/* === Article styles === */
article.post{padding:48px 0 64px}
article.post .breadcrumb{
  font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--dim); margin-bottom:24px;
}
article.post .breadcrumb a{color:var(--muted)}
article.post .breadcrumb a:hover{color:var(--text)}
article.post .breadcrumb .sep{margin:0 8px; color:var(--border-2)}

article.post header.post-head{
  border-bottom:1px solid var(--border);
  padding-bottom:32px;
  margin-bottom:40px;
}
article.post .post-kicker{
  font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--teal); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:14px;
}
article.post h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0 0 16px;
  max-width:none;
}
article.post .post-meta{
  font-family:'JetBrains Mono',monospace; font-size:13px;
  color:var(--muted); display:flex; gap:16px; flex-wrap:wrap;
}
article.post .post-meta time{color:var(--muted)}

article.post .post-body{font-size:17px; line-height:1.7; color:#d4d4dc}
article.post .post-body p{margin:0 0 20px}
article.post .post-body strong{color:var(--text)}
article.post .post-body a{color:var(--teal); border-bottom:1px solid color-mix(in srgb, var(--teal) 30%, transparent); transition:.15s border-color}
article.post .post-body a:hover{border-bottom-color:var(--teal)}
article.post .post-body h2{
  font-size:28px;
  letter-spacing:-.02em;
  margin:48px 0 16px;
  padding-top:8px;
  scroll-margin-top:80px;
}
article.post .post-body h3{
  font-size:21px;
  letter-spacing:-.01em;
  margin:32px 0 12px;
  scroll-margin-top:80px;
}
article.post .post-body h2::before{
  content:"// "; color:var(--teal); font-family:'JetBrains Mono',monospace; font-size:.7em; letter-spacing:.05em; opacity:.7;
}
article.post .post-body ul,
article.post .post-body ol{padding-left:22px; margin:0 0 24px}
article.post .post-body li{margin:6px 0}
article.post .post-body code{
  font-size:.88em; padding:2px 6px; border-radius:5px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--teal);
}
article.post .post-body pre{
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:10px; padding:16px 18px; overflow-x:auto;
  font-size:13.5px; line-height:1.65;
  margin:0 0 24px;
}
article.post .post-body pre code{background:none; border:none; padding:0; color:var(--text); font-size:inherit}

article.post .post-body table{
  width:100%; border-collapse:collapse; margin:0 0 28px;
  font-size:14.5px; border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
article.post .post-body table thead{background:var(--surface)}
article.post .post-body table th{
  text-align:left; padding:12px 14px; font-weight:600;
  border-bottom:1px solid var(--border-2);
  font-size:13px; color:var(--text);
}
article.post .post-body table td{
  padding:11px 14px; border-bottom:1px solid var(--border);
  color:var(--muted); vertical-align:top;
}
article.post .post-body table tr:last-child td{border-bottom:none}
article.post .post-body table td strong, article.post .post-body table th strong{color:var(--text)}

article.post .post-body blockquote{
  margin:0 0 24px;
  padding:14px 20px;
  border-left:3px solid var(--teal);
  background:var(--surface);
  border-radius:0 10px 10px 0;
  color:var(--muted);
  font-size:15.5px;
}
article.post .post-body blockquote p:last-child{margin:0}

article.post .toc{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:18px 22px;
  margin:0 0 40px;
  font-size:14px;
}
article.post .toc h4{
  margin:0 0 10px; font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--dim); letter-spacing:.08em; text-transform:uppercase;
  font-weight:600;
}
article.post .toc ul{list-style:none; padding:0; margin:0; columns:2; column-gap:24px}
article.post .toc li{margin:5px 0; break-inside:avoid}
article.post .toc a{color:var(--muted)}
article.post .toc a:hover{color:var(--teal)}
@media(max-width:600px){ article.post .toc ul{columns:1} }

article.post .verdict{
  margin:32px 0;
  padding:20px 24px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 8%, var(--surface)), var(--surface));
  border:1px solid var(--border-2);
  border-radius:12px;
}
article.post .verdict h4{
  margin:0 0 8px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--teal); letter-spacing:.08em; text-transform:uppercase;
}
article.post .verdict p{margin:0; color:var(--text); font-size:15.5px}

/* Related articles */
.related{padding:64px 0}
.related h3{font-size:24px; margin:0 0 24px; letter-spacing:-.015em}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:780px){ .related-grid{grid-template-columns:1fr} }
.related-card{
  display:block; padding:18px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  transition:.15s border-color,.15s background;
}
.related-card:hover{border-color:var(--border-2); background:var(--surface-2)}
.related-card .tag{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--dim); letter-spacing:.06em; text-transform:uppercase;
}
.related-card h4{margin:6px 0 4px; font-size:15px; line-height:1.35; letter-spacing:-.005em}
.related-card p{margin:0; font-size:13px; color:var(--muted); line-height:1.45}

/* Blog index */
.posts-grid{display:grid; grid-template-columns:1fr; gap:14px}
.post-card{
  display:flex; gap:24px; padding:24px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  transition:.15s border-color, .15s background;
}
.post-card:hover{border-color:var(--border-2); background:var(--surface-2)}
.post-card .meta-col{flex-shrink:0; width:120px; color:var(--dim); font-family:'JetBrains Mono',monospace; font-size:12px}
.post-card .body-col{flex:1}
.post-card h3{margin:0 0 8px; font-size:20px; letter-spacing:-.01em; line-height:1.25}
.post-card p{margin:0 0 10px; color:var(--muted); font-size:14.5px}
.post-card .tags{display:flex; gap:6px; flex-wrap:wrap}
.post-card .tag{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  padding:3px 8px; border-radius:5px;
  background:var(--bg-2); border:1px solid var(--border); color:var(--muted);
}
@media(max-width:680px){
  .post-card{flex-direction:column; gap:10px}
  .post-card .meta-col{width:auto}
}