:root { color-scheme: dark; --ink:#e4eaf4; --muted:#a3b2c9; --blue:#8bb8ff; --line:#2a3549; --paper:#0c121e; --wash:#141e2e; }
* { box-sizing:border-box; }
html { scroll-padding-top:92px; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 "Segoe UI",Arial,sans-serif; }
a { color:var(--blue); text-underline-offset:3px; }
a:hover { color:#c7dcff; }
a:focus-visible,summary:focus-visible { outline:3px solid #659dff; outline-offset:4px; }
.skip { position:absolute; top:-100px; left:16px; background:var(--wash); padding:12px; z-index:10; }
.skip:focus { top:8px; }
.masthead { max-width:1440px; padding:48px 40px 30px; margin:auto; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-size:clamp(32px,4vw,52px); line-height:1.13; letter-spacing:-.035em; margin:0 0 16px; }
.intro { max-width:760px; font-size:19px; margin:0; color:var(--muted); }
.version { display:inline-block; margin:20px 0 0; padding:5px 10px; background:var(--wash); border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:13px; }
nav { position:sticky; top:0; background:#0c121e; border-block:1px solid var(--line); z-index:5; }
.nav-inner { display:flex; gap:25px; max-width:1440px; padding:15px 40px; margin:auto; overflow-x:auto; }
nav a { flex:none; text-decoration:none; font-size:14px; font-weight:600; }
main { padding-bottom:70px; }
.chapter { max-width:1440px; margin:auto; padding:64px 40px 0; }
.chapter+.chapter { margin-top:48px; border-top:1px solid var(--line); }
h2 { font-size:32px; line-height:1.25; letter-spacing:-.02em; margin:0 0 20px; }
h3 { font-size:23px; line-height:1.35; margin:44px 0 16px; }
h4 { font-size:18px; margin:24px 0 10px; }
p { margin:0 0 18px; }
.measure { max-width:830px; }
ul,ol { padding-left:24px; margin:15px 0 22px; }
li { margin:9px 0; }
strong { font-weight:650; }
.step-label,.chapter-number { color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:9px; }
.step { padding-top:42px; margin-top:38px; border-top:1px solid var(--line); }
.step h3 { margin:0 0 20px; font-size:26px; }
.pair { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:46px; margin:24px 0 32px; }
.pair .copy { max-width:650px; }
.pair .copy h3:first-child { margin-top:0; }
.pair.dialog { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.pair.llm { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
figure { margin:26px 0 30px; min-width:0; }
.pair figure { margin:0; }
figure a { display:block; }
figure img { width:100%; height:auto; display:block; border:1px solid #253147; border-radius:9px; }
figcaption { margin-top:12px; color:var(--muted); font-size:14px; line-height:1.55; }
.shot-dialog { max-width:670px; margin-inline:auto; }
.shot-window { max-width:1020px; margin-inline:auto; }
.shot-wide { width:100%; }
.map-wrap { width:min(2720px,100%); margin:28px auto 32px; padding-inline:12px; }
.map-wrap figure { margin:0; }
.map-wrap img { border:0; border-radius:0; }
.map-wrap figcaption { padding-inline:20px; }
.map-reading { font-size:14px; color:var(--muted); }
.warning { margin:20px 0; border-left:3px solid #c89d41; padding:9px 14px; background:#272217; color:#ebdbb6; font-size:15px; line-height:1.5; max-width:900px; }
.note { margin:20px 0; padding:14px 18px; border-left:3px solid #88a9e5; background:var(--wash); }
.jump-links { display:flex; flex-wrap:wrap; gap:10px 24px; padding:18px 0 3px; font-size:15px; }
.reference { width:100%; border-collapse:collapse; font-size:16px; margin:20px 0 30px; }
.reference th,.reference td { padding:13px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.reference th { background:var(--wash); font-weight:650; }
.reference td:first-child { width:28%; font-weight:650; }
details { border:1px solid var(--line); border-radius:7px; margin:24px 0; padding:17px 22px; }
summary { cursor:pointer; font-weight:650; }
details[open] summary { margin-bottom:18px; }
details p:last-child { margin-bottom:0; }
dl { margin:18px 0; }
dt { font-weight:650; margin-top:16px; }
dd { margin:4px 0 0; }
blockquote { margin:20px 0; padding:18px 24px; background:var(--wash); border-left:3px solid #8eabc9; font-size:16px; }
pre { padding:20px; border-radius:6px; background:#101724; color:#e6eefb; overflow-x:auto; line-height:1.5; }
code { font-family:Consolas,monospace; font-size:.9em; }
.fees { max-width:1000px; }
.fees h2 { font-size:34px; }
.fees ol>li { margin-block:18px; }
footer { border-top:1px solid var(--line); padding:28px 40px; color:var(--muted); text-align:center; font-size:13px; }
@media (max-width:1050px) {
 .pair,.pair.dialog,.pair.llm { grid-template-columns:1fr; gap:24px; }
 .pair .copy { max-width:900px; }
 .pair figure { width:100%; margin-inline:auto; }
 .chapter,.masthead { padding-inline:24px; }
 .nav-inner { padding-inline:24px; gap:22px; }
}
@media (max-width:600px) {
 body { font-size:16px; }
 .masthead { padding:30px 18px 24px; }
 .chapter { padding:38px 18px 0; }
 .chapter+.chapter { margin-top:35px; }
 h2,.fees h2 { font-size:27px; }
 h3,.step h3 { font-size:22px; }
 .map-wrap { padding-inline:6px; }
 .map-wrap figcaption { padding-inline:12px; }
 .reference { font-size:14px; }
 .reference th,.reference td { padding:11px 9px; overflow-wrap:anywhere; }
 .reference td:first-child { width:33%; }
 details { padding:15px; }
 .step { padding-top:30px; margin-top:28px; }
}
@media print {
 nav,.skip,.version,.map-reading { display:none; }
 body { font-size:11pt; }
 .chapter { padding-top:26px; }
 .chapter+.chapter { margin-top:28px; }
 .pair,.pair.dialog,.pair.llm { grid-template-columns:1fr 1fr; gap:24px; }
 figure { break-inside:avoid; }
 h2,h3,h4 { break-after:avoid; }
 .map-wrap { padding:0; }
}