:root{
  --bg:#07090d;
  --panel:rgba(12,16,24,.62);
  --panel2:rgba(10,13,20,.42);

  --text:rgba(255,255,255,.90);
  --muted:rgba(255,255,255,.64);

  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.12);

  --accent:#f08b2f;
  --accent2:#78a6ff;
  --link:#8bb3ff;

  --radius:16px;

  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow-soft:0 10px 34px rgba(0,0,0,.38);

  --sidebar-w:308px;
  --toc-w:272px;

  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}


*{box-sizing:border-box}
html,
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(900px 520px at 55% 10%, rgba(240,139,47,.08), transparent 62%),
    radial-gradient(780px 460px at 18% 22%, rgba(120,166,255,.07), transparent 58%),
    radial-gradient(1100px 700px at 50% 100%, rgba(255,255,255,.03), transparent 60%),
    var(--bg);
  color:var(--text);
}


a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}

.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  background:linear-gradient(180deg, rgba(9,12,18,.92), rgba(9,12,18,.72));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(12px);
}


.brandwrap{display:flex;align-items:center;gap:12px}
.logo{
  width:34px;height:34px;border-radius:12px;
  background:
    radial-gradient(circle at 30% 25%, rgba(240,139,47,.55), rgba(240,139,47,.06) 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border:1px solid rgba(240,139,47,.22);
  box-shadow: 0 16px 44px rgba(240,139,47,.10);
}

.brandtext{display:flex;flex-direction:column;line-height:1.05}
.brand{letter-spacing:.14em;font-weight:750;font-size:18px}
.subbrand{font-size:11px;color:var(--muted);margin-top:4px}

.topbar-right{display:flex;align-items:center;gap:10px}
.searchwrap{position:relative}
.search{
  width:280px;
  background:rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:10px 38px 10px 14px;
  outline:none;
}
.search:focus{border-color:rgba(120,166,255,.35);box-shadow:0 0 0 4px rgba(120,166,255,.10)}
.searchicon{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;opacity:.7;
  background:
    radial-gradient(circle at 40% 40%, transparent 6px, rgba(255,255,255,.0) 6px),
    none;
}
.searchicon:before{
  content:"";
  position:absolute;left:0;top:0;
  width:10px;height:10px;border-radius:999px;border:2px solid rgba(255,255,255,.55);
}
.searchicon:after{
  content:"";
  position:absolute;left:10px;top:10px;width:7px;height:2px;
  background:rgba(255,255,255,.55);
  transform:rotate(45deg);
  border-radius:2px;
}

.layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--toc-w);
  gap:18px;
  padding:18px 18px 26px;
  align-items:start;
}

.sidebar{
  height:calc(100vh - 86px);
  position:sticky;top:86px;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  display:flex;flex-direction:column;
}


.nav{padding:14px 12px 10px; overflow:auto}
.group-label{
  color:rgba(255,255,255,.42);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:10px 10px 6px;
}

.group{
  margin:6px 0 10px;
}

.group-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px 8px;
  background:transparent;
  border:0;
  cursor:pointer;
  color:rgba(255,255,255,.45);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.group-header:hover{
  color:rgba(255,255,255,.68);
}

.group-caret{
  width:10px;height:10px;
  border-right:2px solid rgba(255,255,255,.35);
  border-bottom:2px solid rgba(255,255,255,.35);
  transform:rotate(-45deg);
  border-radius:1px;
  opacity:.9;
}

.group[data-open="true"] .group-caret{
  transform:rotate(45deg);
  border-color:rgba(255,255,255,.55);
}

.group-items{
  padding:0 0 6px;
}

.group[data-open="false"] .group-items{
  display:none;
}


.nav a{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:rgba(255,255,255,.70);
  text-decoration:none;
  border:1px solid transparent;
}
.nav a:hover{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
  color:rgba(255,255,255,.90);
}
.nav a.active{
  background:rgba(120,166,255,.09);
  border-color:rgba(120,166,255,.18);
  color:rgba(255,255,255,.94);
}

.nav a:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.88)}
.nav a.active{
  background:rgba(120,166,255,.10);
  border:1px solid rgba(120,166,255,.18);
  color:rgba(255,255,255,.92);
}
.badge{
  font-size:9px;
  letter-spacing:.16em;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border2);
  color:rgba(255,255,255,.68);
}
.badge.shared{background:rgba(255,255,255,.035)}
.badge.base{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.80);
}
.badge.premium{background:rgba(240,139,47,.10);border-color:rgba(240,139,47,.20);color:rgba(255,230,205,.92)}
.badge.pro{background:rgba(120,166,255,.10);border-color:rgba(120,166,255,.20);color:rgba(220,235,255,.92)}


.sidebarfooter{
  margin-top:auto;
  padding:12px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.18);
}
.cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(240,139,47,.20);

  color:rgba(255,255,255,.92);
  text-decoration:none;

  background:
    radial-gradient(120px 80px at 18% 30%, rgba(240,139,47,.22), transparent 60%),
    radial-gradient(160px 110px at 78% 20%, rgba(120,166,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.18);

  box-shadow:
    0 18px 48px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset;

  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.cta:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:14px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(240,139,47,.35), rgba(120,166,255,.18));
  opacity:.10;
  filter:blur(.2px);
}

