/* /help: the guides. Dark like the rest of the builder's public pages; loads nothing from another origin. */
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;max-width:1100px;margin:0 auto}
.hd-nav{display:flex;align-items:center;gap:14px;font-size:13.5px}
.hd-nav a{color:var(--fg-1)}.hd-nav a.on{color:var(--fg);font-weight:600}.hd-nav a.btn{height:34px}
.wrap{max-width:1100px;margin:0 auto;padding:24px 24px 48px;display:flex;flex-direction:column;gap:24px}
.head h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em}
.crumb{margin:0 0 6px;font-size:13px;color:var(--fg-2)}.crumb a{color:var(--fg-2)}
.lead{margin:0;color:var(--fg-1);font-size:15px;line-height:1.55;max-width:70ch}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card.topic{display:flex;flex-direction:column;gap:6px;padding:20px;color:var(--fg);text-decoration:none}
.card.topic h2{margin:0;font-size:18px;letter-spacing:-.01em}.card.topic p{margin:0;color:var(--fg-1);font-size:13.5px;line-height:1.5;flex:1}
.card.topic .more{color:var(--accent-2);font-size:13px;font-weight:500}.card.topic:hover .more{text-decoration:underline}.card.topic.dim{opacity:.75}
.cols{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.toc{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;scrollbar-width:thin;padding-right:4px}
.toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--fg-1);font-size:13.5px;text-decoration:none;border:1px solid transparent}
.toc a:hover{background:var(--bg-2);color:var(--fg)}.toc a.on{background:var(--accent-soft);border-color:rgba(99,102,241,.35);color:var(--fg)}
.toc .btn{margin:12px 10px 0;align-self:flex-start}
.guide{display:flex;flex-direction:column;gap:26px;min-width:0;max-width:78ch}
.guide section{scroll-margin-top:16px}
.guide h2{margin:0 0 10px;font-size:22px;letter-spacing:-.02em;padding-top:8px;border-top:1px solid var(--line);padding-top:18px}
.guide section:first-child h2{border-top:0;padding-top:0}
.guide p{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--fg)}
.guide ul{margin:0 0 12px;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--fg)}.guide ul ul{margin:6px 0 4px;font-size:13.5px;color:var(--fg-1)}
.guide li{margin:3px 0}
.guide b{color:var(--fg);font-weight:600}.guide i{color:var(--fg-1)}
.guide code{font:12.5px var(--mono);background:var(--bg-2);padding:1px 5px;border-radius:4px;color:var(--fg-1)}
.guide kbd{display:inline-block;padding:1px 6px;border-radius:4px;border:1px solid var(--line);background:var(--bg-2);font:11.5px/1.5 var(--mono);color:var(--fg)}
/* illustrations */
.fig{margin:4px 0 16px;padding:0}
.fig svg{width:100%;height:auto;display:block;border-radius:12px}
.fig figcaption{margin-top:8px;font-size:12.5px;color:var(--fg-2);line-height:1.5}
.f-page{fill:var(--bg-2);stroke:var(--line)}.f-line{fill:var(--fg-3)}.f-line.dim{fill:var(--bg-3)}
.f-card{fill:var(--accent-soft);stroke:rgba(99,102,241,.5)}
.f-view{stroke:var(--fg-3);stroke-dasharray:4 4}.f-tag{font:10.5px var(--mono);fill:var(--fg-3)}.f-label{font:600 12px var(--font);fill:var(--fg-1)}
.f-pin{fill:var(--bg-3)}.f-arrow{fill:none;stroke:var(--fg-3);stroke-width:1.5}
.f-strip{stroke:var(--fg-3);stroke-width:2}.f-key rect{fill:var(--accent-2)}
.f-head line{stroke:#f59e0b;stroke-width:2}.f-head circle{fill:#f59e0b}
.f-bar{fill:var(--bg-3)}.f-sep{stroke:var(--line)}.f-ruler text{font:10px var(--mono);fill:var(--fg-3)}
.f-lane{fill:rgba(99,102,241,.45)}.f-lane.loop{fill:rgba(16,185,129,.4)}.f-chip{fill:var(--bg-3);stroke:var(--line)}
.f-meter{fill:var(--bg-3)}.f-meter-fill{fill:var(--accent)}
.f-btn circle{fill:var(--bg-1);stroke:var(--line)}.f-btn rect,.f-btn path{fill:var(--fg)}.f-btn.on circle{stroke:var(--accent)}
/* the moving ones (CSS only), at rest under reduced motion or the page's own toggle */
.f-in{animation:f-rise 2.6s cubic-bezier(.16,1,.3,1) infinite both}.f-in.d2{animation-delay:.12s}.f-in.d3{animation-delay:.24s}
@keyframes f-rise{0%{opacity:0;transform:translateY(22px)}30%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(22px)}}
.f-parallax{animation:f-par 4s ease-in-out infinite alternate}@keyframes f-par{to{transform:translateY(-14px)}}
.f-over{animation:f-over 4s ease-in-out infinite alternate}@keyframes f-over{to{transform:translateY(-60px)}}
.f-head{animation:f-head 3s linear infinite;transform:translateX(20px)}@keyframes f-head{from{transform:translateX(20px)}to{transform:translateX(400px)}}
.f-head.mode{animation-name:f-head-mode;transform:translateX(120px)}@keyframes f-head-mode{from{transform:translateX(120px)}to{transform:translateX(330px)}}
.f-float{animation:f-float 3s ease-in-out infinite alternate}@keyframes f-float{to{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.f-in,.f-parallax,.f-over,.f-head,.f-float{animation:none}}
body.calm-demos .f-in,body.calm-demos .f-parallax,body.calm-demos .f-over,body.calm-demos .f-head,body.calm-demos .f-float{animation:none}
/* the ask box */
.ask{padding:20px;display:flex;flex-direction:column;gap:10px}
.ask h2{border-top:0;padding-top:0;margin:0}
.ask form{display:flex;flex-direction:column;gap:10px}
.ask .row{align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:12.5px var(--font);padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg-1);cursor:pointer}
.chip:hover{color:var(--fg);border-color:#3a3a4a}
.answer{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);font-size:14.5px;line-height:1.6;white-space:pre-wrap}
.answer .meta{display:block;margin-top:10px;font:11.5px var(--mono);color:var(--fg-3)}
.answer.err{border-color:rgba(248,113,113,.5);color:#fca5a5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.foot{max-width:1100px}
@media(max-width:760px){.cols{grid-template-columns:1fr}.toc{position:static;flex-direction:row;flex-wrap:wrap;max-height:none}.toc a{padding:5px 9px}.toc .btn{margin:0}.hd{padding:14px 16px}.hd-nav .btn.ghost{display:none}.wrap{padding:16px 16px 40px}.guide h2{font-size:20px}}