/* Buzz guides — shared stylesheet.
   Design tokens + chrome mirror welcome.html exactly (same palette, fonts,
   radii, board look) so a guide feels like the same product surface. */
:root {
  --ground: #f4f6f1; --surface: #ffffff; --surface-2: #f0f3ec;
  --text: #14201b; --text-soft: #566259; --text-faint: #8a968c;
  --line: #e2e7dd; --line-strong: #d3dacb;
  --board: #0c1411; --board-2: #0f1a15; --board-text: #eaf1e7;
  --board-soft: #8ba295; --board-line: #1e2a24;
  --lime: #c6f23d; --current: #23c07c; --spark: #ff6b4a; --lime-ink: #0c1411;
  --maxw: 1140px; --readw: 720px; --radius: 14px; --radius-lg: 20px;
  --sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root { --ground:#0a110e; --surface:#101815; --surface-2:#0d1512; --text:#e8efe6;
    --text-soft:#93a399; --text-faint:#64756c; --line:#1c2823; --line-strong:#263531;
    --board:#080e0c; --board-2:#0c1411; }
}
:root[data-theme="dark"] { --ground:#0a110e; --surface:#101815; --surface-2:#0d1512; --text:#e8efe6;
  --text-soft:#93a399; --text-faint:#64756c; --line:#1c2823; --line-strong:#263531; --board:#080e0c; --board-2:#0c1411; }
:root[data-theme="light"] { --ground:#f4f6f1; --surface:#ffffff; --surface-2:#f0f3ec; --text:#14201b;
  --text-soft:#566259; --text-faint:#8a968c; --line:#e2e7dd; --line-strong:#d3dacb; --board:#0c1411; --board-2:#0f1a15; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin:0; background:var(--ground); color:var(--text); font-family:var(--sans);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
a { color:inherit; }
h1,h2,h3,h4 { text-wrap:balance; margin:0; letter-spacing:-0.02em; }
p { margin:0; }
img { max-width:100%; }
.eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--current); font-weight:600; }
.skip { position:absolute; left:-999px; top:0; z-index:100; background:var(--lime); color:var(--lime-ink); padding:.6rem 1rem; border-radius:8px; }
.skip:focus { left:1rem; top:1rem; }
:focus-visible { outline:2.5px solid var(--current); outline-offset:3px; border-radius:4px; }

/* nav (identical to welcome) */
.nav { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.25rem; letter-spacing:-0.04em; text-decoration:none; color:var(--text); }
.brand .dot { width:11px; height:11px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 22%, transparent); }
.brand .tag { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase; border:1px solid var(--line-strong); padding:.12rem .4rem; border-radius:5px; }
.nav-cta { display:inline-flex; align-items:center; gap:.5rem; font-weight:650; font-size:.92rem; text-decoration:none; background:var(--text); color:var(--ground); padding:.5rem .95rem; border-radius:10px; transition:transform .15s var(--ease); }
.nav-cta:hover { transform:translateY(-1px); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:.55rem; font:inherit; font-weight:650; text-decoration:none; cursor:pointer; border:1px solid transparent; border-radius:11px; padding:.75rem 1.1rem; transition:transform .15s var(--ease), background .15s, border-color .15s; }
.btn:hover { transform:translateY(-2px); }
.btn-lime { background:var(--lime); color:var(--lime-ink); box-shadow:0 8px 26px -12px color-mix(in srgb, var(--lime) 70%, transparent); }
.btn-outline { background:var(--surface); border-color:var(--line-strong); color:var(--text); }
.btn-outline:hover { border-color:var(--current); }
.btn-ghost { background:transparent; border-color:var(--board-line); color:var(--board-text); }
.btn-ghost:hover { border-color:var(--board-soft); }

/* breadcrumb */
.crumb { display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--text-faint); padding-top:clamp(1.4rem,4vw,2.2rem); }
.crumb a { color:var(--text-soft); text-decoration:none; border-bottom:1px solid transparent; }
.crumb a:hover { color:var(--current); border-color:var(--current); }
.crumb .sep { opacity:.6; }

