:root { --bg:#05060d; --violet:#8b5cf6; --fg:#e6e6f2; --dim:#9494b4; --border:#23233d; }
* { margin:0; box-sizing:border-box; }
html { background:var(--bg); }
body { background:var(--bg); color:var(--fg); font-family:'Inter',system-ui,'Segoe UI',sans-serif; min-height:100vh; overflow-x:hidden; }
body.is-home { height:600vh; position:relative; }
canvas { position:fixed; inset:0; z-index:0; }

.topnav { position:fixed; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.brand { display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:16px; color:var(--fg); text-decoration:none; pointer-events:auto; cursor:pointer; }
.brand .logo { height:34px; width:auto; display:block; }
.brand span { color:var(--violet); }
.navlinks { display:flex; gap:8px; align-items:center; }
.navlinks a { pointer-events:auto; cursor:pointer; font-size:13.5px; font-weight:600; color:#e0e0f4; text-decoration:none; padding:8px 14px; border-radius:10px; border:1px solid transparent; transition:.2s; text-shadow:0 1px 8px rgba(0,0,0,.7), 0 0 12px rgba(139,92,246,.25); }
.navlinks a:hover { border-color:rgba(139,92,246,.5); background:rgba(139,92,246,.12); color:#fff; text-shadow:0 0 14px rgba(139,92,246,.6); }
.navlinks a.cta { border-color:rgba(139,92,246,.3); color:#cfc4f0; background:rgba(139,92,246,.06); backdrop-filter:blur(6px); }
.navlinks a.cta:hover { background:rgba(139,92,246,.16); border-color:rgba(139,92,246,.5); box-shadow:0 0 20px -6px rgba(139,92,246,.6); }

/* persistent "back to the brain" — visible only in docs */
.backbtn { position:fixed; top:60px; left:24px; z-index:31; pointer-events:none; opacity:0; transform:translateY(-6px); transition:.25s;
  font-size:13px; color:#cbb9ff; text-decoration:none; background:rgba(20,18,40,.55); border:1px solid rgba(139,92,246,.4); padding:8px 14px; border-radius:999px; backdrop-filter:blur(8px); }
.backbtn:hover { color:#fff; border-color:var(--violet); }
body.is-doc .backbtn { opacity:1; transform:none; pointer-events:auto; }
/* pre-rendered doc pages must show content before JS runs (crawlers / no-JS) */
body.is-doc #doc { opacity:1; }
body.is-doc #docnav { opacity:1; }

/* mobile docs picker — replaces the hidden sidebar on small screens */
.docsel { display:none; }

.stage { position:fixed; inset:0; z-index:5; pointer-events:none; }
.panel { position:absolute; top:50%; left:50%; width:min(620px,86vw); text-align:center; transform:translate(-50%,-42%); opacity:0; transition:opacity .6s ease, transform .6s ease; }
.panel.on { opacity:1; transform:translate(-50%,-50%); }
.tag { color:#c9b8ff; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; text-shadow:0 0 14px rgba(139,92,246,.9), 0 0 30px rgba(139,92,246,.5); }
.lumin { color:rgba(236,236,255,.42); -webkit-text-stroke:1px rgba(206,196,255,.92); font-weight:800; letter-spacing:-.02em; text-shadow:0 0 22px rgba(139,92,246,.85), 0 0 48px rgba(139,92,246,.45), 0 2px 10px rgba(0,0,0,.55); }
.panel h1 { font-size:clamp(38px,6.5vw,74px); line-height:1.02; margin-top:14px; }
.panel h2 { font-size:clamp(28px,4.5vw,52px); line-height:1.05; margin-top:14px; }
.panel p { margin:16px auto 0; color:#eaeafb; font-size:18px; line-height:1.55; max-width:460px; text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,.98), 0 0 22px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,1); }
.learn { display:inline-block; margin-top:20px; pointer-events:auto; cursor:pointer; color:var(--violet); font-weight:600; font-size:15px; text-decoration:none; }
.learn:hover { text-shadow:0 0 16px rgba(139,92,246,.9); }
.pill { display:inline-block; margin-top:24px; padding:11px 20px; border:1px solid var(--violet); border-radius:999px; color:var(--violet); font-family:monospace; font-size:14px; font-weight:700; background:rgba(139,92,246,.16); backdrop-filter:blur(9px); box-shadow:0 0 26px -10px rgba(139,92,246,.6); }
.pill.copyable { display:inline-flex; align-items:center; gap:10px; cursor:pointer; pointer-events:auto; user-select:none; transition:.2s; }
.pill.copyable:hover { background:rgba(139,92,246,.26); box-shadow:0 0 30px -8px rgba(139,92,246,.8); }
.pill .copyico { opacity:.7; flex:none; transition:opacity .2s; }
.pill.copyable:hover .copyico { opacity:1; }

#flash { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, #ffffff 0%, #b79bff 30%, rgba(139,92,246,0) 70%); }
#doc { position:fixed; inset:0; z-index:15; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:84px 6vw 40px; opacity:0; transition:opacity .25s linear; }
.article { max-width:760px; width:100%; max-height:calc(100vh - 128px); overflow-y:auto; text-align:left;
           background:rgba(9,10,20,.10); border:1px solid rgba(139,92,246,.22); border-radius:22px;
           padding:34px clamp(22px,4vw,48px) 40px; backdrop-filter:blur(16px);
           box-shadow:0 40px 110px -40px rgba(0,0,0,.85), inset 0 0 70px -34px rgba(139,92,246,.30);
           transition:opacity .18s ease; }
.article .tag { display:block; }
.article h1 { font-size:clamp(32px,5vw,52px); line-height:1.05; margin-top:12px; }
.article p { color:#c7c7e0; font-size:17px; line-height:1.7; margin-top:18px; text-shadow:0 1px 6px #000; }
.code { margin-top:22px; font-family:monospace; font-size:14px; color:#e9e0ff; background:rgba(20,18,40,.6); border:1px solid rgba(139,92,246,.3); border-radius:12px; padding:14px 18px; box-shadow:0 0 30px -12px rgba(139,92,246,.6); }
.jump { display:inline-block; margin-top:26px; pointer-events:auto; cursor:pointer; color:var(--violet); font-weight:600; font-size:15px; text-decoration:none; }
.jump:hover { text-shadow:0 0 16px rgba(139,92,246,.9); }
#strand { position:fixed; left:0; top:0; width:2px; height:100%; z-index:14; background:linear-gradient(var(--violet), transparent); opacity:0; box-shadow:0 0 10px var(--violet); }

/* ── docs content ── */
#docnav { position:fixed; left:24px; top:15vh; width:210px; z-index:16; pointer-events:auto; opacity:0; transition:opacity .25s; }
#docnav .grp { color:#7a7a98; text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; margin:16px 0 6px; }
#docnav a { display:block; color:#b9b9d6; text-decoration:none; padding:6px 12px; border-radius:9px; cursor:pointer; border-left:2px solid transparent; font-size:13.5px; transition:.15s; }
#docnav a:hover { color:#fff; background:rgba(139,92,246,.10); }
#docnav a.active { color:#d9d0ff; background:rgba(139,92,246,.16); border-left-color:var(--violet); }
.article h2 { font-size:26px; font-weight:800; letter-spacing:-.01em; margin:36px 0 6px; color:#e9e6ff; text-shadow:0 0 18px rgba(139,92,246,.45); }
.article h3 { font-size:17px; font-weight:700; margin:22px 0 2px; color:#cfc8ee; }
.article ul { margin:12px 0 0; padding:0; list-style:none; }
.article li { position:relative; padding:5px 0 5px 20px; color:#c7c7e0; font-size:15.5px; line-height:1.6; text-shadow:0 1px 6px #000; }
.article li::before { content:"\203a"; position:absolute; left:2px; color:var(--violet); font-weight:700; }
.article code { background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.2); border-radius:5px; padding:1px 6px; font-size:13px; color:#e9e0ff; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:20px; }
.card { background:rgba(255,255,255,.035); border:1px solid rgba(139,92,246,.2); border-radius:14px; padding:16px; backdrop-filter:blur(4px); }
.card .ci { font-size:22px; }
.card .ct { font-weight:700; margin:8px 0 4px; color:#efeaff; }
.card .cd { font-size:13px; color:#b6b6d4; line-height:1.5; }
.steps { margin-top:18px; border-left:2px solid rgba(139,92,246,.3); padding-left:20px; }
.step { position:relative; padding:0 0 20px 12px; }
.step:last-child { padding-bottom:0; }
.step .sn { position:absolute; left:-31px; top:-2px; width:22px; height:22px; border-radius:50%; background:var(--violet); color:#0b0b16; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 14px rgba(139,92,246,.7); }
.step .st { font-weight:700; color:#efeaff; }
.step .sd { font-size:14.5px; color:#b6b6d4; line-height:1.55; margin-top:2px; }
.callout { margin:24px 0; padding:14px 18px; border-radius:12px; background:rgba(139,92,246,.10); border:1px solid rgba(139,92,246,.3); color:#d7d2f0; font-size:15px; line-height:1.6; }
.ytembed { position:relative; margin-top:22px; border-radius:14px; overflow:hidden; border:1px solid rgba(139,92,246,.28); box-shadow:0 24px 70px -28px rgba(139,92,246,.6); aspect-ratio:16/9; }
.ytembed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.media { width:100%; border-radius:14px; margin-top:20px; border:1px solid rgba(139,92,246,.25); box-shadow:0 20px 60px -24px rgba(139,92,246,.5); display:block; }
.statrow { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.statbox { flex:1; min-width:110px; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.25); border-radius:14px; padding:14px 12px; text-align:center; }
.statn { font-size:23px; font-weight:800; color:#efeaff; text-shadow:0 0 16px rgba(139,92,246,.6); }
.statl { font-size:11.5px; color:#a8a8c8; letter-spacing:.06em; margin-top:2px; }
.hstat { margin:16px auto 0; font-size:13px; letter-spacing:.05em; color:#9a9ac0; text-shadow:0 1px 8px #000; }
.hstat b { color:#cfc8ee; }
.tablewrap { overflow-x:auto; margin-top:20px; border:1px solid rgba(139,92,246,.18); border-radius:14px; }
.ctable { width:100%; border-collapse:collapse; font-size:13.5px; min-width:540px; }
.ctable th, .ctable td { text-align:left; padding:11px 14px; border-bottom:1px solid rgba(139,92,246,.12); vertical-align:top; line-height:1.45; }
.ctable thead th { color:#cfc8ee; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:11px; background:rgba(139,92,246,.06); }
.ctable tbody tr:last-child td { border-bottom:0; }
.ctable td:first-child { color:#a8a8c8; font-weight:600; }
.ctable td.sm { color:#efeaff; font-weight:700; background:rgba(139,92,246,.08); }
.ctable thead th.sm { background:rgba(139,92,246,.16); color:#efeaff; }

/* article footer — related pages / external links (also crawlable) */
.docmore { margin-top:40px; padding-top:22px; border-top:1px solid rgba(139,92,246,.18); }
.docmore .grp { color:#7a7a98; text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; margin-bottom:8px; }
.docmore a { color:#b9b9d6; text-decoration:none; margin-right:16px; font-size:14px; }
.docmore a:hover { color:#fff; text-shadow:0 0 12px rgba(139,92,246,.8); }

/* crawlable footer on the home page (also a real end-of-page nav) */
.sitefoot { position:absolute; bottom:0; left:0; right:0; z-index:8; padding:14px 6vw 12px; background:linear-gradient(transparent, rgba(5,6,13,.94) 40%); }
.sitefoot .cols { display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; max-width:1080px; margin:0 auto; }
.sitefoot .grp { color:#7a7a98; text-transform:uppercase; letter-spacing:.14em; font-size:9.5px; margin-bottom:4px; }
.sitefoot a { display:block; color:#b9b9d6; text-decoration:none; font-size:12px; padding:2px 0; }
.sitefoot a:hover { color:#fff; }
.sitefoot .copy { text-align:center; color:#6d6d88; font-size:10.5px; margin-top:12px; }
body.is-doc .sitefoot { display:none; }

@media (max-width:1040px) {
  #docnav { display:none; }
  body.is-doc .docsel { display:block; position:fixed; top:58px; left:50%; transform:translateX(-50%); z-index:31;
    background:rgba(20,18,40,.8); color:#e6e6f2; border:1px solid rgba(139,92,246,.45); border-radius:10px; padding:8px 12px; font-size:13.5px; backdrop-filter:blur(8px); max-width:80vw; }
  .navlinks a:not(.cta) { display:none; }
}
@media (max-width:640px) {
  .sitefoot { padding:10px 4vw 8px; }
  .sitefoot .cols { gap:8px 16px; }
  .sitefoot .grp { font-size:8.5px; margin-bottom:2px; }
  .sitefoot a { font-size:11px; padding:1px 0; }
  .sitefoot .copy { font-size:9.5px; margin-top:6px; }
}


/* only the visible panel's links/buttons are clickable (stacked panels overlap at center) */
.panel .learn, .panel .pill { pointer-events:none; }
.panel.on .learn, .panel.on .pill { pointer-events:auto; }

/* high-level diagram block */
.diagram { margin-top:20px; overflow-x:auto; background:rgba(20,18,40,.6); border:1px solid rgba(139,92,246,.3); border-radius:12px; padding:16px; font-size:12px; line-height:1.4; color:#cfc8ee; white-space:pre; box-shadow:0 0 30px -12px rgba(139,92,246,.6); }

/* doc-page footer at the end of the scrolling article */
.docfoot { margin-top:24px; padding-top:18px; border-top:1px solid rgba(139,92,246,.16); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.docfoot a { color:#b9b9d6; text-decoration:none; font-size:13.5px; }
.docfoot a:hover { color:#fff; text-shadow:0 0 12px rgba(139,92,246,.8); }
.docfoot .copy { width:100%; color:#6d6d88; font-size:12px; margin-top:6px; }

/* hide the inner scrollbar and softly fade the box's top/bottom edges (no abrupt cut) */
.article { scrollbar-width:none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%); }
.article::-webkit-scrollbar { display:none; }