.guide-page { background: var(--bg); }
.guide-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 24px max(24px, calc((100vw - 1280px) / 2)); background: var(--sidebar); border-bottom: 1px solid var(--border); }
.guide-brand { display: flex; align-items: center; gap: 14px; color: var(--orange); font: 0.875rem/1.8 var(--pixel); min-width: 0; overflow-wrap: anywhere; }
.guide-brand > svg { flex: 0 0 auto; }
.guide-brand small { display: block; color: var(--faint); font: var(--text-caption)/var(--line-copy) var(--mono); letter-spacing: 1px; }
.guide-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; min-width: 0; }
.guide-header nav > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); }
.guide-header nav > a[aria-current] { color: var(--orange); }
.guide-main { max-width: 1280px; margin: auto; padding: 24px 32px 0; }
.guide-main :is(h1,h2,h3,p,a,li,span,code) { overflow-wrap: anywhere; }
.guide-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--faint); font-size: var(--text-caption); }
.guide-breadcrumbs li { min-width: 0; }
.guide-breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--border); }
.guide-breadcrumbs a { display: inline-block; padding-block: 12px; color: var(--orange); }
.guide-breadcrumbs [aria-current] { display: inline-block; padding-block: 12px; }
.guide-hero { max-width: 960px; padding: 34px 0 40px; }
.guide-hero h1 { font: clamp(1.5rem, 3vw, 2.2rem)/1.65 var(--pixel); margin: 16px 0 20px; }
.guide-kicker { display: flex; align-items: center; gap: 14px; color: var(--orange); }
.guide-kicker > svg { flex: 0 0 auto; }
.guide-kicker .eyebrow { margin: 0; }
.guide-lead { max-width: 780px; font-size: var(--text-lead); line-height: var(--line-copy); color: var(--muted); }
.guide-flavor { color: var(--orange); margin-bottom: 16px; }
.guide-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.guide-facts > span { padding: 10px 14px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: var(--text-caption); }
.guide-hero .button { white-space: normal; max-width: 100%; min-height: 48px; }
.guide-hero > .form-note { margin-top: 12px; max-width: 720px; }
.guide-index-note { margin-top: 20px; color: var(--faint); }
.guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.guide-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); padding: 24px; background: var(--panel); }
.guide-card-kicker { display: flex; align-items: center; gap: 14px; color: var(--orange); margin-bottom: 22px; font-size: var(--text-caption); }
.guide-card-kicker > svg { flex: 0 0 auto; }
.guide-card h2 { font: 700 var(--text-lead)/var(--line-copy) var(--mono); margin-bottom: 14px; }
.guide-card h2 a { display: block; min-height: 44px; color: var(--ink); }
.guide-card h2 a:hover { color: var(--orange); }
.guide-card > p { margin-bottom: 16px; color: var(--muted); }
.guide-card > .guide-flavor { color: var(--faint); font-size: var(--text-caption); }
.guide-card-foot { display: flex; flex-direction: column; align-items: start; gap: 14px; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--border); font-size: var(--text-caption); color: var(--faint); }
.guide-card-foot a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--orange); font-size: var(--text-body); }
.guide-body { display: grid; grid-template-columns: minmax(0,800px) minmax(180px,1fr); gap: 60px; align-items: start; }
.guide-prose { min-width: 0; }
.guide-section { margin-bottom: 40px; scroll-margin-top: 24px; }
.guide-section h2, .guide-related h2 { font: 700 var(--text-lead)/1.6 var(--mono); margin-bottom: 16px; color: var(--ink); }
.guide-section p { color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.guide-section .tag { display: inline-block; color: var(--orange); }
.guide-steps { margin: 0 0 20px; padding-left: 28px; }
.guide-steps li { padding: 12px 0 12px 8px; color: var(--muted); line-height: 1.6; }
.guide-steps li::marker { color: var(--orange); font-weight: 700; }
.guide-evidence { border: 1px solid var(--border); background: var(--panel); padding: 24px; }
.guide-evidence > .text-link { min-height: 44px; margin-bottom: 16px; }
.guide-toc { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: start; gap: 4px; padding: 20px; border-left: 1px solid var(--border); }
.guide-toc strong { margin-bottom: 12px; color: var(--faint); font-size: var(--text-caption); }
.guide-toc a { display: flex; align-items: center; min-height: 44px; color: var(--muted); }
.guide-related { border-top: 1px solid var(--border); padding-top: 28px; margin: 40px 0; }
.guide-related ul { padding-left: 22px; }
.guide-related a { display: inline-block; min-height: 44px; padding-block: 10px; color: var(--orange); }
.guide-scope { border-left: 3px solid var(--purple); padding: 14px 18px; margin: -16px 0 32px; color: var(--muted); background: var(--panel); }
.guide-page .quest-resources { margin-top: 40px; }
.guide-page .resource-cards { grid-template-columns: minmax(0,1fr); }
.guide-page .main-footer { margin-top: 50px; }
@media (max-width:1000px) { .guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .guide-body { grid-template-columns: minmax(0,1fr); } .guide-toc { display: none; } }
@media (max-width:600px) { .guide-header { padding: 20px; } .guide-main { padding: 20px 20px 0; } .guide-header nav { width: 100%; } .guide-header nav .button { white-space: normal; } .guide-hero { padding: 24px 0 32px; } .guide-grid { grid-template-columns: minmax(0,1fr); } .guide-card, .guide-evidence { padding: 20px; } }