/* Deline Guides (#119): the guide page on top of the website's own site.css (tokens: --brand, --ink, --line, --bg-soft).
   Owner rule: no grey body text, warm and graspable; every step is a bold line, a short explanation and a real screenshot. */
.guide-page .article p,.guide-page .article li{color:var(--ink)}
.guide-hero .inner>p{color:var(--ink)}
.guide-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 0}
.guide-facts li{font-size:14px;line-height:1;padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.guide-facts li strong{font-weight:600;margin-right:4px}
.guide-facts li.level{background:var(--brand-soft);border-color:transparent;color:var(--brand);font-weight:600}
.guide-article{grid-template-columns:minmax(0,1fr) 300px}
.guide-article article>section{padding-bottom:36px;margin-bottom:36px}
.guide-article h2{font-size:26px}
.guide-intro p{font-size:18px;line-height:1.7}
.guide-intro{margin-bottom:28px}
.guide-before{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:24px 28px}
.guide-before h2{font-size:20px;margin-bottom:10px}
.guide-before ul{margin:0;padding-left:20px}
.guide-before li{font-size:16.5px;line-height:1.7;margin:4px 0}
.guide-steps{list-style:none;padding:0;margin:0;counter-reset:step}
.guide-step{position:relative;padding:0 0 40px 64px;margin:0;counter-increment:step}
.guide-step:before{content:counter(step);position:absolute;left:0;top:-4px;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-weight:600;font-size:17px;display:grid;place-items:center}
.guide-step:not(:last-child):after{content:"";position:absolute;left:19px;top:44px;bottom:8px;width:2px;background:var(--line)}
.guide-step h3{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.35;margin:0 0 8px;color:var(--ink)}
.guide-step .guide-detail p{font-size:16.5px;line-height:1.7;margin:0 0 8px}
.guide-step figure{margin:18px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -24px rgba(25,35,80,.35)}
.guide-step figure img{display:block;width:100%;height:auto}
.guide-step figcaption{font-size:13.5px;padding:10px 14px;border-top:1px solid var(--line-soft);color:var(--ink)}
.guide-step figcaption a{color:var(--brand)}
.guide-step.no-shot .guide-outside{display:inline-block;margin-top:6px;font-size:14px;padding:6px 10px;border-radius:8px;background:var(--brand-soft);color:var(--brand)}
.guide-trouble ul{padding-left:20px}
.guide-trouble li{font-size:16.5px;line-height:1.7;margin:8px 0}
.guide-trouble figure{margin:14px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.guide-trouble figure img{display:block;width:100%;height:auto}
.guide-rule{border-left:4px solid var(--brand);padding-left:22px}
.guide-rule p{font-size:16.5px;line-height:1.7}
.guide-rule details{margin-top:10px;font-size:15px}
.guide-rule details code{font-size:13px}
.guide-related ul{list-style:none;padding:0;display:grid;gap:10px}
.guide-related a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-weight:500}
.guide-related a:hover{border-color:var(--brand);color:var(--brand)}
.guide-related small{display:block;font-weight:400;margin-top:2px}
.guide-verified{font-size:14px!important;border-top:1px solid var(--line);padding-top:16px}
.guide-aside{position:sticky;top:96px;align-self:start;display:grid;gap:16px}
.guide-toc h3,.guide-card h3{font-size:15px;font-weight:600;margin:0 0 10px;color:var(--ink)}
.guide-toc a{display:block;font-size:14.5px;padding:5px 0 5px 12px;color:var(--brand);text-decoration:none;border-left:2px solid var(--line)}
.guide-card{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff}
.guide-card p{font-size:14.5px!important;line-height:1.6!important;margin:0 0 12px}
.guide-ask{background:var(--brand-soft);border-color:transparent}
.guide-prompt{font-weight:600;color:var(--brand)!important;margin:0!important}
.guide-page code{font-family:var(--mono);font-size:.9em;background:var(--bg-soft);padding:1px 5px;border-radius:5px}
@media(max-width:1180px){.guide-article{grid-template-columns:1fr}.guide-aside{position:static;grid-row:1}.guide-toc{display:none}}
@media(max-width:640px){.guide-step{padding-left:0}.guide-step:before{position:static;margin-bottom:12px}.guide-step:after{display:none}.guide-step h3{font-size:18.5px}}
@media print{
  @page{size:A4;margin:14mm 12mm}
  .site-header,.site-footer,.guide-aside,.cta-band,.skip{display:none!important}
  .frame,.page-hero .frame{border:0!important;max-width:none}
  .page-hero{border:0;overflow:visible}.guide-hero .glow{display:none}.guide-hero .inner{padding:0 0 10px!important}
  .guide-article{display:block;padding:0!important}
  .guide-step{padding:0 0 22px;break-inside:avoid}
  .guide-step:before{position:static;display:grid;width:30px;height:30px;font-size:14px;margin:0 0 6px}
  .guide-step:after{display:none}
  .guide-step figure{box-shadow:none;max-width:92%}
  .guide-step figure img{max-height:120mm;object-fit:contain;object-position:left top}
  .guide-step figcaption a{color:var(--ink);text-decoration:none}
  .guide-article article>section{break-inside:auto}
}