:root { color-scheme: light; --navy:#062149; --blue:#0875ed; --ink:#0b2130; --slate:#5b6e7b; --line:#dce4e9; --paper:#f5f8fa; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; line-height:1.65; }
header { border-bottom:1px solid var(--line); background:rgba(245,248,250,.94); }
nav { width:min(840px,calc(100% - 36px)); height:74px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:var(--navy); font-weight:750; text-decoration:none; }
.brand img { width:36px; height:36px; border-radius:10px; }
nav>a:last-child { color:var(--blue); font-size:14px; font-weight:700; text-decoration:none; }
main { width:min(840px,calc(100% - 36px)); margin:58px auto 90px; padding:48px; background:#fff; border:1px solid var(--line); border-radius:28px; }
h1,h2 { color:var(--navy); letter-spacing:-.035em; }
h1 { margin:0 0 8px; font-size:clamp(38px,7vw,58px); line-height:1; }
h2 { margin:36px 0 8px; font-size:22px; }
p,li { color:var(--slate); }
.updated { color:var(--blue); font-size:13px; font-weight:700; }
a { color:var(--blue); }
.callout { margin:28px 0; padding:20px; background:#e8f2ff; border-radius:16px; }
@media(max-width:600px){ main{margin-top:28px;padding:28px 22px;border-radius:22px;} }