:root{
  --bg: #05080f;
  --bg-elevated: #0c0c14;
  --bg-card: #12121e;
  --bg-inset: #080c16;
  --accent: #c4b5fd;
  --accent-strong: #8b5cf6;
  --accent-solid: #6b26d9;
  --text: #ffffff;
  --text-muted: rgba(255,255,255,.64);
  --text-dim: rgba(255,255,255,.42);
  --border: rgba(255,255,255,.1);
  --success: #22c55e;
  --warn: #f0b429;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--text); }
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

h1,h2,h3,h4{ font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
code, kbd{ font-family:var(--font-mono); }
code{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.15em .45em;
  font-size:.88em;
  color:var(--accent);
}
kbd{
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-bottom-width:2px;
  border-radius:6px;
  padding:.15em .5em;
  font-size:.8em;
  color:var(--text-muted);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-dim);
}

/* ---------- shell ---------- */
.shell{
  display:grid;
  grid-template-columns:272px minmax(0,1fr);
  max-width:1240px;
  margin:0 auto;
}

/* ---------- sidebar ---------- */
.sidebar{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  overflow-y:auto;
  padding:32px 20px 40px 32px;
  border-right:1px solid var(--border);
  scrollbar-width:thin;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:17px;
  margin-bottom:6px;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{ color:var(--accent); }
.brand-mark{
  width:28px; height:28px;
  border-radius:7px;
  display:block;
  flex-shrink:0;
}
.brand-sub{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-dim);
  margin-bottom:32px;
  padding-left:40px;
}

.navgroup{ margin-bottom:28px; }
.navgroup-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text-dim);
  margin:0 0 8px 15px;
}
.navgroup a{
  display:block;
  padding:5px 0 5px 14px;
  border-left:1px solid var(--border);
  font-size:13.5px;
  line-height:1.4;
  color:var(--text-dim);
  transition:color .12s, border-color .12s;
}
.navgroup a:hover{ color:var(--text-muted); border-left-color:var(--text-dim); }
.navgroup a.active{
  color:var(--text);
  font-weight:600;
  border-left-color:var(--accent);
}

.mobile-toggle{ display:none; }

/* ---------- content ---------- */
.content{ min-width:0; padding:56px 40px 120px; }
.content-inner{ max-width:700px; }

.doc-hero{ margin-bottom:56px; }
.doc-hero h1{
  font-size:clamp(32px,4vw,42px);
  margin:12px 0 14px;
}
.doc-hero p{ color:var(--text-muted); font-size:17px; max-width:560px; }

.factrow{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:24px;
}
.fact{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:100px;
  padding:7px 13px;
}
.fact svg{ width:13px; height:13px; flex-shrink:0; stroke:var(--accent); }

section.doc{
  padding-top:56px;
  margin-top:56px;
  border-top:1px solid var(--border);
  scroll-margin-top:24px;
}
section.doc:first-of-type{ border-top:none; margin-top:0; padding-top:0; }

section.doc h2{
  font-size:26px;
  margin-bottom:8px;
  display:flex; align-items:center; gap:10px;
}
section.doc > .eyebrow{ margin-bottom:10px; }
section.doc > p.lead{ color:var(--text-muted); font-size:16px; margin-bottom:28px; max-width:600px; }

h3{ font-size:18px; margin:32px 0 10px; }
p{ margin-bottom:16px; color:var(--text-muted); }
p.tight{ margin-bottom:8px; }
strong{ color:var(--text); font-weight:600; }

ul, ol{ margin:0 0 16px 0; padding-left:22px; color:var(--text-muted); }
ul li, ol li{ margin-bottom:8px; }
ul li::marker{ color:var(--accent); }

/* ---------- steps ---------- */
.steps{
  display:flex; flex-direction:column; gap:14px;
  margin:24px 0 8px;
}
.step{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:18px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 24px;
}
.step-num{
  width:40px; height:40px;
  border-radius:11px;
  background:var(--bg-inset);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--accent);
  font-size:15px;
}
.step h4{ font-size:16px; font-weight:700; margin-top:0; margin-bottom:6px; }
.step p{ margin-bottom:8px; font-size:14.5px; }
.step p:last-child{ margin-bottom:0; }

