/* User-guide page (/help). Standalone: the app's CSP forbids inline styles, so
   everything the guide needs lives here. Palette mirrors styles.css. */
:root { color-scheme: dark; --bg:#0b1020; --panel:#111827; --panel2:#172033; --text:#e5e7eb; --muted:#94a3b8; --line:#263247; --accent:#38bdf8; --badge:#ffaa1e; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
.guide { max-width: 920px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
h1 { display:flex; align-items:center; gap:.6rem; font-size:1.6rem; letter-spacing:.02em; }
.brand-icon { height:34px; width:34px; border-radius:8px; }
h2 { margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:1.25rem; }
h3 { margin-top:1.9rem; margin-bottom:.3rem; font-size:1.08rem; color:var(--text); }
a { color: var(--accent); }
code { background:#020617; border:1px solid #334155; border-radius:5px; padding:.05rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; }
.lead { font-size:1.06rem; color:var(--text); }
.muted { color: var(--muted); }
.tip { background:var(--panel2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:.6rem .9rem; }
.toc { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding: .8rem 1.2rem; }
.toc h2 { margin:0 0 .4rem; border:0; padding:0; font-size:1rem; }
.toc ol { margin:.2rem 0 .4rem; padding-left:1.4rem; columns:2; column-gap:2.5rem; }
.toc a { text-decoration:none; }
.steps li { margin:.35rem 0; }
figure { margin: 1.2rem 0 1.6rem; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding: .9rem; }
figure img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--line); }
figcaption { margin-top: .8rem; }
/* Legend rows numbered with the same amber badges drawn on the screenshots. */
.legend { list-style:none; counter-reset: badge; margin:.2rem 0 0; padding:0; }
.legend li { counter-increment: badge; position:relative; padding-left: 2.4rem; margin: .55rem 0; }
.legend li::before { content: counter(badge); position:absolute; left:0; top:.15rem; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--badge); color:#141822; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
footer { margin-top:3rem; border-top:1px solid var(--line); padding-top:1rem; }
@media (max-width: 700px) {
  .toc ol { columns:1; }
  .guide { padding-top:1.2rem; }
}