/* guide header (board banner) */
.g-head { padding-top:1rem; }
.g-hero { position:relative; overflow:hidden; background:radial-gradient(120% 140% at 12% 0%, var(--board-2) 0%, var(--board) 62%); color:var(--board-text); border:1px solid var(--board-line); border-radius:var(--radius-lg); padding:clamp(1.6rem,4.5vw,2.8rem); }
.g-hero .lines { position:absolute; inset:0; background-image:linear-gradient(var(--board-line) 1px, transparent 1px), linear-gradient(90deg, var(--board-line) 1px, transparent 1px); background-size:34px 34px; opacity:.28; }
.g-hero .wave { position:absolute; left:0; right:0; bottom:20%; height:2px; background:linear-gradient(90deg, transparent, var(--lime), var(--current), transparent); opacity:.55; }
.g-hero-in { position:relative; z-index:2; max-width:44ch; }
.g-hero .eyebrow { display:inline-flex; align-items:center; gap:.5rem; }
.g-hero .g-ico { width:30px; height:30px; color:var(--lime); }
.g-hero h1 { font-size:clamp(1.9rem,5vw,3rem); line-height:1.04; font-weight:840; letter-spacing:-0.04em; margin-top:.8rem; }
.g-hero .lede { color:var(--board-soft); font-size:clamp(1.02rem,2vw,1.18rem); margin-top:.9rem; max-width:42ch; }
.g-meta { display:flex; flex-wrap:wrap; gap:1rem 1.4rem; margin-top:1.3rem; font-family:var(--mono); font-size:.74rem; color:var(--board-soft); }
.g-meta span { display:inline-flex; align-items:center; gap:.4rem; }
.g-meta svg { width:14px; height:14px; color:var(--current); }

/* article */
.g-body { padding-block:clamp(2rem,5vw,3.2rem); }
.prose { max-width:var(--readw); }
.prose h2 { font-size:clamp(1.35rem,3vw,1.7rem); font-weight:800; margin-top:2.6rem; padding-top:.2rem; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:1.12rem; font-weight:720; margin-top:1.8rem; }
.prose p { color:var(--text-soft); margin-top:.85rem; }
.prose p strong, .prose li strong { color:var(--text); font-weight:680; }
.prose a.link { color:inherit; font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--current); padding-bottom:1px; }
.prose a.link:hover { color:var(--current); }
.prose ul, .prose ol { color:var(--text-soft); margin:.85rem 0 0; padding-left:1.3rem; }
.prose li { margin-top:.5rem; }
.prose ul li::marker { color:var(--current); }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.4rem 0; }

/* numbered steps (mirror welcome .step) */
.g-steps { counter-reset: step; margin-top:1.4rem; display:flex; flex-direction:column; gap:1.1rem; }
.g-step { position:relative; padding-left:3.3rem; }
.g-step::before { counter-increment:step; content:counter(step, decimal-leading-zero); position:absolute; left:0; top:.05rem;
  font-family:var(--mono); font-size:.98rem; font-weight:600; color:var(--lime-ink); background:var(--lime);
  width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:9px; }
.g-step h3 { font-size:1.08rem; font-weight:720; margin:0; }
.g-step p { color:var(--text-soft); margin-top:.3rem; font-size:.98rem; }

/* callouts */
.callout { display:flex; gap:.8rem; margin-top:1.5rem; padding:1rem 1.15rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface-2); }
.callout .ci { flex:none; width:22px; height:22px; margin-top:.15rem; }
.callout p { margin:0; font-size:.95rem; color:var(--text-soft); }
.callout p strong { color:var(--text); }
.callout.tip { border-color:color-mix(in srgb, var(--current) 40%, var(--line)); background:color-mix(in srgb, var(--current) 9%, var(--surface-2)); }
.callout.tip .ci { color:var(--current); }
.callout.note .ci { color:var(--text-faint); }
.callout.heads { border-color:color-mix(in srgb, var(--spark) 42%, var(--line)); background:color-mix(in srgb, var(--spark) 8%, var(--surface-2)); }
.callout.heads .ci { color:var(--spark); }