.cta-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.cta-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(240,139,47,.22);
  background:
    radial-gradient(circle at 30% 28%, rgba(240,139,47,.55), rgba(240,139,47,.08) 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  box-shadow: 0 16px 34px rgba(240,139,47,.14);
  flex:0 0 auto;
}

.cta-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
}

.cta-title{
  font-weight:760;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cta-sub{
  margin-top:4px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cta-arrow{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  position:relative;
  flex:0 0 auto;
}

.cta-arrow:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  transform:translate(-55%,-50%) rotate(45deg);
  border-right:2px solid rgba(255,255,255,.55);
  border-top:2px solid rgba(255,255,255,.55);
}

.cta:hover{
  text-decoration:none;
  border-color:rgba(240,139,47,.34);
  transform:translateY(-1px);
  box-shadow:
    0 22px 56px rgba(0,0,0,.42),
    0 0 0 1px rgba(240,139,47,.10) inset;
}

.cta:active{
  transform:translateY(0px);
  box-shadow:
    0 14px 40px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.05) inset;
}


.content{min-height:calc(100vh - 86px)}
.doc{
  background:linear-gradient(180deg, rgba(12,16,24,.52), rgba(12,16,24,.24));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:44px 48px 48px;
  max-width:980px;
}


.doc h1{
  margin:0 0 18px;
  font-size:52px;
  line-height:1.03;
  letter-spacing:-.035em;
}


.doc h2{
  margin:34px 0 12px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
}

.doc h3{
  margin:18px 0 8px;
  font-size:16px;
  color:rgba(255,255,255,.92);
  letter-spacing:-.01em;
}

.doc p{
  margin:12px 0;
  color:rgba(255,255,255,.74);
  line-height:1.8;
  font-size:15.8px;
}


.doc ul,.doc ol{
  margin:12px 0 12px 22px;
  color:rgba(255,255,255,.72);
  line-height:1.75;
  font-size:15.5px;
}

.doc li{margin:6px 0}
.doc strong{color:rgba(255,255,255,.92)}
.doc code{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  padding:2px 6px;
  border-radius:8px;
  color:rgba(255,255,255,.86);
}

.doc h2:target{
  border-top-color:rgba(240,139,47,.25);
}


.toc{
  height:calc(100vh - 86px);
  position:sticky;top:86px;
}
.toc-inner{
  background:linear-gradient(180deg, rgba(12,16,24,.40), rgba(12,16,24,.18));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:14px 14px 10px;
}

.toc-title{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
  padding:8px 8px 10px;
}
.toc-nav{display:flex;flex-direction:column;gap:6px;padding:0 6px 10px}
.toc-nav a{
  padding:8px 10px;
  border-radius:10px;
  color:rgba(255,255,255,.66);
  text-decoration:none;
}
.toc-nav a:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.86)}
.toc-nav a.active{
  background:rgba(240,139,47,.08);
  border:1px solid rgba(240,139,47,.16);
  color:rgba(255,255,255,.92);
}


@media (max-width:1100px){
  .layout{grid-template-columns: var(--sidebar-w) 1fr}
  .toc{display:none}
}
@media (max-width:820px){
  .search{width:190px}
  .layout{grid-template-columns: 1fr}
  .doc{padding:26px 22px}
  .doc h1{font-size:34px}
}

.headinglink{
  opacity:0;
  margin-left:10px;
  font-size:12px;
  letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:4px 8px;
  color:rgba(255,255,255,.70);
  background:rgba(0,0,0,.18);
}
h2:hover .headinglink, h3:hover .headinglink{opacity:1}

.pager{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
}
.pager a{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  color:rgba(255,255,255,.82);
  text-decoration:none;
}
.pager a:hover{
  border-color:rgba(120,166,255,.22);
  background:rgba(255,255,255,.03);
}
.pager .muted{
  color:rgba(255,255,255,.55);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pager .title{
  font-size:13px;
  letter-spacing:.01em;
}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
  border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
*::-webkit-scrollbar-track{background:transparent}

.embed{
  position:relative;

  width:calc(100% + 80px);
  margin-left:-40px;
  margin-right:-40px;


  padding-top:56.25%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  margin-top:18px;
  margin-bottom:26px;
}

.embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.wf{
  margin:18px 0 6px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(12,16,24,.42), rgba(12,16,24,.20));
}

.wf-row{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin:12px 0;
}

