/* Design B for the server-rendered guides. Mirrors the app's tokens. */
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--blue:#163cff;--yellow:#e9ff57;--paper:#f1f0e9;--card:#fbfaf5;--ink:#161616;--muted:#55564f;--line:#c9c8c0;--mono:'IBM Plex Mono',ui-monospace,monospace;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 'Space Grotesk',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px}a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
::selection{background:var(--yellow);color:var(--ink)}
.g-wrap{max-width:1320px;margin:0 auto;padding:0 28px}
.g-skip{position:fixed;left:16px;top:-100px;z-index:9;background:var(--yellow);padding:12px 18px;border:1px solid var(--ink)}.g-skip:focus{top:12px}
.g-header{background:var(--blue);color:#fff;border-bottom:1px solid #ffffff55}
.g-header .g-wrap{height:84px;display:flex;align-items:center;gap:30px}
.g-logo{display:flex;align-items:center;font-size:2.4rem;line-height:1;letter-spacing:-.075em;font-weight:700;text-decoration:none}
.g-logo span{font-weight:400}.g-logo i{font-style:normal;font-weight:400;color:var(--yellow);margin-left:8px;letter-spacing:0;font-size:.9em}
.g-header nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:.95rem}
.g-header nav a{text-decoration:none}.g-header nav a:not(.g-sell):hover{text-decoration:underline}
.g-header :focus-visible,.g-band :focus-visible,.g-footer :focus-visible{outline-color:var(--yellow)}
.g-sell{background:var(--yellow);color:var(--ink);padding:11px 15px;font:600 .72rem/1 var(--mono);letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.g-sell:hover{background:#fff}
.g-band{background:var(--blue);color:#fff;padding:38px 0 46px}
.g-crumbs{font:.68rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.035em;margin-bottom:26px;color:#dfe4ff}
.g-crumbs a{text-decoration:none}.g-crumbs a:hover{text-decoration:underline}
.g-kicker{font:500 .7rem/1.5 var(--mono);letter-spacing:.035em;text-transform:uppercase;color:var(--yellow);margin:0 0 14px}
.g-band h1{font-size:clamp(2.4rem,5.6vw,5rem);line-height:.98;letter-spacing:-.065em;font-weight:700;margin:0 0 20px;max-width:15em}
.g-band-lead{font-size:1.15rem;max-width:40em;margin:0;color:#e9ecff}
.g-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;padding-top:44px;padding-bottom:64px;align-items:start}
.g-body{max-width:44em}
.g-body h2{font-size:1.9rem;letter-spacing:-.05em;line-height:1.1;font-weight:500;margin:44px 0 14px;padding-top:20px;border-top:1px solid var(--ink)}
.g-body p,.g-body li{color:#2c2d29}
.g-body ul,.g-body ol{padding-left:1.2em}.g-body li{margin:8px 0}
.g-lead{font-size:1.22rem;line-height:1.55;color:var(--ink)!important;margin-top:0}
.g-steps{list-style:none;padding:0!important;counter-reset:step;border-top:2px solid var(--ink)}
.g-steps li{counter-increment:step;position:relative;padding:16px 0 16px 52px;margin:0!important;border-bottom:1px solid var(--line)}
.g-steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:16px;font:.75rem/1.9 var(--mono);color:var(--blue)}
.g-callout{background:var(--yellow);border:1px solid var(--ink);padding:18px 22px;margin:24px 0}
.g-callout p{margin:6px 0}
.g-inline-cta a{display:inline-flex;gap:14px;background:var(--ink);color:var(--yellow);text-decoration:none;padding:14px 18px;font:600 .74rem/1 var(--mono);letter-spacing:.035em;text-transform:uppercase}
.g-inline-cta a:hover{background:var(--blue);color:#fff}
.g-sources{margin-top:48px;padding:22px 0 0;border-top:2px solid var(--ink);font-size:.86rem}
.g-sources h2{border:0;padding:0;margin:0 0 10px;font-size:1.2rem}
.g-sources p{color:var(--muted)}
.g-aside{position:sticky;top:24px}
.g-poster{background:var(--yellow);border:1px solid var(--ink);padding:22px}
.g-poster .g-zero{font-size:5rem;line-height:1;letter-spacing:-.09em;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:14px}
.g-zero span{writing-mode:vertical-rl;font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.g-poster p:not(.g-zero){margin:0 0 18px;font-size:.95rem}
.g-poster a{display:flex;justify-content:space-between;border:1px solid var(--ink);padding:13px 15px;text-decoration:none;font:600 .7rem/1.2 var(--mono);letter-spacing:.035em;text-transform:uppercase}
.g-poster a:hover{background:var(--ink);color:var(--yellow)}
.g-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink)}
section.g-index{margin-top:44px;margin-bottom:56px}
.g-card{display:flex;flex-direction:column;padding:24px 28px 26px 0;border-bottom:1px solid var(--line);text-decoration:none}
.g-card:nth-child(2n){padding-left:28px;padding-right:0;border-left:1px solid var(--line)}
.g-num{font:.68rem/1.5 var(--mono);letter-spacing:.035em;text-transform:uppercase;color:var(--blue)}
.g-card h2{font-size:1.75rem;line-height:1.1;letter-spacing:-.05em;font-weight:500;margin:10px 0}
.g-card p{color:var(--muted);font-size:.95rem;margin:0 0 16px}
.g-more{margin-top:auto;font-size:.88rem;border-bottom:1px solid var(--line);align-self:flex-start;padding-bottom:4px}
.g-card:hover h2,.g-card:hover .g-more{color:var(--blue)}
.g-related{border-top:1px solid var(--ink);padding:40px 0 56px}
.g-related h2#related-title{font-size:2.6rem;letter-spacing:-.065em;font-weight:500;margin:0 0 22px}
.g-related .g-index{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-related .g-card,.g-related .g-card:nth-child(2n){padding:22px 22px 24px 0;border-left:0}
.g-related .g-card+.g-card{padding-left:22px;border-left:1px solid var(--line)}
.g-closing{background:var(--yellow);border-top:1px solid var(--ink);padding:28px 0}
.g-closing .g-wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.g-closing p{margin:0;font-size:clamp(1.6rem,3.6vw,3rem);letter-spacing:-.06em;font-weight:500;line-height:1.05}
.g-closing a{background:var(--ink);color:var(--yellow);padding:16px 20px;text-decoration:none;font:600 .74rem/1 var(--mono);letter-spacing:.035em;text-transform:uppercase}
.g-footer{background:var(--ink);color:var(--paper);padding:34px 0 30px}
.g-footer .g-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g-footer .g-logo{font-size:2rem}
.g-footer p{font:.6rem/1.6 var(--mono);letter-spacing:.035em;text-transform:uppercase;color:#c9c8c0;margin:12px 0 0}
.g-footer nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;font-size:.86rem;align-content:center}
.g-footer nav a{text-decoration:none}.g-footer nav a:hover{color:var(--yellow)}
.g-footer .g-footer-end{grid-column:1/-1;border-top:1px solid #ffffff33;padding-top:18px}
@media(max-width:900px){.g-layout{grid-template-columns:1fr;gap:36px}.g-aside{position:static}.g-related .g-index{grid-template-columns:1fr}.g-related .g-card+.g-card{padding-left:0;border-left:0}}
@media(max-width:700px){
body{font-size:16px}.g-wrap{padding:0 20px}
.g-header .g-wrap{height:66px;gap:12px}.g-logo{font-size:1.9rem}.g-header nav{gap:14px;font-size:.82rem}.g-header nav a:first-child{display:none}.g-sell{padding:9px 10px;font-size:.58rem}.g-sell span{display:none}
.g-band{padding:26px 0 32px}.g-crumbs{margin-bottom:16px;font-size:.58rem}.g-band h1{font-size:2.3rem}.g-band-lead{font-size:1rem}
.g-layout{padding-top:28px;padding-bottom:44px}.g-body h2{font-size:1.5rem;margin-top:34px}.g-lead{font-size:1.08rem}
.g-index{grid-template-columns:1fr}.g-card,.g-card:nth-child(2n){padding:20px 0;border-left:0}.g-card h2{font-size:1.45rem}
.g-related h2#related-title{font-size:2rem}
.g-footer .g-wrap{grid-template-columns:1fr}.g-footer nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){.g-header nav a[href="/guides"]{display:none}}