/* Neptvnes — clean docs theme (satvrn-style layout) on a Neptune blue palette. */
:root {
  --bg:#0a0f1e; --bg-2:#0e1528; --panel:#111a30; --panel-2:#16223e;
  --border:#1d2a47; --border-2:#2a3c63;
  --text:#dce6f7; --text-dim:#94a6c8; --text-mute:#6378a0;
  --accent:#4aa8ff; --accent-2:#7fc4ff; --accent-soft:rgba(74,168,255,.13);
  --warn:#f2c14e; --ok:#5bd6a0;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","Consolas","Courier New",monospace;
  --topbar-h:54px; --sidebar-w:266px; --rail-w:210px; --maxw:1380px;
}
* { box-sizing:border-box; }
html { scrollbar-width:thin; scrollbar-color:var(--border-2) var(--bg); scroll-behavior:smooth; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1px 1px at 18% 24%, rgba(180,210,255,.10), transparent 60%),
    radial-gradient(1px 1px at 72% 16%, rgba(180,210,255,.08), transparent 60%),
    radial-gradient(1px 1px at 46% 72%, rgba(180,210,255,.07), transparent 60%),
    radial-gradient(900px 500px at 100% -5%, rgba(74,168,255,.06), transparent 70%);
  background-attachment:fixed;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
