:root { color-scheme: light; --ink:#202124; --muted:#5d626b; --blue:#125bdf; --line:#dfe3e9; --soft:#f3f6fb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
a { color:var(--blue); text-underline-offset:3px; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.skip-link { position:absolute; left:20px; top:-80px; z-index:10; background:#fff; padding:8px 12px; }
.skip-link:focus { top:12px; }
.site-header,.site-footer { width:min(1200px,calc(100% - 64px)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-header { min-height:78px; border-bottom:1px solid var(--line); }
.site-header nav,.site-footer { font-size:14px; }
.site-header nav { display:flex; gap:28px; }
.site-header nav a { color:var(--ink); text-decoration:none; }
.site-header nav a[aria-current="page"] { color:var(--blue); }
.site-header nav a:hover,.site-footer a:hover { text-decoration:underline; }
.wordmark { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:22px; font-weight:650; letter-spacing:-.9px; text-decoration:none; white-space:nowrap; }
.brand-symbol { display:inline-flex; flex-direction:column; gap:3px; }
.brand-symbol i { display:block; width:18px; height:4px; background:var(--ink); }
.brand-symbol i:last-child { width:12px; background:var(--blue); }
.eyebrow { margin:0 0 15px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(42px,5vw,72px); line-height:1.07; letter-spacing:-.045em; font-weight:620; }
h2 { font-size:clamp(30px,3vw,42px); line-height:1.16; letter-spacing:-.035em; font-weight:620; }
.guide-hero,.article-top { max-width:1100px; margin:0 auto; padding:80px 32px 68px; }
.guide-hero h1 { max-width:850px; margin-bottom:25px; }
.guide-hero > p:not(.eyebrow) { max-width:720px; color:var(--muted); font-size:20px; line-height:1.55; }
.guide-notice,.evidence-note { background:var(--soft); border-left:3px solid var(--blue); padding:18px 22px; margin-top:35px; font-size:14px; }
.guide-notice p { margin:5px 0 0; color:#454a54; }
.guide-content { border-top:1px solid var(--line); }
.guide-group { max-width:1100px; margin:0 auto; padding:75px 32px 85px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:280px 1fr; gap:60px; }
.group-heading p:last-child { color:var(--muted); font-size:15px; }
.guide-list { list-style:none; padding:0; margin:0; }
.guide-list li { border-top:1px solid var(--line); }
.guide-list li:last-child { border-bottom:1px solid var(--line); }
.guide-list a { display:grid; grid-template-columns:38px 1fr 18px; gap:18px; align-items:start; padding:19px 0 20px; text-decoration:none; color:var(--ink); }
.guide-list a:hover strong { color:var(--blue); text-decoration:underline; }
.guide-number { color:var(--blue); font-size:13px; font-weight:700; }
.guide-list strong { display:block; font-size:18px; font-weight:610; line-height:1.35; }
.guide-list small { display:block; color:var(--muted); font-size:14px; line-height:1.5; margin-top:5px; }
.guide-cta { max-width:1100px; margin:75px auto 90px; padding:42px 48px; background:#1055d7; color:#fff; }
.guide-cta h2 { margin-bottom:12px; }
.guide-cta p { max-width:680px; color:#e4ecff; }
.guide-cta a { display:inline-flex; gap:25px; align-items:center; color:#fff; font-weight:650; }
.breadcrumbs { display:flex; align-items:center; gap:11px; font-size:13px; margin-bottom:54px; color:var(--muted); text-transform:capitalize; }
.breadcrumbs a { color:var(--muted); }
.article-top { padding-bottom:55px; }
.article-top h1 { max-width:900px; font-size:clamp(40px,5vw,66px); margin-bottom:22px; }
.article-summary { max-width:760px; font-size:20px; line-height:1.5; color:var(--muted); }
.evidence-note { display:flex; flex-wrap:wrap; gap:8px 22px; max-width:790px; margin-top:30px; }
.evidence-note strong { color:#104bbb; }
.article-layout { border-top:1px solid var(--line); max-width:1100px; padding:60px 32px 0; margin:auto; display:grid; grid-template-columns:minmax(0,740px) 210px; gap:70px; }
.guide-body { min-width:0; }
.guide-body h2 { margin:55px 0 18px; font-size:28px; scroll-margin-top:24px; }
.guide-body h2:first-child { margin-top:0; }
.guide-body h3 { font-size:20px; margin:32px 0 10px; }
.guide-body p,.guide-body li { font-size:16px; line-height:1.75; }
.guide-body li { margin-bottom:10px; padding-left:4px; }
.guide-body ol,.guide-body ul { padding-left:26px; }
.guide-body strong { color:#1b2028; }
.guide-body blockquote { margin:25px 0; padding:5px 20px; border-left:3px solid var(--blue); background:var(--soft); }
.guide-body pre { padding:19px 22px; overflow-x:auto; background:#182234; color:#f5f8ff; border-radius:5px; font-size:14px; line-height:1.6; }
.guide-body code { overflow-wrap:anywhere; background:#f1f3f7; padding:2px 4px; font-size:.9em; }
.guide-body pre code { background:none; padding:0; color:inherit; overflow-wrap:normal; }
.article-aside { align-self:start; position:sticky; top:30px; border-top:2px solid var(--blue); padding-top:20px; font-size:14px; color:var(--muted); }
.article-aside p:last-child { margin-top:25px; }
.guide-pager { max-width:1100px; padding:60px 32px 0; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.guide-pager a { display:block; border-top:1px solid var(--line); padding:18px 0; text-decoration:none; font-weight:600; }
.guide-pager a:last-child { text-align:right; }
.guide-pager a span { display:block; color:var(--muted); font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:.08em; }
.site-footer { border-top:1px solid var(--line); padding-block:28px; color:var(--muted); }
@media (max-width:800px) { .site-header,.site-footer { width:calc(100% - 40px); } .guide-hero,.article-top { padding:55px 20px; } .guide-group { display:block; padding:55px 20px; } .group-heading { margin-bottom:28px; } .article-layout { display:block; padding:45px 20px 0; } .article-aside { position:static; margin-top:45px; } .guide-cta { margin:55px 20px 65px; padding:35px 25px; } .guide-pager { padding:45px 20px 0; } }
@media (max-width:560px) { .site-header { min-height:66px; } .wordmark { font-size:18px; } .site-header nav { gap:16px; font-size:12px; } .guide-hero > p:not(.eyebrow),.article-summary { font-size:17px; } .guide-list a { grid-template-columns:30px 1fr 15px; gap:10px; } .guide-list strong { font-size:16px; } .guide-pager { gap:12px; } .site-footer { flex-wrap:wrap; gap:12px; } }