body { background: #101e26; color: #e5ecec; }
.guide-header, .guide-footer { max-width: 1100px; margin: auto; padding: 24px; }
.guide-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #30444d; }
.guide-header > a { font: 600 28px "Barlow Condensed", sans-serif; text-decoration: none; }
.guide-header b { color: #edc36c; }
.guide-header nav { display: flex; gap: 20px; flex-wrap: wrap; }
.guide-header a, .guide-footer a { display: inline-flex; min-height: 44px; align-items: center; }
.guide { width: min(740px, calc(100% - 48px)); margin: 56px auto 80px; }
.guide h1 { font: 600 clamp(42px, 6vw, 72px)/1.06 "Barlow Condensed", sans-serif; text-wrap: balance; margin: 0 0 28px; }
.guide h2 { font: 600 30px/1.15 "Barlow Condensed", sans-serif; margin: 48px 0 16px; }
.guide p { font-size: 18px; line-height: 1.8; color: #c3d0d3; }
.guide .guide-lead { font-size: 22px; color: #e5ecec; line-height: 1.6; }
.guide-toc { display: flex; flex-direction: column; padding: 24px 0; margin-top: 32px; border-block: 1px solid #30444d; }
.guide-toc a, .guide aside a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 16px; }
.guide a, .guide-footer a { text-underline-offset: 4px; }
.guide-source, .guide-footer p { font-size: 14px !important; color: #9bafb8; }
.guide-footer { border-top: 1px solid #30444d; }
.guide section { scroll-margin-top: 24px; }
a:focus-visible { outline: 2px solid #edc36c; outline-offset: 4px; }
::selection { background: #edc36c; color: #101e26; }
@media(max-width: 480px) { .guide { margin-top: 36px; } .guide p { font-size: 17px; } .guide .guide-lead { font-size: 20px; } }