/* AlphaStudio wiki kit — shared design system (v2)
   Ambient dark docs theme. The :root theme block is generated from wiki.config.json,
   everything below it reads only var(--…) tokens. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ============================================================
     CONFIG — generated from wiki.config.json (edit it there)
     ============================================================ */
  --accent1:#00E5B0; --accent-t:#00E5B0; --on-accent:#050505; --accent2:#00806B; --accent-soft:#2EF2C4; --glow:#A8FFE9;
  --accent1-rgb:0,229,176; --accent2-rgb:0,128,107; --accent-soft-rgb:46,242,196; --glow-rgb:168,255,233;
  --bg:#040807; --bg-rgb:4,8,7; --bg-alt:#08100f; --panel:#0c1514; --panel-2:#121e1c; --code-bg:#09100f;
  --text:#ecf7f4; --text-dim:#a5bbb6; --text-faint:#7b9490;
}

:root{
  --radius:14px; --radius-sm:9px; --radius-xs:6px;
  --topbar-h:60px; --sidenav-w:268px; --toc-w:232px; --content-w:780px;
  --ease:cubic-bezier(.16,1,.3,1);
  --red:#FF5B5B; --green:#3ddc84; --blue:#5b9dff; --amber:#ffb84d;
  --border:rgba(255,255,255,.085); --border-strong:rgba(255,255,255,.14);
  --border-accent:rgba(var(--accent1-rgb),.32);
  --surface:rgba(255,255,255,.032); --surface-2:rgba(255,255,255,.06);
  --font-head:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 16px)}