/* keyboard chips */
kbd { font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--text); background:var(--surface); border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:7px; padding:.12rem .5rem; white-space:nowrap; }
.kbd-table { width:100%; border-collapse:collapse; margin-top:1.2rem; font-size:.95rem; }
.kbd-table th { text-align:left; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-weight:600; padding:.5rem .6rem; border-bottom:1px solid var(--line-strong); }
.kbd-table td { padding:.6rem .6rem; border-bottom:1px solid var(--line); color:var(--text-soft); vertical-align:top; }
.kbd-table td:first-child { white-space:nowrap; width:1%; }
.kbd-table tr:last-child td { border-bottom:0; }
@media (max-width:600px) { .kbd-table td:first-child { white-space:normal; width:auto; min-width:7rem; } .kbd-table td { overflow-wrap:anywhere; } .kbd-table code { overflow-wrap:anywhere; word-break:break-word; } }

/* branded UI sketch figures (honest diagrams, not fake screenshots) */
figure.sketch { margin:1.6rem 0 0; }
figure.sketch .frame { border:1px solid var(--board-line); border-radius:var(--radius); overflow:hidden; background:radial-gradient(120% 150% at 16% 0%, var(--board-2), var(--board) 70%); }
figure.sketch svg { display:block; width:100%; height:auto; }
figure.sketch figcaption { margin-top:.6rem; font-size:.82rem; color:var(--text-faint); font-family:var(--mono); letter-spacing:.02em; }

/* related guides */
.related { border-top:1px solid var(--line); background:var(--surface-2); padding-block:clamp(2.2rem,5vw,3.4rem); }
.related h2 { font-size:1.5rem; font-weight:800; }
.related p.sub { color:var(--text-soft); margin-top:.4rem; }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:1rem; margin-top:1.5rem; }
.rel-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .16s var(--ease), border-color .16s; }
.rel-card:hover { transform:translateY(-3px); border-color:var(--current); }
.rel-thumb { aspect-ratio:16/9; width:100%; height:auto; object-fit:cover; display:block; background:var(--board); border-bottom:1px solid var(--line); }
.rel-txt { padding:.9rem 1rem 1.1rem; }
.rel-txt .kicker { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.rel-txt h3 { font-size:1.02rem; font-weight:700; margin-top:.25rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.rel-txt h3 .arw { color:var(--current); transition:transform .16s var(--ease); }
.rel-card:hover .arw { transform:translateX(3px); }
/* guides hub (index.html) */
.hub-sec + .hub-sec { border-top:0; padding-top:0; }
.rel-txt p.hub-lede { color:var(--text-soft); font-size:.88rem; line-height:1.45; margin-top:.35rem; }
.hub-nothumb { display:grid; place-items:center; background:radial-gradient(120% 150% at 16% 0%, var(--board-2), var(--board) 70%); }
.hub-nothumb .hub-ico { width:2.4rem; height:2.4rem; color:var(--board-soft); }

/* footer (mirror welcome) */
.foot { border-top:1px solid var(--line); padding-block:clamp(2.4rem,6vw,3.4rem); }
.foot-cta { background:var(--board); color:var(--board-text); border-radius:var(--radius-lg); padding:clamp(1.7rem,5vw,2.6rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.3rem; margin-bottom:2.2rem; }
.foot-cta h2 { font-size:clamp(1.4rem,3.2vw,2rem); font-weight:800; max-width:20ch; }
.foot-cta p { color:var(--board-soft); margin-top:.45rem; }
.foot-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; color:var(--text-soft); font-size:.88rem; }
.foot-meta a { color:var(--text-soft); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.foot-meta a:hover { color:var(--current); border-color:var(--current); }
.foot-meta .set { display:flex; gap:1.2rem; flex-wrap:wrap; }
.foot-brand { display:flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:-0.03em; color:var(--text); }
.foot-brand .dot { width:9px; height:9px; border-radius:50%; background:var(--lime); }

@media (max-width:560px) {
  body { font-size:16px; }
  .brand .tag { display:none; }
  .foot-cta { flex-direction:column; align-items:flex-start; }
  .foot-meta { flex-direction:column; align-items:flex-start; gap:1rem; }
  .g-step { padding-left:2.9rem; }
}