.wf-node{
  flex:1;
  min-width:0;
  padding:14px 14px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(0,0,0,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.wf-node-accent{
  border-color: rgba(240,139,47,.22);
  background: rgba(240,139,47,.06);
}

.wf-title{
  font-weight:700;
  color:rgba(255,255,255,.92);
  letter-spacing:-.01em;
  margin-bottom:6px;
}

.wf-sub{
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.45;
  margin-bottom:10px;
}

.wf-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:13px;
}

.wf-links a{
  color:rgba(139,179,255,.92);
  text-decoration:none;
}

.wf-links a:hover{
  text-decoration:underline;
}

.wf-dot{
  color:rgba(255,255,255,.22);
}

.wf-arrow{
  width:22px;
  flex:0 0 22px;
  align-self:center;
  opacity:.55;
  background:
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.20) 40%, rgba(255,255,255,.20) 60%, transparent 100%);
  position:relative;
  border-radius:999px;
}

.wf-arrow:after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:8px;
  height:8px;
  transform: translateY(-50%) rotate(45deg);
  border-right:2px solid rgba(255,255,255,.22);
  border-top:2px solid rgba(255,255,255,.22);
}

@media (max-width:980px){
  .wf-row{flex-direction:column}
  .wf-arrow{display:none}
}

.media{
  margin:18px 0 26px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
}

.media figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.62);
}

.media{
  margin:18px 0 26px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
}

.media figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.62);
}


.social-links{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.social{
  display:flex;
  align-items:center;
  gap:10px;

  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);

  background:rgba(0,0,0,.14);
  color:rgba(255,255,255,.82);
  text-decoration:none;

  font-size:13px;
  line-height:1;

  transition:
    background .14s ease,
    border-color .14s ease,
    transform .12s ease;
}

.social:hover{
  background:rgba(255,255,255,.03);
  transform:translateY(-1px);
  text-decoration:none;
}

.social:active{
  transform:translateY(0);
}

.social .icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.9;
}

.social .label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Discord */
.social.discord{
  border-color:rgba(88,101,242,.28);
}
.social.discord:hover{
  border-color:rgba(88,101,242,.45);
}
.social.discord .icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 240' fill='white'%3E%3Cpath d='M104.4 104.4c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.3-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zm36.2 0c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.3-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1z'/%3E%3Cpath d='M189.5 20h-134C24.9 20 20 24.9 20 30.5v134c0 5.6 4.9 10.5 10.5 10.5h113.5l-5.3-18.5 12.8 11.9 12.1 11.2 21.6 19V30.5c0-5.6-4.9-10.5-10.7-10.5z'/%3E%3C/svg%3E");
}

/* YouTube */
.social.youtube{
  border-color:rgba(255,0,0,.28);
}
.social.youtube:hover{
  border-color:rgba(255,0,0,.45);
}
.social.youtube .icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='white'%3E%3Cpath d='M549.7 124.1c-6.3-23.6-24.8-42.2-48.4-48.5C458.8 64 288 64 288 64S117.2 64 74.7 75.6c-23.6 6.3-42.2 24.9-48.4 48.5C16 166.6 16 256 16 256s0 89.4 10.3 131.9c6.3 23.6 24.8 41.5 48.4 47.8C117.2 448 288 448 288 448s170.8 0 213.3-12.3c23.6-6.3 42.2-24.2 48.4-47.8C560 345.4 560 256 560 256s0-89.4-10.3-131.9zM232 334V178l142 78-142 78z'/%3E%3C/svg%3E");
}

/* X */
.social.x{
  border-color:rgba(255,255,255,.18);
}
.social.x:hover{
  border-color:rgba(255,255,255,.35);
}
.social.x .icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.244 2H21l-6.518 7.451L22 22h-6.828l-4.43-5.774L5.964 22H3.207l6.953-7.944L2 2h6.828l4.013 5.243L18.244 2z'/%3E%3C/svg%3E");
}

/* Facebook */
.social.facebook{
  border-color:rgba(24,119,242,.28);
}
.social.facebook:hover{
  border-color:rgba(24,119,242,.45);
}
.social.facebook .icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='white'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91V127.41c0-25.35 12.42-50.06 52.24-50.06H293V6.26S259.36 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}

/* Mobile navigation (off-canvas) */

.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.86);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
}

.nav-toggle:before{
  content:"";
  width:16px;
  height:12px;
  display:block;
  background:
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) 0 0/16px 2px,
    linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)) 0 5px/16px 2px,
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) 0 10px/16px 2px;
  background-repeat:no-repeat;
  opacity:.9;
}

.scrim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index:900;
}

@media (max-width:820px){
  .topbar{
    padding:14px 14px;
    gap:10px;
  }

  .nav-toggle{
    display:inline-flex;
  }

  .search{
    width:min(220px, 52vw);
  }

  .layout{
    grid-template-columns:1fr;
    padding:12px 12px 20px;
  }

  .sidebar{
    display:flex; /* keep it alive */
    position:fixed;
    top:74px; /* just under topbar */
    left:12px;
    height:calc(100vh - 86px);
    width:min(320px, calc(100vw - 24px));
    z-index:1000;

    transform:translateX(calc(-100% - 16px));
    transition:transform .18s ease;
  }

  .sidebar.is-open{
    transform:translateX(0);
  }

  .doc{
    padding:24px 18px;
  }

  .doc h1{
    font-size:34px;
  }

  /* Don’t let full-bleed embeds cause horizontal scrolling */
  .embed{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}