:root {
  --bg: #0d0f14;
  --surface: #13161d;
  --surface-2: #171b24;
  --border: #1e2330;
  --accent: #6c8cff;
  --accent-dim: rgba(108, 140, 255, 0.1);
  --accent-glow: rgba(108, 140, 255, 0.25);
  --text: #c8cdd8;
  --text-dim: #8b93a8;
  --text-bright: #e8ecf4;
  --mono: 'DM Mono', monospace;
  --sans: 'DM Sans', sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.65;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; opacity:.2;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:48px 48px; z-index:0;
}
body::after {
  content:''; position:fixed; top:-200px; left:50%; transform:translateX(-50%);
  width:700px; height:500px; background:radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
a { color:var(--accent); text-decoration:none; }
a:hover { opacity:.85; }
.wrap { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:0 24px; }
nav.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:10px; color:var(--text-bright); font-family:var(--mono); }
.nav-logo-mark {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:var(--accent-dim); border:1px solid var(--accent); color:var(--accent); font-size:13px;
}
.top-actions { display:flex; align-items:center; gap:14px; }
.top-link { font-family:var(--mono); font-size:13px; color:#fff; }
.layout { position:relative; z-index:1; display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; padding:28px 0 56px; }
.sidebar {
  position:sticky; top:18px; align-self:start; background:rgba(19,22,29,.92); backdrop-filter: blur(10px);
  border:1px solid var(--border); border-radius:16px; padding:18px; max-height:calc(100vh - 36px); overflow:auto;
}
.sidebar h3, .sidebar h4 { margin:10px 0 8px; color:var(--text-bright); font-size:13px; font-family:var(--mono); }
.sidebar h3:first-child { margin-top:0; }
.sidebar a {
  display:block; padding:8px 10px; margin:4px 0; border-radius:10px; color:var(--text-dim); font-size:14px;
}
.sidebar a:hover, .sidebar a.active { background:var(--accent-dim); color:var(--text-bright); }
.content {
  min-width:0; background:rgba(19,22,29,.88); border:1px solid var(--border); border-radius:20px; padding:28px;
}
.hero-card {
  background:linear-gradient(180deg, rgba(108,140,255,0.10), rgba(108,140,255,0.03)); border:1px solid rgba(108,140,255,0.25);
  border-radius:18px; padding:24px; margin-bottom:28px;
}
.badge {
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:var(--accent-dim);
  border:1px solid rgba(108,140,255,0.3); color:var(--accent); font-family:var(--mono); font-size:11px; margin-bottom:18px;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
h1,h2,h3 { color:var(--text-bright); }
h1 { font-size:clamp(32px, 4vw, 48px); line-height:1.1; margin:0 0 10px; font-weight:300; }
h2 { font-size:26px; margin:28px 0 12px; }
h3 { font-size:18px; margin:24px 0 10px; }
p { margin:0 0 14px; }
ul, ol { margin:0 0 16px 20px; }
li { margin:6px 0; }
code {
  background:#0a0c11; border:1px solid var(--border); border-radius:6px; padding:2px 6px; font-family:var(--mono); font-size:.95em;
}
pre {
  background:#0a0c11; border:1px solid var(--border); border-radius:12px; padding:14px; overflow:auto; margin:0 0 18px;
}
pre code { border:none; padding:0; background:transparent; }
.card-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:18px;
}
.mini-card {
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:18px;
}
.mini-card h3 { margin-top:0; font-size:15px; font-family:var(--mono); }
.note, .warn {
  border-radius:14px; padding:14px 16px; margin:16px 0; border:1px solid var(--border);
}
.note { background:rgba(108,140,255,0.08); }
.warn { background:rgba(255,196,0,0.08); }
.screenshot-placeholder {
  margin:18px 0; border:1px dashed rgba(108,140,255,0.45); border-radius:14px; padding:20px; text-align:center; color:var(--text-dim);
  background:rgba(108,140,255,0.04);
}
.page-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:10px; font-family:var(--mono);
  font-size:12px; border:1px solid var(--border); background:var(--surface); color:var(--text-bright);
}
.btn.primary { background:var(--accent); border-color:transparent; color:#fff; }
.mobile-menu-toggle {
  display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:#fff; font-size:18px;
}
.mobile-sidebar-backdrop { display:none; }
.footer { border-top:1px solid var(--border); padding:26px 0 40px; color:var(--text-dim); font-family:var(--mono); font-size:12px; }
@media (max-width: 920px) {
  .layout { grid-template-columns:1fr; }
  .mobile-menu-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .sidebar {
    position:fixed; top:0; left:-320px; width:290px; height:100vh; max-height:none; border-radius:0 16px 16px 0; z-index:30; transition:left .25s ease;
  }
  body.menu-open .sidebar { left:0; }
  .mobile-sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20; }
  body.menu-open .mobile-sidebar-backdrop { display:block; }
}