.astro-article { max-width: 48rem; margin: 0 auto; padding: 1rem 0; }
.guide-kicker { margin: 0 0 .5rem; color: #2563eb; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-lead { margin: 0; color: #57534e; font-size: 1.15rem; line-height: 1.6; }
.guide-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1.25rem; }
.guide-meta > div { padding: .65rem .8rem; border: 1px solid #e7e5e4; border-radius: .55rem; background: #fff; }
.guide-meta dt { color: #78716c; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.guide-meta dd { margin: .15rem 0 0; font-weight: 650; }
.guide-toc { margin-bottom: 2rem; padding: 1rem; border: 1px solid #bfdbfe; border-radius: .65rem; background: #eff6ff; }
.guide-toc summary { cursor: pointer; color: #1d4ed8; font-weight: 750; }
.guide-toc nav > ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem 1.5rem; margin-bottom: 0; padding-left: 1.25rem; }
.guide-toc nav ul ul { display: none; }
.guide-content h2 { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid #e7e5e4; scroll-margin-top: 1rem; }
.guide-content blockquote { margin: 1.25rem 0; padding: .8rem 1rem; border-left: .25rem solid #3b82f6; border-radius: .25rem; background: #eff6ff; font-style: normal; }
.guide-content pre { position: relative; padding-top: 2.8rem !important; }
.copy-code { position: absolute; top: .5rem; right: .5rem; padding: .25rem .55rem; color: #fff; font-size: .75rem; font-weight: 650; border: 1px solid #57534e; border-radius: .3rem; background: #44403c; cursor: pointer; }
.copy-code:hover { background: #57534e; }
.guide-content input[type="checkbox"] { width: 1rem; height: 1rem; margin-right: .45rem; vertical-align: middle; accent-color: #2563eb; cursor: pointer; }
.guide-progress { position: sticky; bottom: .75rem; z-index: 10; width: max-content; max-width: 100%; margin: 2rem 0 0 auto; padding: .5rem 1rem; border: 1px solid #d6d3d1; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 4px 18px rgba(0,0,0,.14); font-size: .85rem; font-weight: 650; }
.dark .guide-kicker { color: #fde047; }
.dark .guide-lead { color: #d6d3d1; }
.dark .guide-meta > div, .dark .guide-toc { border-color: #44403c; background: #292524; }
.dark .guide-meta dt { color: #a8a29e; }
.dark .guide-toc summary { color: #fde047; }
.dark .guide-content h2 { border-color: #44403c; }
.dark .guide-content blockquote { border-color: #fde047; background: #292524; }
.dark .guide-progress { border-color: #57534e; background: rgba(41,37,36,.96); }
@media (max-width: 640px) {
  .guide-meta { grid-template-columns: repeat(2, 1fr); }
  .guide-toc nav > ul { grid-template-columns: 1fr; }
}