:root{
  --bg:#080a10; --bg-2:#0b0f17; --panel:#0e141e;
  --ink:#eaf4fb; --ink-soft:#c3d2dd; --muted:#8392a0; --faint:#5e6b77;
  --ice:#b6e8ff; --ice-2:#7fc6ee; --green:#8fe06a;
  --line:rgba(182,232,255,.12); --line-2:rgba(182,232,255,.06);
  --edge:#050a10; --code-bg:#0c1119;
  --head-h:58px; --nav-w:250px; --toc-w:210px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 20px); }
body{ margin:0; background:var(--bg); color:var(--ink-soft);
  font-family:"Inter",system-ui,sans-serif; font-size:15.5px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a{ color:var(--ice-2); text-decoration:none; }
a:hover{ color:var(--ice); }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(700px 360px at 80% -6%,rgba(127,198,238,.1),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg-2)); }


::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:#2f6f96; border:3px solid var(--bg-2); box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),inset -1px -1px 0 rgba(0,0,0,.4); }
::-webkit-scrollbar-thumb:hover{ background:#4b8fb8; }


.dhead{ position:sticky; top:0; z-index:40; height:var(--head-h); display:flex; align-items:center; gap:18px;
  padding:0 20px; background:rgba(8,10,16,.86); backdrop-filter:blur(8px); border-bottom:2px solid var(--edge); }
.dbrand{ display:flex; align-items:center; gap:10px; font-family:"Press Start 2P",monospace; font-size:14px; color:var(--ink); white-space:nowrap; }
.dbrand i{ color:var(--ice); }
.dbrand em{ font-style:normal; color:var(--ice); }
.dhead__docs{ font-family:"Press Start 2P",monospace; font-size:9px; color:var(--ice-2); padding:5px 8px; border:2px solid var(--edge); background:rgba(127,198,238,.06); }
.dsearchwrap{ position:relative; margin-left:auto; width:min(340px,42vw); }
.dsearch{ width:100%; height:38px; padding:0 14px 0 36px; border:0; color:var(--ink); font:inherit; font-size:14px;
  background:var(--code-bg); box-shadow:inset 0 0 0 2px var(--edge),inset 2px 2px 0 rgba(0,0,0,.4); outline:none; }
.dsearch:focus{ box-shadow:inset 0 0 0 2px var(--ice-2),inset 2px 2px 0 rgba(0,0,0,.4); }
.dsearchwrap > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:13px; pointer-events:none; }
.dresults{ position:absolute; top:46px; left:0; right:0; max-height:60vh; overflow:auto; display:none;
  background:var(--panel); box-shadow:inset 0 0 0 2px var(--edge),0 18px 40px -16px rgba(0,0,0,.8); }
.dresults.show{ display:block; }
.dresults a{ display:block; padding:11px 14px; border-top:1px solid var(--line-2); color:var(--ink-soft); }
.dresults a:first-child{ border-top:0; }
.dresults a:hover,.dresults a.sel{ background:rgba(127,198,238,.08); color:var(--ice); }
.dresults .r__plugin{ font-family:"Press Start 2P",monospace; font-size:7px; color:var(--ice-2); margin-right:8px; }
.dresults .r__ctx{ display:block; color:var(--muted); font-size:12.5px; margin-top:3px; }
.dresults .r__empty{ padding:16px 14px; color:var(--muted); font-size:14px; }
.dhead__site{ color:var(--muted); font-size:13.5px; white-space:nowrap; display:flex; align-items:center; gap:7px; }


.dwrap{ display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr) var(--toc-w); gap:0; max-width:1340px; margin:0 auto; }


.dnav{ position:sticky; top:var(--head-h); align-self:start; height:calc(100vh - var(--head-h)); overflow:auto;
  padding:26px 18px 60px; border-right:2px solid var(--edge); }
.dnav__group{ font-family:"Press Start 2P",monospace; font-size:8px; color:var(--faint); letter-spacing:.02em; margin:0 0 12px; }
.dnav__plugins{ display:grid; gap:4px; margin-bottom:26px; }
.dnav__plugin{ display:flex; align-items:center; gap:10px; padding:9px 11px; color:var(--ink-soft); font-weight:600; font-size:14px; }
.dnav__plugin i{ color:var(--ice-2); width:16px; text-align:center; }
.dnav__plugin:hover{ background:rgba(127,198,238,.06); color:var(--ink); }
.dnav__plugin.active{ background:rgba(127,198,238,.1); color:var(--ice); box-shadow:inset 3px 0 0 var(--ice); }
.dnav__sections{ display:grid; gap:1px; }
.dnav__sections a{ display:block; padding:7px 11px 7px 14px; color:var(--muted); font-size:13.5px; border-left:2px solid var(--line-2); }
.dnav__sections a:hover{ color:var(--ink); border-left-color:var(--ice-2); }
.dnav__sections a.active{ color:var(--ice); border-left-color:var(--ice); background:rgba(127,198,238,.05); }


.dcontent{ padding:38px 44px 120px; min-width:0; }
.dcontent .dtag{ display:inline-flex; align-items:center; gap:8px; font-family:"Press Start 2P",monospace; font-size:8px; color:var(--ice-2);
  padding:7px 10px; background:rgba(127,198,238,.06); box-shadow:inset 0 0 0 2px var(--edge); margin-bottom:16px; }
.dcontent h1{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:800; font-size:38px; color:var(--ink); margin:0 0 10px; letter-spacing:-.02em; }
.dcontent h1 em{ font-style:normal; color:var(--ice); }
.dtitle__blurb{ color:var(--muted); font-size:17px; margin:0 0 14px; }
.dreq{ display:inline-flex; align-items:center; gap:8px; font-family:"Press Start 2P",monospace; font-size:7.5px; color:var(--green);
  padding:6px 10px; background:rgba(143,224,106,.07); box-shadow:inset 0 0 0 2px var(--edge); margin-bottom:34px; }