/* ---------- cards / grid ---------- */
.card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
}
.card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:20px 0 8px;
}
.card-grid .card h4{
  font-size:15px; font-weight:700; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.card-grid .card h4 .ico{ font-size:16px; }
.card-grid .card p{ font-size:14px; margin-bottom:0; }

/* ---------- note / callout ---------- */
.callout{
  display:flex; gap:14px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 20px;
  margin:20px 0;
  font-size:14.5px;
}
.callout p{ margin:0; font-size:14.5px; color:var(--text-muted); }
.callout strong{ color:var(--text); }
.callout-icon{ flex-shrink:0; width:20px; height:20px; margin-top:1px; }
.callout.tip{ background:rgba(139,92,246,.08); border-color:rgba(139,92,246,.3); }
.callout.tip .callout-icon{ color:var(--accent); }
.callout.warn{ background:rgba(240,180,41,.07); border-color:rgba(240,180,41,.28); }
.callout.warn .callout-icon{ color:var(--warn); }

/* ---------- kv table ---------- */
.kv{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 8px;
  font-size:14.5px;
}
.kv th{
  text-align:left;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
  font-weight:400;
  padding:0 0 10px;
  border-bottom:1px solid var(--border);
}
.kv td{
  padding:13px 0;
  border-bottom:1px solid var(--border);
  color:var(--text-muted);
  vertical-align:top;
}
.kv tr:last-child td{ border-bottom:none; }
.kv td:first-child{ color:var(--text); font-weight:600; white-space:nowrap; padding-right:24px; }
.kv td code{ white-space:nowrap; }

/* ---------- pill toggle pairs (setting states) ---------- */
.pillrow{ display:flex; gap:8px; margin:4px 0 16px; flex-wrap:wrap; }
.pill{
  font-family:var(--font-mono);
  font-size:12px;
  padding:6px 12px;
  border-radius:100px;
  border:1px solid var(--border);
  color:var(--text-muted);
}
.pill.on{ color:var(--success); border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08); }
.pill.default::after{ content:" · default"; opacity:.7; }

/* ---------- accordion ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.faq-item{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px;
  background:transparent; border:none;
  color:var(--text);
  font-family:inherit; font-size:15px; font-weight:600;
  text-align:left; cursor:pointer;
}
.faq-icon{ flex-shrink:0; width:18px; height:18px; position:relative; }
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; background:var(--text-muted);
  border-radius:1px; transition:transform .25s ease;
}
.faq-icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.faq-icon::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.faq-item[data-open="true"] .faq-icon::after{ transform:translateX(-50%) rotate(90deg); }
.faq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.faq-item[data-open="true"] .faq-panel{ grid-template-rows:1fr; }
.faq-panel-inner{ overflow:hidden; }
.faq-a{ padding:0 20px 18px; color:var(--text-muted); font-size:14.5px; }
.faq-a code{ font-size:.85em; }
@media (prefers-reduced-motion: reduce){ .faq-panel, .faq-icon::after{ transition:none; } }

/* ---------- screenshots ---------- */
figure{ margin:0; }
.shot-main{ margin:24px 0 32px; }
.shot-frame{
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  display:flex;
  justify-content:center;
}
.shot-frame img{ display:block; max-width:100%; height:auto; border-radius:8px; }
.shot-frame--tall{ max-width:280px; margin:0 auto; }
figcaption{
  margin-top:12px;
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.55;
}
.shot-tag{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:4px;
}
.shot-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.shot-grid{ align-items:start; }
.shot-grid .shot-frame{ padding:14px; }
@media (max-width:920px){ .shot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .shot-grid{ grid-template-columns:1fr; } }

/* ---------- file path list ---------- */
.pathlist{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.pathrow{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 16px;
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:10px;
  flex-wrap:wrap;
}
.pathrow .plat{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
  min-width:64px;
}
.pathrow code{ font-size:13px; word-break:break-all; }

footer.docfoot{
  margin-top:80px;
  padding-top:28px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  color:var(--text-dim);
  font-size:13px;
}
footer.docfoot a{ color:var(--text-muted); }
footer.docfoot a:hover{ color:var(--text); }

@media (max-width:920px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{
    position:static;
    height:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:18px 20px;
  }
  .brand-sub{ display:none; }
  .mobile-toggle{
    display:flex; align-items:center; gap:8px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:10px;
    padding:9px 14px;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:12px;
    cursor:pointer;
    margin-top:14px;
  }
  .navwrap{ display:none; margin-top:16px; }
  .navwrap.open{ display:block; }
  .card-grid{ grid-template-columns:1fr; }
  .content{ padding:40px 22px 90px; }
  .step{ grid-template-columns:32px 1fr; padding:18px; }
}