/* guide.css — long-form documentation page. Same brand family as landing/editor, but built
   for reading: a dark neutral surface with the gradient used sparingly as an accent, real
   line-length, and a sticky in-page nav rather than the landing page's single-viewport hero. */

:root{
  --bg-0:#0a0b0f; --bg-1:#121319; --bg-2:#1a1b22;
  --border:#282a34;
  --text-0:#f5f4f2; --text-1:#b4b3ba; --text-2:#75747d;
  --brand-blue:#1d6fe0; --brand-pink:#e6237e; --brand-orange:#ff8a3d; --brand-cyan:#2fd4c0;
  --sans:'Satoshi', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg-0); color:var(--text-0); font-family:var(--sans); }

/* ---- top bar ---- */
.gtop{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(10,11,15,0.88);
  backdrop-filter:blur(10px); z-index:10; }
.gmark{ display:inline-flex; text-decoration:none; }
.wordmark{ display:block; width:26px; height:26px; background-color:var(--text-0);
  -webkit-mask-image:url('wordmark.svg'); mask-image:url('wordmark.svg');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  transition:background-color .15s; }
.gmark:hover .wordmark{ background-color:var(--brand-orange); }
.gnav{ display:flex; align-items:center; gap:10px; }
.gnav-cta{ font-size:13px; font-weight:600; color:var(--text-0); text-decoration:none;
  border:1px solid var(--border); border-radius:999px; padding:8px 16px; transition:border-color .15s, background .15s; }
.gnav-cta:hover{ border-color:var(--brand-orange); background:rgba(255,138,61,0.08); }
/* ---- layout: sticky side nav + reading column ---- */
.gwrap{ max-width:960px; margin:0 auto; padding:48px 28px 100px; display:grid;
  grid-template-columns:170px 1fr; gap:56px; align-items:start; }
.gtoc{ position:sticky; top:80px; display:flex; flex-direction:column; gap:9px; padding-top:6px; }
.gtoc-label{ font-family:ui-monospace,monospace; font-size:10px; letter-spacing:0.06em;
  color:var(--text-2); margin-bottom:4px; }
.gtoc a{ font-size:12.5px; color:var(--text-1); text-decoration:none; transition:color .15s; }
.gtoc a:hover{ color:var(--brand-orange); }

.gcontent{ min-width:0; }
.geyebrow{ font-family:ui-monospace,monospace; font-size:11px; letter-spacing:0.08em;
  color:var(--brand-orange); margin:0 0 10px; text-transform:uppercase; }
h1{ font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-0.02em; margin:0 0 16px; line-height:1.15; }
.glede{ font-size:15.5px; line-height:1.65; color:var(--text-1); margin:0 0 48px; max-width:60ch; }

section{ margin-bottom:44px; scroll-margin-top:88px; }
h2{ font-size:19px; font-weight:700; letter-spacing:-0.01em; margin:0 0 14px;
  padding-bottom:10px; border-bottom:1px solid var(--border); }
section p{ font-size:14.5px; line-height:1.7; color:var(--text-1); margin:0 0 14px; max-width:66ch; }
section p:last-child{ margin-bottom:0; }
section strong{ color:var(--text-0); font-weight:600; }
section a{ color:var(--brand-cyan); text-decoration:none; border-bottom:1px solid rgba(47,212,192,0.35); }
section a:hover{ border-color:var(--brand-cyan); }
section ul{ margin:0 0 14px; padding-left:20px; }
section li{ font-size:14.5px; line-height:1.7; color:var(--text-1); margin-bottom:8px; max-width:62ch; }

.gtable{ border-collapse:collapse; width:100%; max-width:480px; }
.gtable td{ padding:9px 14px 9px 0; font-size:13.5px; color:var(--text-1); border-bottom:1px solid var(--border); }
.gtable tr:last-child td{ border-bottom:none; }
.gtable td:first-child{ white-space:nowrap; width:1%; }
kbd{ font-family:ui-monospace,monospace; font-size:11px; background:var(--bg-2); color:var(--text-0);
  border:1px solid var(--border); border-radius:4px; padding:2px 6px; }

.gcta{ margin-top:56px; padding-top:32px; border-top:1px solid var(--border); }
.btn{ font-family:var(--sans); font-size:14px; font-weight:600; border:none; border-radius:999px;
  padding:12px 22px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s, filter .15s; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:linear-gradient(120deg, var(--brand-blue), var(--brand-pink) 60%, var(--brand-orange)); color:#fff; }

@media (max-width:760px){
  .gwrap{ grid-template-columns:1fr; padding-top:32px; }
  .gtoc{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px 14px; padding-bottom:24px;
    border-bottom:1px solid var(--border); margin-bottom:8px; }
  .gtoc-label{ display:none; }
}