.dsection{ scroll-margin-top:calc(var(--head-h) + 20px); padding-top:10px; margin-bottom:38px; }
.dsection h2{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; font-size:24px; color:var(--ink); margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid var(--edge); letter-spacing:-.01em; }
.dsection h2 .anchor{ opacity:0; color:var(--ice-2); margin-left:8px; font-size:16px; }
.dsection h2:hover .anchor{ opacity:1; }
.dsection h3{ font-size:16px; color:var(--ink); margin:22px 0 10px; }
.dsection p{ margin:0 0 14px; }
.dsection ul{ margin:0 0 16px; padding-left:0; list-style:none; display:grid; gap:9px; }
.dsection ul li{ position:relative; padding-left:24px; }
.dsection ul li::before{ content:"\f0da"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:3px; top:2px; color:var(--ice-2); font-size:12px; }
.dsection ul.checks li::before{ content:"\f00c"; color:var(--green); left:0; }
.dsection strong{ color:var(--ink); }
.dsection code{ font-family:"Space Mono","Courier New",monospace; font-size:13px; color:var(--ice); background:rgba(127,198,238,.08); padding:1px 6px; }
.callout{ display:flex; gap:12px; padding:15px 16px; margin:0 0 18px; box-shadow:inset 0 0 0 2px var(--edge); background:rgba(127,198,238,.04); color:var(--ink-soft); font-size:14px; }
.callout i{ color:var(--ice-2); margin-top:2px; }
.callout--warn{ background:rgba(255,207,106,.06); }
.callout--warn i{ color:#ffcf6a; }


.dtable{ width:100%; border-collapse:collapse; margin:0 0 18px; box-shadow:inset 0 0 0 2px var(--edge); }
.dtable th,.dtable td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--line-2); font-size:14px; vertical-align:top; }
.dtable th{ font-family:"Press Start 2P",monospace; font-size:7.5px; color:var(--faint); background:rgba(6,10,16,.5); letter-spacing:.02em; }
.dtable td:first-child{ color:var(--ink); white-space:nowrap; }
.dtable code{ background:rgba(127,198,238,.08); }
.dtable tr:last-child td{ border-bottom:0; }


.dtoc{ position:sticky; top:var(--head-h); align-self:start; height:calc(100vh - var(--head-h)); overflow:auto; padding:38px 18px 60px; }
.dtoc__h{ font-family:"Press Start 2P",monospace; font-size:8px; color:var(--faint); margin:0 0 14px; }
.dtoc a{ display:block; padding:5px 0 5px 12px; color:var(--muted); font-size:13px; border-left:2px solid var(--line-2); line-height:1.4; }
.dtoc a:hover{ color:var(--ink); }
.dtoc a.active{ color:var(--ice); border-left-color:var(--ice); }


.dhome{ max-width:900px; margin:0 auto; padding:60px 24px 100px; }
.dhome h1{ font-family:"Space Grotesk",sans-serif; font-weight:800; font-size:40px; color:var(--ink); margin:0 0 12px; }
.dhome h1 em{ font-style:normal; color:var(--ice); }
.dhome__sub{ color:var(--muted); font-size:17px; margin:0 0 40px; }
.dhome__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dhome__card{ display:block; padding:26px; color:var(--ink-soft);
  background-image:linear-gradient(rgba(14,20,30,.5),rgba(6,10,16,.78));
  box-shadow:inset 0 0 0 2px var(--edge),inset 4px 4px 0 rgba(255,255,255,.08),inset -4px -4px 0 rgba(0,0,0,.4);
  transition:transform .08s steps(2),filter .12s; }
.dhome__card:hover{ transform:translateY(-3px); filter:brightness(1.1); }
.dhome__ico{ width:46px; height:46px; display:grid; place-items:center; color:var(--ice); font-size:20px;
  background:rgba(127,198,238,.08); box-shadow:inset 0 0 0 2px var(--edge); margin-bottom:16px; }
.dhome__name{ font-weight:900; font-size:20px; color:var(--ink); margin-bottom:6px; }
.dhome__name em{ font-style:normal; color:var(--ice); }
.dhome__desc{ color:var(--muted); font-size:14px; }


.dnav__toggle{ display:none; }

@media (max-width:1100px){
  :root{ --toc-w:0px; }
  .dwrap{ grid-template-columns:var(--nav-w) minmax(0,1fr); }
  .dtoc{ display:none; }
}

.dnav-ov{ position:fixed; inset:var(--head-h) 0 0 0; z-index:44; background:rgba(4,6,10,.66); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .2s; }
.dnav-ov.show{ opacity:1; visibility:visible; }

@media (max-width:820px){
  .dwrap{ grid-template-columns:1fr; }
  .dnav{ position:fixed; z-index:45; top:var(--head-h); left:0; width:280px; max-width:86vw;
    height:calc(100vh - var(--head-h)); overflow-y:auto; background:var(--bg-2); border-right:2px solid var(--edge);
    transform:translateX(-106%); transition:transform .22s cubic-bezier(.22,.61,.36,1); }
  .dnav.open{ transform:none; box-shadow:10px 0 44px -8px rgba(0,0,0,.75); }
  .dnav__toggle{ display:grid; place-items:center; width:38px; height:38px; border:0; cursor:pointer; color:var(--ink); font-size:16px;
    background:var(--code-bg); box-shadow:inset 0 0 0 2px var(--edge); }
  .dcontent{ padding:28px 20px 90px; }
  .dhome__grid{ grid-template-columns:1fr; }
  .dbrand{ font-size:12px; }
  .dhead__site span{ display:none; }
}
