:root{
  --bg:#0B0E13;
  --panel:#11151C;
  --panel-2:#161B24;
  --line:#232A36;
  --line-strong:#2E3644;
  --text:#EDEFF2;
  --text-dim:#9AA4B2;
  --text-faint:#5C6675;
  --gold:#E8B95A;
  --gold-dim:#3A2E14;
  --down:#FF5C6C;
  --down-dim:#3A1620;
  --radius:10px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; }

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 6vw; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(11,14,19,0.9); backdrop-filter:blur(8px); z-index:10;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:34px; height:34px; border-radius:8px; background:#0E1B33; border:1.5px solid #35507A; display:flex; align-items:center; justify-content:center; }
.brand-mark svg{ width:22px; height:22px; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text); }
.nav-actions{ display:flex; gap:10px; }
.btn{ font-family:var(--font-body); cursor:pointer; border-radius:var(--radius); font-size:14px; font-weight:500;
      display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.btn-primary{ background:var(--gold); color:#1A1408; border:none; padding:9px 18px; font-weight:600; }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); padding:8px 16px; }

.doc-wrap{ max-width:760px; margin:0 auto; padding:4rem 6vw 6rem; }
.doc-wrap h1{ font-family:var(--font-display); font-size:2.1rem; font-weight:600; margin-bottom:.5rem; letter-spacing:-0.01em; }
.doc-meta{ font-size:12.5px; color:var(--text-faint); margin-bottom:2.5rem; font-family:var(--font-mono); }
.doc-wrap h2{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; margin:2.2rem 0 .75rem; }
.doc-wrap p, .doc-wrap li{ font-size:14.5px; color:var(--text-dim); line-height:1.75; margin-bottom:.9rem; }
.doc-wrap ul, .doc-wrap ol{ padding-left:1.4rem; margin-bottom:1rem; }
.doc-wrap strong{ color:var(--text); }

.callout{
  background:var(--down-dim); border:1px solid #4A2028; border-radius:var(--radius);
  padding:1.1rem 1.3rem; font-size:13.5px; color:#FFB0B7; line-height:1.7; margin:1.5rem 0 2rem;
}
.callout strong{ color:#FFC9CE; }

footer{ border-top:1px solid var(--line); padding:2rem 6vw; text-align:center; font-size:12.5px; color:var(--text-faint); }
footer a{ color:var(--text-faint); margin:0 .6rem; }
footer a:hover{ color:var(--text-dim); }