body{
  margin:0; background:var(--bg); color:var(--text); position:relative; overflow-x:hidden;
  font-family:var(--font-body); font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.nav-open{overflow:hidden}
a{color:var(--accent-t); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent1); outline-offset:2px; border-radius:4px}
::selection{background:rgba(var(--accent1-rgb),.3); color:#fff}
img{max-width:100%}
.skip{position:absolute; left:-999px; top:8px; z-index:200; background:var(--accent1); color:var(--on-accent); padding:8px 14px; border-radius:8px; font-weight:700}
.skip:focus{left:12px}
.ico{width:1em; height:1em; flex:0 0 auto; vertical-align:-.125em}

code,.mono{font-family:var(--font-mono); font-size:.86em}
code{background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius-xs); padding:.14em .42em; color:var(--accent-t)}
pre{
  background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  margin:16px 0; overflow:hidden; position:relative;
}
pre code{display:block; background:none; border:none; padding:14px 16px; color:var(--text); font-size:12.8px; line-height:1.7; overflow-x:auto; border-radius:0}
.code-bar{display:flex; align-items:center; justify-content:space-between; padding:6px 8px 6px 14px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.025)}
.code-lang{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint)}
.copy-btn{
  display:inline-flex; align-items:center; gap:6px; font:600 11.5px var(--font-body); padding:4px 9px; border-radius:7px;
  background:transparent; border:1px solid transparent; color:var(--text-dim); cursor:pointer; transition:.2s var(--ease);
}
.copy-btn:hover{color:var(--accent-t); border-color:var(--border-accent); background:rgba(var(--accent1-rgb),.07)}
.copy-btn.copied{color:var(--green); border-color:rgba(61,220,132,.4)}
.tk-c{color:var(--text-faint); font-style:italic} .tk-k{color:var(--accent-t)} .tk-s{color:#e9c98a} .tk-n{color:#8ec5ff} .tk-b{color:#ff9d7a}
.tk-cmd{color:var(--accent-t); font-weight:600} .tk-arg{color:var(--text-dim)}

/* ---------- Ambient background ---------- */
.ambient{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.ambient .blob{position:absolute; border-radius:50%; filter:blur(110px)}
.ambient .b1{width:640px; height:640px; top:-260px; right:-120px; opacity:.5; background:radial-gradient(circle,rgba(var(--accent1-rgb),.30),transparent 70%); animation:float1 22s var(--ease) infinite alternate}
.ambient .b2{width:520px; height:520px; top:32%; left:-200px; opacity:.34; background:radial-gradient(circle,rgba(var(--accent2-rgb),.30),transparent 70%); animation:float2 26s var(--ease) infinite alternate}
.ambient .b3{width:760px; height:760px; bottom:-360px; left:38%; opacity:.26; background:radial-gradient(circle,rgba(var(--glow-rgb),.15),transparent 70%); animation:float3 30s var(--ease) infinite alternate}
@keyframes float1{to{transform:translate(-65px,55px) scale(1.08)}}
@keyframes float2{to{transform:translate(65px,80px) scale(1.06)}}
@keyframes float3{to{transform:translate(55px,-45px) scale(1.1)}}
#particles{position:fixed; inset:0; z-index:0; pointer-events:none}
#cursorGlow{position:fixed; width:520px; height:520px; z-index:0; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(var(--accent1-rgb),.09),transparent 65%); mix-blend-mode:screen}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.ambient .blob{animation:none} html{scroll-behavior:auto}}

/* ---------- Top bar ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:90; background:linear-gradient(90deg,var(--accent2),var(--accent1)); box-shadow:0 0 12px rgba(var(--accent1-rgb),.7)}
.topbar{
  position:sticky; top:0; z-index:60; height:var(--topbar-h); display:flex; align-items:center; gap:14px; padding:0 22px;
  background:rgba(var(--bg-rgb),.72); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.menu-btn{display:none; width:38px; height:38px; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-size:18px}
.brand{display:flex; align-items:center; gap:10px; white-space:nowrap; color:var(--text)}
.brand:hover{text-decoration:none}
.brand .mark{height:28px; width:auto; filter:drop-shadow(0 0 10px rgba(var(--accent1-rgb),.4))}
.brand .name{font-family:var(--font-head); font-weight:700; font-size:15.5px; letter-spacing:-.01em}
.brand .sep{width:1px; height:18px; background:var(--border-strong)}
.brand .docs{font-size:13px; color:var(--text-dim); font-weight:600}
.ver{font-family:var(--font-mono); font-size:11px; color:var(--accent-t); border:1px solid var(--border-accent); background:rgba(var(--accent1-rgb),.07); border-radius:20px; padding:2px 9px}
.topspace{flex:1}
.toplinks{display:flex; gap:2px}
.toplinks a{font-size:13.5px; font-weight:600; color:var(--text-dim); padding:7px 12px; border-radius:8px; display:inline-flex; align-items:center; gap:7px}
.toplinks a:hover{color:var(--text); background:var(--surface); text-decoration:none}
.toplinks a.current{color:var(--accent-t)}
.search-btn{
  display:inline-flex; align-items:center; gap:10px; min-width:236px; padding:8px 10px 8px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim); font:500 13px var(--font-body); cursor:pointer; transition:.2s var(--ease);
}
.search-btn:hover{border-color:var(--border-accent); background:var(--surface-2); color:var(--text)}
.search-btn .lbl{flex:1; text-align:left}
.kbd{font-family:var(--font-mono); font-size:10.5px; border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:5px; padding:1px 6px; background:var(--panel-2); color:var(--text-dim)}

/* ---------- Layout ---------- */
.shell{display:grid; grid-template-columns:var(--sidenav-w) minmax(0,1fr) var(--toc-w); max-width:1400px; margin:0 auto; position:relative; z-index:2; align-items:start}
.layout-landing .shell{display:block; max-width:1120px; padding:0 24px}
.sidenav{position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow-y:auto; padding:26px 14px 40px 22px; border-right:1px solid var(--border)}
.nav-group{margin-bottom:22px}
.nav-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); padding:0 10px 8px}
.sidenav a{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; color:var(--text-dim); font-size:13.5px; font-weight:500; border:1px solid transparent; transition:.18s var(--ease)}
.sidenav a .ico{font-size:15px; opacity:.75}
.sidenav a:hover{background:var(--surface); color:var(--text); text-decoration:none}
.sidenav a.active{color:var(--accent-t); background:rgba(var(--accent1-rgb),.09); border-color:var(--border-accent); font-weight:600}
.sidenav a.active .ico{opacity:1}
.nav-card{margin:6px 0 0; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:12.5px; color:var(--text-dim)}
.nav-card b{display:block; color:var(--text); font-size:12px; margin-bottom:4px; letter-spacing:.02em}
.nav-card div{display:flex; justify-content:space-between; gap:8px; padding:2px 0}
.nav-card span:last-child{color:var(--text); font-family:var(--font-mono); font-size:11.5px}

