:root { --blue: #7c6cff; --violet: #9b5cff; --cyan: #36c8f4; }
body {
  background:
    radial-gradient(circle at 44% -20%, rgba(124,108,255,.16), transparent 34%),
    radial-gradient(circle at 100% 30%, rgba(54,200,244,.07), transparent 28%),
    #0c0d12;
}
header { background: rgba(12,13,18,.9); backdrop-filter: blur(18px); }
.brand strong {
  background: linear-gradient(90deg, #ffffff 20%, #cfc8ff 65%, #69dcff);
  background-clip: text;
  color: transparent;
}
.brand span { border-color: rgba(124,108,255,.65); background: rgba(124,108,255,.1); color: #b8adff; }
.topnav a:hover,.topnav a.active { color: #9f94ff; }
.topsearch,.filter { background: rgba(255,255,255,.025); box-shadow: inset 0 1px rgba(255,255,255,.025); }
#sidebar { background: linear-gradient(180deg, #11131a 0%, #0e1015 100%); }
.navitem { transition: color .15s ease, background .15s ease, transform .15s ease; }
.navitem:hover { transform: translateX(2px); }
.navitem.active { background: linear-gradient(90deg, rgba(124,108,255,.2), rgba(54,200,244,.06)); color: #bdb6ff; }
.navitem.active:before { background: linear-gradient(#9b5cff,#36c8f4); box-shadow: 0 0 14px rgba(124,108,255,.6); }
#content h1 {
  background: linear-gradient(105deg,#fff 12%,#ddd9ff 62%,#7fddfa);
  background-clip: text;
  color: transparent;
}
#content h2 { position: relative; padding-left: 15px; }
#content h2:before { content:''; position:absolute; left:0; top:.25em; width:3px; height:1em; border-radius:3px; background:linear-gradient(#9b5cff,#36c8f4); }
#content a,.toc>a { color:#8f83ff; }
#content code { border-color:rgba(124,108,255,.2); background:rgba(124,108,255,.08); color:#bfefff; }
#content img { box-shadow:0 18px 45px rgba(0,0,0,.32); border:1px solid rgba(124,108,255,.18); border-radius:12px; }
#content th { background:linear-gradient(90deg,rgba(124,108,255,.13),rgba(54,200,244,.06)); }
.toc { background:rgba(12,13,18,.76); backdrop-filter:blur(14px); }
.hint { box-shadow:inset 0 1px rgba(255,255,255,.025); }
::selection { background:#7659ef; color:white; }