html { scroll-behavior:smooth; }
body { display:block; }
.guide-shell { max-width:1200px; margin:auto; padding:64px 32px 80px; }
.guide-hero { padding-bottom:48px; border-bottom:1px solid var(--card-border-strong); }
.guide-label { color:var(--fg-1); font-size:22px; margin-bottom:20px; }
.guide-hero h1 { font-family:'Press Start 2P',monospace; font-size:clamp(25px,4.2vw,52px); line-height:1.55; color:white; letter-spacing:-.02em; text-wrap:balance; }
.cursor-mark { color:var(--fg-2); }
.hero-summary { font-size:32px; max-width:40ch; line-height:1.25; margin:24px 0 16px; color:white; }
.hero-detail { font:17px/1.65 Arial,sans-serif; max-width:62ch; }
.hero-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin:30px 0; }
.download-action { color:white; font:22px 'VT323',monospace; padding:14px 0; background:none; border:0; text-decoration:underline; text-underline-offset:5px; cursor:pointer; }
.guide-meta { margin:0; font-size:19px; }
.guide-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; padding-top:48px; }
.guide-nav { position:sticky; top:28px; align-self:start; display:flex; flex-direction:column; gap:16px; font-size:21px; }
.guide-nav p { color:var(--fg-2); font-size:18px; }
.guide-nav a { color:var(--fg-1); line-height:1.25; }
.guide-nav a:hover { color:white; }
.guide-nav .back-library { border-top:1px solid var(--card-border-strong); padding-top:20px; margin-top:8px; }
.guide-content { font:17px/1.75 Arial,sans-serif; min-width:0; max-width:72ch; }
.guide-content h2 { font:32px/1.25 'VT323',monospace; color:white; margin:52px 0 20px; scroll-margin-top:28px; text-wrap:balance; }
.guide-content p { margin:0 0 22px; text-wrap:pretty; }
.guide-content ul { padding-left:24px; margin:20px 0; }
.guide-content li { margin:12px 0; }
.guide-content a { text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.prompt { position:relative; background:var(--bg-1); border:1px solid var(--card-border-strong); padding:62px 24px 24px; margin:24px 0; }
.prompt pre { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.75 'Courier New',monospace; color:#eee; }
.copy-prompt { position:absolute; top:12px; right:12px; font:18px 'VT323',monospace; border:1px solid var(--fg-2); padding:8px 12px; background:var(--bg-1); color:white; cursor:pointer; }
.copy-prompt:hover { background:white; color:#111; }
.table-wrap { overflow-x:auto; margin:24px 0; }
table { border-collapse:collapse; width:100%; font-size:15px; }
th,td { border-bottom:1px solid var(--card-border-strong); text-align:left; padding:14px 12px; vertical-align:top; }
th { color:white; } td:first-child { width:30%; color:white; }
.review-checklist { margin-top:48px; padding-top:4px; border-top:1px solid var(--card-border-strong); }
.review-checklist label { display:flex; gap:14px; align-items:flex-start; padding:14px 0; cursor:pointer; }
.review-checklist input { width:20px; height:20px; flex-shrink:0; margin-top:4px; accent-color:white; }
.review-checklist input:checked + span { color:var(--fg-2); text-decoration:line-through; }
#checklist-status { font:22px 'VT323',monospace; margin-top:18px; color:white; }
:focus-visible { outline:2px solid white; outline-offset:5px; }
.skip-link { position:absolute; top:-100px; left:20px; background:white; color:black; padding:12px; z-index:10; }
.skip-link:focus { top:8px; }
@media(max-width:800px) { .guide-shell { padding:36px 20px 60px; } .guide-layout { grid-template-columns:1fr; gap:32px; } .guide-nav { position:static; padding-bottom:28px; border-bottom:1px solid var(--card-border-strong); } .hero-summary { font-size:27px; } .guide-content { font-size:16px; } .guide-hero h1 { font-size:clamp(20px,5.4vw,36px); } .topbar { padding:18px 20px; } .brand { font-size:9px; } .prompt { padding:62px 16px 20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .topbar,.guide-nav,.hero-actions,.copy-prompt,.bottombar,dialog { display:none; } body,.prompt { background:white; color:black; } .guide-shell { padding:0; } .guide-layout { display:block; } .guide-content,.guide-content h2,.guide-hero h1,.hero-summary,.prompt pre,.guide-content a { color:black; } .prompt { break-inside:avoid; } }
/* Keep the document as the scroll container so long guides and sticky contents work. */
html, body { height:auto; overflow-x:clip; }
body::before { display:none; }
body.is-booted .topbar, body.is-booted .bottombar { animation:none; }