main{min-width:0; padding:34px 48px 80px; max-width:calc(var(--content-w) + 96px); animation:pageIn .5s var(--ease) both}
@keyframes pageIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}}
.layout-landing main{max-width:none; padding:0 0 60px}

.toc{position:sticky; top:var(--topbar-h); max-height:calc(100vh - var(--topbar-h)); overflow-y:auto; padding:34px 18px 40px 6px; font-size:13px}
.toc .nav-label{padding-left:12px}
.toc ul{list-style:none; margin:0; padding:0; border-left:1px solid var(--border)}
.toc a{display:block; padding:4px 12px; margin-left:-1px; border-left:2px solid transparent; color:var(--text-dim); line-height:1.45}
.toc a.l3{padding-left:26px; font-size:12.5px}
.toc a:hover{color:var(--text); text-decoration:none}
.toc a.active{color:var(--accent-t); border-left-color:var(--accent1)}
.toc-inline{display:none}

.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--text-faint); margin-bottom:12px}
.crumbs a{color:var(--text-dim)} .crumbs .ico{font-size:12px; opacity:.6}
.page-head{margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--border)}
h1{font-family:var(--font-head); font-size:34px; line-height:1.15; font-weight:700; letter-spacing:-.02em; margin:0 0 12px; color:#fff}
.lead{font-size:16.5px; line-height:1.65; color:var(--text-dim); margin:0; max-width:64ch}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 10px; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim)}
.chip .ico{color:var(--accent-t)}
h2{font-family:var(--font-head); font-weight:600; font-size:22px; letter-spacing:-.01em; margin:52px 0 6px; padding-top:30px; border-top:1px solid var(--border); color:#fff; position:relative}
h2:first-of-type, .page-head + h2{border-top:none; margin-top:34px; padding-top:0}
h3{font-family:var(--font-head); font-size:16px; font-weight:600; margin:30px 0 8px; color:var(--accent-t)}
h4{font-size:14px; margin:18px 0 8px; color:var(--text)}
h2,h3{scroll-margin-top:calc(var(--topbar-h) + 16px)}
.anchor{position:absolute; left:-24px; top:50%; transform:translateY(-50%); padding:4px; color:var(--text-faint); opacity:0; font-size:15px; transition:.2s}
h3 .anchor{left:-22px; top:62%}
h2:hover .anchor, h3:hover .anchor, .anchor:focus{opacity:1; text-decoration:none}
.anchor:hover{color:var(--accent-t)}
h2:first-of-type .anchor{top:30%}
p{margin:12px 0; color:var(--text-dim)}
p b, li b, td b{color:var(--text); font-weight:650}
.subtitle{display:none}
ul.plain, ol.plain{margin:10px 0; padding-left:22px; color:var(--text-dim)} ul.plain li, ol.plain li{margin:6px 0} ul.plain code{color:var(--accent-t)}
hr{border:none; border-top:1px solid var(--border); margin:34px 0}

/* ---------- Components ---------- */
.note{
  position:relative; display:block; margin:18px 0; padding:13px 16px 13px 46px; border:1px solid var(--border-accent); border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(var(--accent1-rgb),.09),rgba(var(--accent1-rgb),.03)); font-size:14px; color:var(--text-dim);
}
.note::before{
  content:""; position:absolute; left:15px; top:14px; width:18px; height:18px; background:var(--note-c,var(--accent1));
  -webkit-mask:var(--note-i) center/contain no-repeat; mask:var(--note-i) center/contain no-repeat;
  --note-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
.note b{color:var(--text)}
.note.warn{--note-c:var(--amber); border-color:rgba(255,184,77,.38); background:linear-gradient(135deg,rgba(255,184,77,.09),rgba(255,184,77,.025))}
.note.warn::before{--note-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.note.danger{--note-c:var(--red); border-color:rgba(255,91,91,.4); background:linear-gradient(135deg,rgba(255,91,91,.1),rgba(255,91,91,.03))}
.note.danger::before{--note-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E")}
.note.info{--note-c:var(--blue); border-color:rgba(91,157,255,.38); background:linear-gradient(135deg,rgba(91,157,255,.09),rgba(91,157,255,.025))}
.note.tip{--note-c:var(--green); border-color:rgba(61,220,132,.38); background:linear-gradient(135deg,rgba(61,220,132,.09),rgba(61,220,132,.025))}
.note.tip::before{--note-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5M9 18h6M10 22h4'/%3E%3C/svg%3E")}
.note p{margin:6px 0 0} .note p:first-child{margin-top:0}

.table-wrap{position:relative; margin:16px 0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:linear-gradient(170deg,rgba(255,255,255,.022),rgba(255,255,255,.006))}
.table-scroll{overflow-x:auto}
.table-tools{display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.02)}
.table-tools input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font:500 13px var(--font-body); padding:4px 4px}
.table-tools .ico{color:var(--text-faint)}
.table-tools .count{font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
thead th{text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); padding:11px 14px; border-bottom:1px solid var(--border-strong); background:rgba(255,255,255,.02); white-space:nowrap}
tbody td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text-dim)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(var(--accent1-rgb),.04)}
tbody tr.hide{display:none}
td.cmd{color:var(--text); white-space:nowrap; font-weight:600}
td.cmd code{color:var(--accent-t); border:none; background:transparent; padding:0; font-size:13px; font-weight:600}
td.perm code{color:var(--accent-soft)}
.sep{font-family:var(--font-mono); color:var(--text-faint); padding:0 .12em}
.alias{color:var(--text-faint); font-size:12px; font-weight:500}
td code{white-space:normal}

