/* Guide page (/how-to-make-a-font/). Builds on the tokens and components in styles.css. */
body.guide{height:auto;overflow:visible;display:block;font-size:16px;line-height:1.6}
.guide .appbar{position:sticky;top:0;z-index:10;background:var(--bg)}
.guide .appbar .btn.primary{margin-left:auto}
.g-main{max-width:960px;margin:0 auto;padding:0 var(--s5)}
.g-hero{padding:72px 0 56px;max-width:720px}
.g-kicker{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text-accent);text-transform:uppercase;letter-spacing:.08em}
.guide h1{font-size:clamp(34px,5vw,52px);line-height:1.08;font-weight:var(--fw-medium);letter-spacing:-.02em;margin-top:var(--s3)}
.g-lede{font-size:19px;color:var(--text-secondary);margin-top:var(--s5);text-wrap:pretty}
.g-cta{height:44px;padding:0 var(--s5);font-size:var(--fs-lg);margin-top:28px;text-decoration:none;display:inline-flex}
.g-sec{padding:48px 0;border-top:1px solid var(--border)}
.guide h2{font-size:28px;line-height:1.2;letter-spacing:-.01em}
.guide h3{font-size:18px;font-weight:var(--fw-medium);line-height:1.3}
.g-sec>p,.g-intro{max-width:680px;margin-top:var(--s3);color:var(--text-secondary);text-wrap:pretty}
.g-sec>p strong,.g-steps strong,.g-install strong{color:var(--text-primary);font-weight:var(--fw-medium)}
.g-steps{list-style:none;counter-reset:s;margin-top:28px;border-top:1px solid var(--border);max-width:820px}
.g-steps li{counter-increment:s;display:grid;grid-template-columns:28px 200px minmax(0,1fr);column-gap:var(--s5);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--border)}
.g-steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font-weight:var(--fw-medium);font-size:var(--fs-md);align-self:start}
.g-steps h3{align-self:start;line-height:28px}
.g-steps p{color:var(--text-secondary);align-self:start;padding-top:2px}
@media (max-width:640px){.g-steps li{grid-template-columns:28px minmax(0,1fr);row-gap:var(--s1)}.g-steps p{grid-column:2}}
.guide kbd{font:inherit;font-size:.85em;padding:1px 6px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-2)}
.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s5);margin-top:28px}
.g-card{display:flex;flex-direction:column;padding:var(--s4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.g-fig{display:grid;place-items:center;height:180px;padding:var(--s3);border-radius:var(--radius);background:var(--canvas)}
.g-thumb{height:100%;max-width:100%}
.g-thumb .thumb-glyph{fill:var(--text-primary)}
.g-thumb .thumb-grid{fill:none;stroke:var(--accent-line);opacity:.5}
.g-thumb .thumb-grid *{vector-effect:non-scaling-stroke}
.g-card h3{margin-top:var(--s4)}
.g-card p{margin-top:var(--s1);color:var(--text-secondary);font-size:15px;flex:1}
.g-card p strong{display:block;color:var(--text-primary);font-weight:var(--fw-medium)}
.g-sample{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--border)}
.g-word{display:block;width:100%;height:auto;max-height:22px;fill:var(--text-primary)}
.g-install{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4);margin-top:28px}
.g-install div{padding:var(--s4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.g-install dt{font-weight:var(--fw-medium);font-size:17px}
.g-install dd{margin-top:var(--s1);color:var(--text-secondary);font-size:15px}
.guide code{font-size:.9em;padding:1px 4px;border-radius:var(--radius);background:var(--surface-2);overflow-wrap:anywhere}
.g-note{font-size:15px}
.faq{margin-top:var(--s5);border-top:1px solid var(--border);max-width:760px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;cursor:pointer;font-weight:var(--fw-medium);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--text-muted);font-size:20px;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 0 var(--s4);color:var(--text-secondary);max-width:680px}
.g-end{padding:64px 0 80px;border-top:1px solid var(--border);text-align:center}
.g-end p{color:var(--text-secondary);margin-top:var(--s2)}
.g-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);max-width:960px;margin:0 auto;padding:var(--s5);border-top:1px solid var(--border);font-size:var(--fs-md);color:var(--text-muted)}
.g-foot a,.g-sec a{color:var(--text-accent)}
@media (max-width:600px){.g-main{padding:0 var(--s4)}.g-hero{padding:48px 0 40px}.guide .appbar .logo-name{display:none}}