:root {
  --bg:#101216;
  --surface:#1b1f25;
  --surface-2:#222831;
  --text:#f4f7f6;
  --muted:#9da7b1;
  --line:#303741;
  --teal:#4be1c1;
  --purple:#8b7dff;
  --font:"Outfit",sans-serif;
  --mono:"DM Mono",monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 84% 8%,rgba(75,225,193,.13),transparent 25%),radial-gradient(circle at 8% 48%,rgba(103,79,255,.08),transparent 30%),var(--bg); font-family:var(--font); line-height:1.65; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; top:10px; left:10px; padding:9px 12px; color:#102e2a; background:var(--teal); border-radius:7px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.seo-shell { width:min(1120px,calc(100% - 34px)); margin:auto; padding:30px 0 54px; }
.seo-topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:72px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:22px; font-weight:800; letter-spacing:-.8px; text-decoration:none; }
.brand i { position:relative; width:32px; height:32px; border:2px solid var(--teal); border-radius:50%; }
.brand i::before,.brand i::after { content:""; position:absolute; top:50%; transform:translateY(-50%); background:var(--teal); }
.brand i::before { left:4px; right:4px; height:2px; }
.brand i::after { left:50%; width:8px; height:8px; border:2px solid var(--teal); border-radius:50%; background:var(--bg); transform:translate(-50%,-50%); }
.brand span span { color:var(--teal); }
.seo-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px 18px; }
.seo-nav a { color:#b3bdc6; font:10px var(--mono); text-decoration:none; }
.seo-nav a:hover { color:var(--teal); }
.seo-hero { max-width:850px; margin-bottom:54px; }
.eyebrow { margin:0 0 13px; color:var(--teal); font:10px var(--mono); letter-spacing:1.4px; text-transform:uppercase; }
h1 { max-width:850px; margin:0 0 20px; font-size:clamp(42px,8vw,76px); line-height:.98; letter-spacing:-3.6px; }
.lede { max-width:760px; margin:0; color:#bdc6ce; font-size:clamp(17px,2.4vw,22px); line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:27px; }
.button,.outline-button { display:inline-flex; align-items:center; justify-content:center; min-height:45px; padding:11px 17px; border:1px solid var(--teal); border-radius:8px; font-size:12px; font-weight:700; text-decoration:none; }
.button { color:#10241f; background:var(--teal); }
.outline-button { color:var(--teal); background:transparent; }
.button:hover { background:#77ead2; }
.outline-button:hover { background:rgba(75,225,193,.08); }
.seo-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:42px; align-items:start; }
.seo-content { min-width:0; }
.seo-content section { margin-bottom:22px; padding:28px; background:rgba(27,31,37,.91); border:1px solid var(--line); border-radius:14px; }
.seo-content h2 { margin:0 0 10px; font-size:26px; line-height:1.18; letter-spacing:-.8px; }
.seo-content h3 { margin:24px 0 8px; font-size:17px; }
.seo-content p { margin:0 0 14px; color:#b6c0c9; }
.seo-content p:last-child { margin-bottom:0; }
.seo-content ul,.seo-content ol { margin:12px 0 0; padding-left:21px; color:#b6c0c9; }
.seo-content li + li { margin-top:8px; }
.seo-content strong { color:#f4f7f6; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.feature-grid article { padding:17px; background:var(--surface-2); border:1px solid #353d47; border-radius:10px; }
.feature-grid h3 { margin:0 0 6px; font-size:16px; }
.feature-grid p { margin:0; font-size:13px; }
.example-list { display:grid; gap:9px; margin-top:15px; }
.example-list article { display:grid; grid-template-columns:minmax(130px,.65fr) minmax(0,1fr); gap:14px; align-items:center; padding:13px 15px; background:#15191e; border:1px solid #2c333c; border-radius:9px; }
code { color:#b6f5e8; background:#12161b; border:1px solid #2c343c; border-radius:5px; padding:2px 5px; font:10px var(--mono); overflow-wrap:anywhere; }
.example-list code { width:max-content; max-width:100%; }
.callout { padding:16px 18px; color:#c9d3d9!important; background:rgba(75,225,193,.07); border-left:3px solid var(--teal); border-radius:0 8px 8px 0; }
.seo-sidebar { position:sticky; top:24px; display:grid; gap:14px; }
.side-card { padding:19px; background:rgba(27,31,37,.94); border:1px solid var(--line); border-radius:12px; }
.side-card strong { display:block; margin-bottom:11px; font-size:14px; }
.side-card a { display:block; padding:7px 0; color:#aeb9c2; font-size:12px; text-decoration:none; }
.side-card a + a { border-top:1px solid #2b323b; }
.side-card a:hover,.side-card a[aria-current="page"] { color:var(--teal); }
.seo-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; align-items:start; margin-top:55px; padding-top:24px; color:#7f8b95; border-top:1px solid var(--line); font-size:11px; }
.seo-footer p { max-width:760px; margin:0; }
.seo-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 15px; }
.seo-footer a { color:#9feadb; text-decoration:none; }
.seo-footer small { grid-column:1/-1; color:#66727d; }
@media (max-width:800px) { .seo-topbar { align-items:flex-start; flex-direction:column; margin-bottom:52px; }.seo-nav { justify-content:flex-start; }.seo-layout { grid-template-columns:1fr; }.seo-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }.feature-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .seo-shell { width:min(100% - 24px,1120px); padding-top:20px; }.seo-topbar { margin-bottom:42px; }h1 { font-size:42px; letter-spacing:-2.1px; }.seo-content section { padding:21px 18px; }.seo-sidebar { grid-template-columns:1fr; }.example-list article { grid-template-columns:1fr; gap:7px; }.seo-footer { grid-template-columns:1fr; }.seo-footer nav { justify-content:flex-start; }.seo-footer small { grid-column:1; } }