.card{border:1px solid var(--border); background:linear-gradient(170deg,var(--surface),rgba(255,255,255,.006)); border-radius:var(--radius); padding:16px 18px; margin:14px 0; transition:.3s var(--ease)}
.card:hover{border-color:var(--border-accent)}
.card h4{margin:0 0 8px; font-size:14px; color:var(--accent-t)}
.card p{margin:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px} .grid2 .card{margin:0}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px} .grid3 .card{margin:0}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

.cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0}
.cardgrid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.cardgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cardgrid,.cardgrid.two{grid-template-columns:1fr}}
.feature-card{position:relative; display:block; border:1px solid var(--border); background:linear-gradient(170deg,var(--surface),rgba(255,255,255,.008)); border-radius:var(--radius); padding:20px; overflow:hidden; transition:.35s var(--ease); color:inherit}
.feature-card::before{content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1px; background:linear-gradient(155deg,rgba(var(--accent1-rgb),.55),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.35s var(--ease); pointer-events:none}
a.feature-card:hover{text-decoration:none}
.feature-card:hover{transform:translateY(-4px); border-color:transparent}
.feature-card:hover::before{opacity:1}
.feature-card .icon{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; margin-bottom:14px; font-size:19px;
  color:var(--accent-t); background:rgba(var(--accent1-rgb),.1); border:1px solid var(--border-accent)}
.feature-card h4{margin:0 0 6px; color:#fff; font-size:15px; font-family:var(--font-head); font-weight:600}
.feature-card p{margin:0; font-size:13.5px; color:var(--text-dim); line-height:1.6}
.feature-card .more{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; margin-top:12px; color:var(--accent-t); font-weight:600}

.steps{counter-reset:s; list-style:none; margin:18px 0; padding:0}
.steps > li{counter-increment:s; position:relative; margin:0; padding:2px 0 22px 50px; color:var(--text-dim)}
.steps > li::before{content:counter(s); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:700 13px var(--font-head); color:var(--accent-t); background:rgba(var(--accent1-rgb),.1); border:1px solid var(--border-accent)}
.steps > li::after{content:""; position:absolute; left:15.5px; top:36px; bottom:4px; width:1px; background:linear-gradient(var(--border-accent),transparent)}
.steps > li:last-child{padding-bottom:4px} .steps > li:last-child::after{display:none}
.steps li pre{margin:10px 0 0}

.filetree{font-family:var(--font-mono); font-size:12.8px; background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; color:var(--text-dim); line-height:1.85; overflow-x:auto; margin:16px 0}
.filetree .dir{color:var(--accent-t)} .filetree .comment{color:var(--text-faint)}
.pill{font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; background:rgba(var(--accent1-rgb),.09); color:var(--accent-t); border:1px solid var(--border-accent); margin-left:8px; vertical-align:middle}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.badge{font-size:12px; padding:4px 11px; border-radius:20px; border:1px solid var(--border-accent); background:rgba(var(--accent1-rgb),.07); color:var(--text-dim)}
.badge b{color:var(--accent-t)}

.rarity{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.03em}
.rarity.common{background:rgba(160,160,160,.15); color:#c9c9c9} .rarity.rare{background:rgba(85,170,255,.15); color:#7fc4ff}
.rarity.epic{background:rgba(170,0,170,.18); color:#e07fe0} .rarity.legendary{background:rgba(255,170,0,.18); color:#ffc966}
.rarity.mythic{background:rgba(255,0,0,.18); color:#ff8f8f} .rarity.godly{background:rgba(var(--accent1-rgb),.18); color:var(--accent-t)}

details.faq{border:1px solid var(--border); background:linear-gradient(170deg,var(--surface),rgba(255,255,255,.006)); border-radius:var(--radius-sm); margin:10px 0; transition:.3s var(--ease)}
details.faq:hover, details.faq[open]{border-color:var(--border-accent)}
details.faq summary{cursor:pointer; padding:14px 16px; font-weight:600; color:var(--text); font-size:14.5px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:""; width:9px; height:9px; border-right:2px solid var(--accent1); border-bottom:2px solid var(--accent1); transform:rotate(45deg) translateY(-2px); transition:.25s var(--ease); flex:0 0 auto}
details.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details.faq .faqbody{padding:0 16px 16px; color:var(--text-dim); font-size:14px} .faqbody p:first-child{margin-top:0}

/* symptom -> cause -> fix */
.issue{border:1px solid var(--border); border-radius:var(--radius); margin:14px 0; overflow:hidden; background:linear-gradient(170deg,var(--surface),rgba(255,255,255,.006))}
.issue-h{display:block; padding:12px 16px; font-weight:650; color:#fff; border-bottom:1px solid var(--border); background:rgba(255,255,255,.02)}
.issue-h .ico{color:var(--amber); display:inline-block; margin-right:10px; vertical-align:-.15em; font-size:1.05em}
.issue-b{margin:0; display:grid; grid-template-columns:96px 1fr; gap:6px 14px; padding:14px 16px; font-size:14px}
.issue-b dt{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding-top:3px}
.issue-b dd{margin:0; color:var(--text-dim)}
@media (max-width:560px){.issue-b{grid-template-columns:1fr} .issue-b dt{padding-top:8px}}

/* changelog */
.release{margin:0 0 8px; padding:6px 0 4px}
.release > h2{display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; border-top:none; padding-top:0; margin-top:34px}
.release + .release > h2{border-top:1px solid var(--border); padding-top:34px; margin-top:44px}
.rel-date{font:500 13px var(--font-mono); color:var(--text-faint)}
.rel-tag{font:700 11px var(--font-body); letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:20px; border:1px solid var(--border-accent); color:var(--accent-t); background:rgba(var(--accent1-rgb),.08)}
.rel-tag.breaking{color:var(--red); border-color:rgba(255,91,91,.45); background:rgba(255,91,91,.08)}
.rel-label{display:inline-flex; align-items:center; gap:7px; font:700 11px var(--font-body); letter-spacing:.08em; text-transform:uppercase; margin:18px 0 4px; color:var(--text-faint)}
.rel-label::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent1)}
.rel-label.fixed::before{background:var(--amber)} .rel-label.changed::before{background:var(--blue)} .rel-label.removed::before{background:var(--red)} .rel-label.breaking::before{background:var(--red)}
.release ul{margin:6px 0 0; padding-left:20px; color:var(--text-dim)} .release li{margin:6px 0}

/* ---------- Landing ---------- */
.hero-landing{position:relative; margin:34px 0 26px; padding:54px 50px 44px; border:1px solid var(--border-accent); border-radius:22px; overflow:hidden;
  background:radial-gradient(ellipse 80% 120% at 0% 0%,rgba(var(--accent1-rgb),.16),transparent 62%),radial-gradient(ellipse 60% 90% at 100% 100%,rgba(var(--accent2-rgb),.16),transparent 65%),linear-gradient(160deg,var(--panel),var(--bg-alt))}
.hero-landing::after{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; -webkit-mask:radial-gradient(ellipse 70% 80% at 85% 20%,#000,transparent 70%); mask:radial-gradient(ellipse 70% 80% at 85% 20%,#000,transparent 70%); pointer-events:none}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:36px; align-items:center}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; border:1px solid var(--border-accent); background:rgba(var(--accent1-rgb),.08); color:var(--text-dim)}
.hero-eyebrow b{color:var(--accent-t)} .hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent1); box-shadow:0 0 10px var(--accent1)}
.hero-landing h1{font-size:clamp(34px,5vw,54px); line-height:1.05; margin:18px 0 16px; letter-spacing:-.03em; background:linear-gradient(110deg,#fff 30%,var(--accent1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-landing .lead{font-size:17px; max-width:56ch}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:11px; font:700 14px var(--font-body); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); transition:.25s var(--ease)}
.btn:hover{text-decoration:none; transform:translateY(-2px); border-color:var(--border-accent); background:var(--surface-2)}
.btn.primary{color:var(--on-accent); border-color:transparent; background:linear-gradient(180deg,var(--accent1),var(--accent2)); box-shadow:0 10px 30px -10px rgba(var(--accent1-rgb),.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover{filter:brightness(1.08)}
.hero-art{display:flex; align-items:center; justify-content:center}
.hero-mark{width:100%; max-width:300px; height:auto; filter:drop-shadow(0 0 40px rgba(var(--accent1-rgb),.45)); animation:markbob 7s ease-in-out infinite}
@keyframes markbob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hero-mark{animation:none}}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; margin:0 0 8px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--border)}
.stat{padding:18px 20px; background:var(--bg-alt)}
.stat b{display:block; font:700 26px var(--font-head); color:#fff; letter-spacing:-.02em}
.stat span{font-size:12.5px; color:var(--text-dim)}
.section-title{font-family:var(--font-head); font-size:26px; letter-spacing:-.02em; color:#fff; margin:64px 0 6px; padding:0; border:none}
.section-sub{margin:0 0 20px; max-width:62ch}
.landing-body h2{border-top:none; padding-top:0; font-size:26px; margin:64px 0 6px}
.landing-body h2 .anchor{display:none}

/* ---------- Pager / footer ---------- */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:64px}
.pager a{display:block; border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 18px; color:var(--text); background:var(--surface); transition:.25s var(--ease)}
.pager a:hover{border-color:var(--border-accent); background:var(--surface-2); text-decoration:none; transform:translateY(-2px)}
.pager .dir{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.07em; font-weight:700; margin-bottom:3px}
.pager .t{font-weight:650; color:var(--accent-t)}
.pager .next{text-align:right} .pager .next .dir{justify-content:flex-end}
.pager .empty{visibility:hidden}
.site-footer{position:relative; z-index:2; margin-top:30px; border-top:1px solid var(--border); background:rgba(var(--bg-rgb),.6)}
.footer-in{max-width:1400px; margin:0 auto; padding:38px 32px 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.footer-in h5{margin:0 0 12px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint)}
.footer-in a{display:block; color:var(--text-dim); font-size:13.5px; padding:3px 0}
.footer-in p{font-size:13.5px; margin:10px 0 0; max-width:42ch}
.footer-brand{display:flex; align-items:center; gap:10px; font:700 16px var(--font-head); color:#fff}
.footer-brand img{height:26px}
.footer-bar{max-width:1400px; margin:0 auto; padding:16px 32px 28px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:12.5px; color:var(--text-faint)}
.to-top{position:fixed; right:22px; bottom:22px; z-index:70; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--border-accent); background:rgba(var(--bg-rgb),.85); color:var(--accent-t); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s var(--ease); backdrop-filter:blur(10px)}
.to-top.show{opacity:1; pointer-events:auto; transform:none}

/* ---------- Search palette ---------- */
.palette{position:fixed; inset:0; z-index:120; display:none; align-items:flex-start; justify-content:center; padding:11vh 16px 16px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px)}
.palette.open{display:flex}
.palette-box{width:100%; max-width:640px; border:1px solid var(--border-strong); border-radius:16px; background:var(--panel); box-shadow:0 40px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(var(--accent1-rgb),.12); overflow:hidden; animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.985)}}
.palette-in{display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid var(--border)}
.palette-in .ico{color:var(--accent-t); font-size:18px}
.palette-in input{flex:1; background:none; border:none; outline:none; color:#fff; font:500 16px var(--font-body); padding:17px 0}
.palette-list{max-height:min(54vh,420px); overflow-y:auto; padding:8px}
.palette-list a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--text)}
.palette-list a .ico{color:var(--text-faint); font-size:16px}
.palette-list a.sel{background:rgba(var(--accent1-rgb),.1); text-decoration:none}
.palette-list a.sel .ico{color:var(--accent-t)}
.palette-list .tx{min-width:0; flex:1}
.palette-list .tt{display:block; font-weight:650; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.palette-list .tt mark{background:rgba(var(--accent1-rgb),.25); color:#fff; border-radius:3px}
.palette-list .ts{display:block; font-size:12px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.palette-list .ty{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--text-faint); border:1px solid var(--border); border-radius:6px; padding:2px 7px}
.palette-empty{padding:30px 16px; text-align:center; color:var(--text-faint); font-size:14px}
.palette-foot{display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-faint); background:rgba(255,255,255,.02)}
.palette-foot span{display:inline-flex; align-items:center; gap:6px}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent1-rgb),.4)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .shell{grid-template-columns:var(--sidenav-w) minmax(0,1fr)}
  .toc{display:none}
  .toc-inline{display:block; margin:0 0 22px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
  .toc-inline summary{cursor:pointer; padding:11px 14px; font-weight:650; font-size:13.5px; color:var(--text); list-style:none; display:flex; align-items:center; justify-content:space-between}
  .toc-inline summary::-webkit-details-marker{display:none}
  .toc-inline summary::after{content:""; width:8px; height:8px; border-right:2px solid var(--accent1); border-bottom:2px solid var(--accent1); transform:rotate(45deg)}
  .toc-inline[open] summary::after{transform:rotate(-135deg)}
  .toc-inline ul{list-style:none; margin:0; padding:0 14px 12px}
  .toc-inline a{display:block; padding:5px 0; color:var(--text-dim); font-size:13.5px} .toc-inline a.l3{padding-left:14px}
  main{padding:30px 38px 70px}
}
@media (max-width:980px){
  .menu-btn{display:inline-flex}
  .shell{display:block}
  .sidenav{position:fixed; z-index:100; top:0; left:0; bottom:0; width:min(86vw,320px); height:auto; background:var(--panel); padding:76px 16px 30px; transform:translateX(-102%); transition:transform .35s var(--ease); border-right:1px solid var(--border-strong); box-shadow:30px 0 80px -20px rgba(0,0,0,.7)}
  body.nav-open .sidenav{transform:none}
  .scrim{position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:.3s}
  body.nav-open .scrim{opacity:1; pointer-events:auto}
  .toplinks{display:none}
  .search-btn{min-width:0; padding:8px 11px} .search-btn .lbl,.search-btn .kbd{display:none}
  .topspace{flex:1}
  main{padding:26px 18px 60px}
  .layout-landing .shell{padding:0 16px}
  .hero-landing{padding:30px 22px}
  .hero-inner{grid-template-columns:1fr} .hero-art{order:-1; justify-content:flex-start} .hero-mark{max-width:190px}
  .footer-in{grid-template-columns:1fr; gap:24px; padding:30px 20px 20px} .footer-bar{padding:14px 20px 26px}
  .anchor{display:none}
  h1{font-size:28px}
}
@media (max-width:640px){
  .brand .sep,.brand .docs{display:none}
  .pager{grid-template-columns:1fr}
  /* tables become stacked cards, cell labels come from data-label */
  .table-scroll{overflow:visible}
  table,tbody,tr,td{display:block; width:100%}
  thead{display:none}
  tbody tr{padding:12px 14px; border-bottom:1px solid var(--border)}
  tbody tr:last-child{border-bottom:none}
  tbody td{border:none; padding:4px 0; white-space:normal}
  tbody td::before{content:attr(data-label); display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:700; margin-bottom:1px}
  tbody td:first-child{padding-bottom:5px}
  tbody td:first-child::before{display:none}
  tbody td:empty{display:none}
  tbody td:not([data-label])::before{display:none}
  td.cmd{white-space:normal}
}
@media print{
  .ambient,#particles,#cursorGlow,.grain,.topbar,.sidenav,.toc,.site-footer,.to-top,.progress,.palette,.copy-btn,.pager{display:none!important}
  body{background:#fff; color:#000} main{padding:0; max-width:none} h1,h2,h3,p,li,td{color:#000!important}
}