:root{
  --brand:#00F5F5;
  --brand-ink:#001616;
  --ink:#e6f9f9;
  --muted:#bfe5e5;
  --bg:#0b0f14;
  --card:#0f141b;
  --ring: rgba(0,245,245,.35);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(0,245,245,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(0,245,245,.06), transparent 60%),
    var(--bg);
}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}
.container{max-width:980px; margin:0 auto; padding:0 20px}
header.sticky{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(180deg, rgba(11,15,20,.85), rgba(11,15,20,.6) 60%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px}
.logo{display:block; height:auto; width:auto; max-height:42px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(0,245,245,.35));}
.nav .links{display:flex; gap:18px; flex-wrap:wrap}
.btn{padding:10px 14px; border:1px solid rgba(255,255,255,.12); border-radius:10px}
.cta{background:var(--brand); color:var(--brand-ink); padding:10px 16px; border-radius:10px; font-weight:700; box-shadow:0 10px 24px var(--ring)}

main{padding:40px 0 60px}
.hero{
  padding:40px 0 10px;
  text-align:left;
}
.h1{font-size: clamp(1.8rem,4vw,2.6rem); line-height:1.12; margin:0 0 8px; font-weight:800}
.meta{color:var(--muted); font-size:.95rem; margin:0 0 8px}
.badge{display:inline-block; background:rgba(0,245,245,.12); border:1px solid rgba(0,245,245,.28); color:#bffefe; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem}
.grid{
  display:grid; grid-template-columns:280px 1fr; gap:22px;
}
@media (max-width:980px){ .grid{ grid-template-columns:1fr; } }
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.35);}
.toc{position:sticky; top:96px; padding:16px}
.toc h3{margin:0 0 8px; font-size:1rem}
.toc nav{display:grid; gap:8px}
.toc a{color:#cfeeee; font-size:.95rem}
.toc a.active{color:var(--brand); font-weight:700}
.content{padding:18px 22px}
.content h2{margin:18px 0 8px}
.content h3{margin:14px 0 6px}
.content p, .content li{color:#cfeeee}
.content ul{margin:8px 0 14px; padding-left:18px}
.hl{border-left:3px solid var(--brand); padding-left:12px; margin:10px 0; color:#cff}
.alert{background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.18); padding:10px 12px; border-radius:12px;}

footer{padding:30px 0; border-top:1px solid rgba(255,255,255,.06); color:#bde7e7}
.foot{display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.tiny{font-size:.9rem; color:#a6cfcf}
.copy{margin-top:10px; display:flex; gap:12px; align-items:center;}
.code{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:.86rem; background:#081017; border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:2px 6px}