code { font-family:var(--mono); font-size:.86em; background:var(--bg-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; color:var(--accent-2); }
::selection { background:rgba(74,168,255,.3); }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ── topbar ── */
.topbar {
  position:sticky; top:0; z-index:50; height:var(--topbar-h); display:flex; align-items:center; gap:.7rem;
  padding:0 1.1rem; background:rgba(10,15,30,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.s-toggle { display:none; background:var(--panel); border:1px solid var(--border-2); color:var(--text); width:34px; height:32px; border-radius:7px; font-size:1rem; cursor:pointer; }
.t-brand { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.08rem; letter-spacing:.2px; }
.t-brand img { filter:drop-shadow(0 0 6px rgba(74,168,255,.5)); }
.t-brand i { color:var(--accent); font-style:normal; }
.t-spacer { flex:1; }
.t-link { padding:.35rem .7rem; font-size:.85rem; color:var(--text-dim); border-radius:7px; }
.t-link:hover { color:var(--text); background:var(--panel); }

/* ── shell: sidebar + main ── */
.shell { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
.sidebar {
  position:sticky; top:var(--topbar-h); align-self:start; height:calc(100vh - var(--topbar-h));
  overflow-y:auto; border-right:1px solid var(--border); padding:1.2rem .8rem 2rem;
}
.s-nav { display:flex; flex-direction:column; gap:.1rem; }
.s-group { margin-top:1.2rem; }
.s-label { font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); padding:0 .7rem; margin-bottom:.4rem; }
.s-link { display:block; padding:.4rem .7rem; font-size:.875rem; color:var(--text-dim); border-radius:7px; border-left:2px solid transparent; transition:color .12s,background .12s; }
.s-link:hover { color:var(--text); background:var(--panel); }
.s-link.cur { color:var(--accent-2); background:var(--accent-soft); border-left-color:var(--accent); font-weight:500; }
.s-home { font-weight:600; color:var(--text); }
.sidebar-scrim { display:none; }

/* ── main / doc ── */
.main { display:grid; grid-template-columns:minmax(0,1fr) var(--rail-w); gap:2.4rem; padding:2rem clamp(1.2rem,3vw,3rem) 3rem; align-items:start; }
.doc { min-width:0; max-width:820px; }
.page-head { margin-bottom:1.4rem; }
.page-title { font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:700; letter-spacing:-.4px; margin:0; }
.page-sub { color:var(--text-dim); margin:.5rem 0 0; font-size:1rem; max-width:60ch; }
.page-sub a, .doc-body a { color:var(--accent-2); }
.page-sub a:hover, .doc-body a:hover { text-decoration:underline; }

/* platform toggle */
.plat-toggle { display:inline-flex; margin-top:1rem; background:var(--panel); border:1px solid var(--border-2); border-radius:9px; padding:3px; gap:2px; }
.plat-toggle a { padding:.4rem 1.1rem; font-size:.85rem; font-weight:500; color:var(--text-dim); border-radius:6px; }
.plat-toggle a:hover { color:var(--text); }
.plat-toggle a.on { color:#06122a; background:var(--accent); font-weight:600; }

/* callouts */
.callouts { display:flex; flex-direction:column; gap:.6rem; margin:1.4rem 0; }
.callout { display:flex; gap:.7rem; align-items:flex-start; background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:9px; padding:.7rem .9rem; font-size:.9rem; color:var(--text-dim); }
.callout b { color:var(--text); font-weight:600; }
.callout span:first-child { flex:none; }
.callout-key { border-left-color:var(--accent-2); }
.callout-key code { font-size:1rem; color:var(--accent-2); }
.callout-warn { border-left-color:var(--warn); }
.more-toggle { color:var(--accent-2); cursor:pointer; text-decoration:underline; }
.more-body a { color:var(--accent-2); }

/* search */
.search-bar { display:flex; align-items:center; gap:.6rem; background:var(--panel); border:1px solid var(--border-2); border-radius:9px; padding:.6rem .85rem; margin:1.4rem 0 .4rem; }
.search-bar:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search-bar svg { color:var(--accent); flex:none; }
.search-bar input { flex:1; min-width:0; background:none; border:0; outline:0; color:var(--text); font-family:var(--sans); font-size:.92rem; }
.search-bar input::placeholder { color:var(--text-mute); }
.search-bar kbd { font-family:var(--mono); font-size:.72rem; color:var(--text-mute); background:var(--bg-2); border:1px solid var(--border-2); border-radius:4px; padding:0 .35rem; }
.search-clear { background:var(--bg-2); border:0; color:var(--text-dim); width:22px; height:22px; border-radius:50%; cursor:pointer; }
.search-clear:hover { background:var(--accent); color:var(--bg); }
.no-results { color:var(--accent-2); font-style:italic; }

/* inline jump-to ToC */
.toc-inline { font-size:.85rem; color:var(--text-mute); margin:1rem 0 1.6rem; padding-bottom:1.2rem; border-bottom:1px solid var(--border); }
.toc-inline-h { font-weight:600; color:var(--text-dim); margin-right:.3rem; }
.toc-inline a { color:var(--accent-2); }
.toc-inline a:hover { text-decoration:underline; }

/* ── sections / categories ── */
.sec { margin:2.2rem 0; scroll-margin-top:calc(var(--topbar-h) + 12px); }
.sec-h { font-size:1.5rem; font-weight:700; margin:0 0 .3rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.cat { margin:1.4rem 0; scroll-margin-top:calc(var(--topbar-h) + 12px); }
.cat-h { font-size:1.05rem; font-weight:600; color:var(--text); margin:0 0 .6rem; }
.note { color:var(--text-dim); font-size:.9rem; margin:.3rem 0 .8rem; }
.note a { color:var(--accent-2); } .note a:hover { text-decoration:underline; }

/* ── product (download) buttons ── */
.prod-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.prod { display:inline-flex; align-items:stretch; border:1px solid var(--border-2); border-radius:8px; overflow:hidden; background:var(--panel); transition:border-color .13s,background .13s; }
.prod:hover { border-color:var(--accent); }
.prod-name { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; font-size:.86rem; font-weight:500; color:var(--text); white-space:nowrap; }
.prod-name .dl-i { color:var(--accent); flex:none; }
.prod:hover .prod-name { color:var(--accent-2); }
.prod-single { background:transparent; }
.prod-ext { color:var(--accent-2); }
.prod-ext .ext-i { opacity:.7; }
.mirrors { display:inline-flex; }
.mirror { display:inline-flex; align-items:center; padding:0 .55rem; font-size:.74rem; font-weight:500; color:var(--text-mute); background:var(--bg-2); border-left:1px solid var(--border-2); }
.mirror:hover { background:var(--accent); color:var(--bg); }
.prod.dim, .cat.dim, .sec.dim { display:none; }
.prod.hit { border-color:var(--accent); }

/* CTA card (pointer section) */
.cta { display:flex; align-items:center; gap:1rem; justify-content:space-between; padding:1rem 1.1rem; margin-top:.6rem; background:var(--panel); border:1px solid var(--border-2); border-radius:10px; }
.cta:hover { border-color:var(--accent); }
.cta strong { display:block; font-size:1.02rem; color:var(--text); }
.cta span span { color:var(--text-mute); font-size:.86rem; }
.cta-arr { color:var(--accent); font-size:1.2rem; }

/* ── prose body ── */
.doc-body { font-size:.97rem; line-height:1.72; color:var(--text-dim); }
.doc-body h2.d-h2 { font-size:1.4rem; font-weight:700; color:var(--text); margin:2rem 0 .7rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--topbar-h) + 12px); }
.doc-body h3.d-h3 { font-size:1.12rem; font-weight:600; color:var(--text); margin:1.5rem 0 .5rem; }
.doc-body h4.d-h4 { font-size:.98rem; font-weight:600; color:var(--accent-2); margin:1.1rem 0 .4rem; }
.doc-body p { margin:.7rem 0; }
.doc-body ul, .doc-body ol { margin:.7rem 0; padding-left:1.4rem; }
.doc-body li { margin:.35rem 0; }
.doc-body li::marker { color:var(--accent); }
.doc-body blockquote { margin:1rem 0; padding:.7rem 1rem; background:var(--panel); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; color:var(--text-dim); }
.doc-body pre { margin:1rem 0; padding:.85rem 1rem; background:#070b16; border:1px solid var(--border-2); border-radius:9px; overflow-x:auto; }
.doc-body pre code { background:none; border:0; padding:0; color:var(--accent-2); font-size:.85rem; }
.doc-body hr { border:0; border-top:1px solid var(--border); margin:1.6rem 0; }
.doc-body strong { color:var(--text); }
.d-fig { margin:1.3rem 0; }
.d-fig img { border:1px solid var(--border-2); border-radius:9px; }

/* tutorial gallery */
.tut-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin-top:1rem; }
.tut-card { margin:0; background:var(--panel); border:1px solid var(--border-2); border-radius:10px; overflow:hidden; }
.tut-card:hover { border-color:var(--accent); }
.tut-vid { display:block; width:100%; aspect-ratio:16/9; background:#000; }
.tut-card figcaption { padding:.6rem .8rem; font-size:.9rem; font-weight:500; color:var(--text); }

/* ── right rail ── */
.rail { position:sticky; top:calc(var(--topbar-h) + 1.5rem); align-self:start; max-height:calc(100vh - var(--topbar-h) - 3rem); overflow-y:auto; font-size:.84rem; }
.rail-h { font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin-bottom:.6rem; }
.rail-nav { display:flex; flex-direction:column; gap:.05rem; border-left:1px solid var(--border); }
.rail-sec { padding:.25rem .8rem; color:var(--text-dim); font-weight:600; margin-left:-1px; border-left:2px solid transparent; }
.rail-sub { padding:.22rem .8rem .22rem 1.1rem; color:var(--text-mute); margin-left:-1px; border-left:2px solid transparent; }
.rail-sec:hover, .rail-sub:hover { color:var(--text); }
.rail-sec.active, .rail-sub.active { color:var(--accent-2); border-left-color:var(--accent); }

/* ── home ── */
.home-hero { text-align:center; padding:2rem 0 2.4rem; border-bottom:1px solid var(--border); margin-bottom:2rem; }
.home-planet { width:96px; height:96px; filter:drop-shadow(0 10px 30px rgba(47,127,224,.5)); margin-bottom:1rem; }
.home-hero .page-title { font-size:clamp(2.2rem,5vw,3rem); }
.home-hero .page-sub { margin:.8rem auto 0; }
.home-cta { display:flex; gap:.7rem; justify-content:center; margin-top:1.6rem; }
.btn { padding:.6rem 1.3rem; border-radius:9px; font-weight:600; font-size:.92rem; color:#06122a; background:var(--accent); }
.btn:hover { background:var(--accent-2); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border-2); }
.btn-ghost:hover { background:var(--panel); border-color:var(--accent); color:var(--accent-2); }
.home-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; }
.hcard { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; }
.hcard-h { font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.hcard-links a { display:flex; justify-content:space-between; align-items:center; padding:.45rem 0; font-size:.92rem; color:var(--text-dim); border-bottom:1px solid var(--border); }
.hcard-links a:last-child { border-bottom:0; }
.hcard-links a:hover { color:var(--accent-2); }
.hcard-links a span { color:var(--accent); opacity:0; transition:opacity .12s; }
.hcard-links a:hover span { opacity:1; }

/* ── footer ── */
.foot { max-width:var(--maxw); margin:0 auto; padding:1.4rem clamp(1.2rem,3vw,3rem); border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.82rem; color:var(--text-mute); }
.foot a { color:var(--text-dim); } .foot a:hover { color:var(--accent-2); }

/* ── responsive ── */
@media (max-width:1080px) {
  .main { grid-template-columns:minmax(0,1fr); }
  .rail { display:none; }
}
@media (max-width:820px) {
  .shell { grid-template-columns:1fr; }
  .s-toggle { display:block; }
  .sidebar { position:fixed; top:var(--topbar-h); left:0; width:280px; background:var(--bg-2); z-index:40; transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-scrim.open { display:block; position:fixed; inset:var(--topbar-h) 0 0 0; background:rgba(0,0,0,.5); z-index:30; }
  .t-link { display:none; }
}
@media (max-width:480px) { .home-grid { grid-template-columns:1fr; } .foot { flex-direction:column; } }

/* ── custom cursor (Neptune ring + dot) ── */
@media (hover:hover) and (pointer:fine) {
  *,*::before,*::after { cursor:none !important; }
  input,textarea,[contenteditable] { cursor:text !important; }
}
.cur-ring,.cur-dot { position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate3d(-50%,-50%,0); will-change:transform,width,height; display:none; }
.cur-ring { width:26px; height:26px; border:1.5px solid var(--accent-2); background:rgba(74,168,255,.05); box-shadow:0 0 12px rgba(74,168,255,.4); transition:width .16s,height .16s,border-color .16s,background .16s,box-shadow .16s; }
.cur-dot { width:5px; height:5px; background:var(--accent-2); box-shadow:0 0 8px rgba(127,196,255,.9); }
.cur-ring.hot { width:44px; height:44px; border-color:var(--accent); background:rgba(74,168,255,.10); box-shadow:0 0 24px rgba(74,168,255,.6); }

/* ── glow on hover for anything clickable ── */
a, button, summary, .prod, .hcard, .tut-card, .cta, .callout, .plat-toggle a, .mirror, .btn {
  transition:color .14s, background .14s, border-color .14s, box-shadow .18s, text-shadow .18s, transform .12s;
}
/* text links → brighten + soft text glow */
.s-link:hover, .t-link:hover, .rail-sec:hover, .rail-sub:hover, .toc-inline a:hover,
.note a:hover, .doc-body a:hover, .page-sub a:hover, .hcard-links a:hover, .foot a:hover, .more-toggle:hover {
  color:var(--accent-2); text-shadow:0 0 10px rgba(127,196,255,.7);
}
/* boxed/card elements → border + box glow, slight lift */
.prod:hover, .hcard:hover, .tut-card:hover, .cta:hover, .callout:hover {
  border-color:var(--accent); box-shadow:0 0 0 1px rgba(74,168,255,.4), 0 6px 22px rgba(74,168,255,.22); transform:translateY(-1px);
}
.prod:hover .prod-name { text-shadow:0 0 10px rgba(127,196,255,.5); }
/* solid buttons → bright halo */
.btn:hover, .plat-toggle a.on:hover, .mirror:hover { box-shadow:0 0 18px rgba(74,168,255,.65); }
.s-link.cur, .plat-toggle a.on { box-shadow:0 0 14px rgba(74,168,255,.35); }