.guide-reader { min-height: 100%; padding: 18px 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); corner-shape: superellipse(var(--corner-k)); }
.guide-reader-header { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.guide-back { padding: 6px 0; color: var(--hot); font: var(--type-micro); }
.guide-back:is(:hover, :focus-visible) { color: var(--ink-1); background: transparent; }
.guide-reader-title { margin: 0; color: var(--ink-1); font: 500 22px/1.15 var(--font-sans); }
.guide-content { color: var(--ink-2); font: var(--type-body); overflow-wrap: anywhere; }
.guide-content :is(h2, h3, h4, h5, h6) { margin: 24px 0 12px; color: var(--ink-1); font: 500 18px/1.25 var(--font-sans); }
.guide-content h2 { font-size: 22px; }
.guide-content :is(h4, h5, h6) { font-size: 16px; }
.guide-content p { margin: 12px 0; }
.guide-content strong { color: var(--ink-1); font-weight: 500; }
.guide-content a { color: var(--display-ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.guide-content a:is(:hover, :focus-visible) { color: var(--hot); text-decoration-color: currentColor; }
.guide-content :is(ul, ol) { padding-left: 22px; margin: 12px 0; }
.guide-content li { padding: 5px 0; }
.guide-content li::marker { color: var(--ink-3); }
.guide-content blockquote { margin: 18px 0; padding: 0 0 0 14px; border-left: 1px solid var(--line); }
.guide-content code { font: 12px/1.5 ui-monospace, monospace; color: var(--ink-1); }
.guide-content pre { margin: 16px 0; padding: 14px; overflow: auto; background: var(--stage); border-radius: var(--radius-sm); }
.guide-content hr { margin: 24px 0; border: 0; border-top: 1px solid var(--line); }
.guide-table { overflow-x: auto; margin: 16px 0; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.guide-table table { width: 100%; min-width: 280px; border-collapse: collapse; font: var(--type-micro); }
.guide-table th { font-weight: 500; color: var(--ink-1); text-align: left; background: var(--surface-2); }
.guide-table :is(th, td) { min-width: 90px; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-check { list-style: none; margin-left: -22px; display: grid; grid-template-columns: 16px 1fr; gap: 9px; }
.guide-check-mark { width: 14px; height: 14px; margin-top: 5px; border: 1px solid var(--ink-4); border-radius: 3px; display: grid; place-items: center; font-size: 10px; }
.guide-check-mark.is-complete { color: var(--stage); background: var(--good); border-color: var(--good); }
.guide-loading, .guide-error { padding: 20px 0; color: var(--ink-3); }
.guide-retry { margin-top: 8px; padding: 10px 14px; color: var(--hot); background: var(--stage); border-radius: var(--radius-sm); }
.guide-retry:is(:hover, :focus-visible) { background: var(--surface-2); }
@media (max-width: 760px) { .guide-reader { padding: 16px; } }