/* Shared look for the how-to pages. Same tokens as /guide/, so the two read
   as one site; kept in a file because each how-to is its own page. */
:root { color-scheme: dark; --bg:#17191d; --panel:#202329; --text:#edeef0; --muted:#b9bec7; --edge:#3b4049; --accent:#f0803c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.65 system-ui,sans-serif; }
a { color:var(--accent); text-underline-offset:3px; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
header { padding:20px max(16px,calc((100vw - 760px)/2)); border-bottom:1px solid var(--edge); display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; }
header a { font-weight:650; text-decoration:none; }
header span { color:var(--muted); }
main { max-width:760px; margin:auto; padding:32px 16px 80px; }
h1 { font-size:clamp(30px,5vw,42px); line-height:1.15; margin:0 0 14px; }
h2 { font-size:25px; line-height:1.3; margin:44px 0 12px; }
h3 { font-size:19px; margin:26px 0 6px; }
p, li { margin:0 0 14px; }
.lead { font-size:20px; color:var(--muted); }
ol, ul { padding-left:24px; }
li::marker { color:var(--accent); font-weight:700; }
figure { margin:26px 0; }
figure video, figure img { width:100%; height:auto; display:block; border-radius:8px; border:1px solid var(--edge); background:#000; }
figcaption { color:var(--muted); font-size:15px; margin-top:8px; }
.note { border-left:3px solid var(--accent); padding:12px 18px; background:var(--panel); margin:20px 0; }
.try { display:inline-block; background:var(--accent); color:#17191d; font-weight:700; padding:12px 22px; border-radius:8px; text-decoration:none; margin:6px 12px 6px 0; }
.try.quiet { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.cta { margin:44px 0 0; padding:24px; background:var(--panel); border:1px solid var(--edge); border-radius:10px; }
.cta h2 { margin-top:0; }
details { border-top:1px solid var(--edge); padding:14px 0; }
details:last-of-type { border-bottom:1px solid var(--edge); }
summary { cursor:pointer; font-weight:650; font-size:18px; }
details p { margin-top:10px; }
kbd { background:var(--panel); border:1px solid var(--edge); padding:1px 5px; border-radius:4px; font:inherit; font-size:14px; }
footer { margin-top:44px; color:var(--muted); font-size:15px; }
footer a { color:var(--muted); }
.index li { margin:0 0 22px; list-style:none; }
.index a { font-size:21px; font-weight:650; text-decoration:none; }
.index p { color:var(--muted); margin:4px 0 0; }
.index ul { padding:0; }
@media print { header, .cta, .try { display:none; } body { background:white; color:black; } }