:root { --ink: #0a1f5c; --logo: #1a73e8; --pink: #ff3d8b; --brand: "Helvetica Neue", Helvetica, Arial, sans-serif; --sans: Verdana, Tahoma, Geneva, sans-serif; }
* { box-sizing: border-box; }
html { background: #fff; color: var(--ink); font: 15px/1.65 var(--sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0 18px; }
.page { max-width: 700px; margin: 0 auto; padding: 18px 0 40px; }
.wordmark { margin: 0; line-height: 0; color: var(--logo); }
.wordmark a { display: inline-block; color: inherit; text-decoration: none; }
.logo { display: block; height: min(44px, calc((100vw - 36px) / 10.5)); width: auto; overflow: visible; fill: none; stroke: currentColor; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-linecap: square; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dot { display: inline-block; width: 0.38em; height: 0.38em; margin: 0 0.45em; border-radius: 50%; background: var(--ink); opacity: 0.55; vertical-align: 0.08em; }
h2 { margin: 32px 0 6px; font: 800 20px/1.25 var(--brand); letter-spacing: -0.01em; }
h3 { margin: 18px 0 4px; font: 700 15px/1.3 var(--sans); }
h1.doc { margin: 28px 0 4px; font: 800 30px/1.15 var(--brand); letter-spacing: -0.02em; }
p, ul { margin: 8px 0; } ul { padding-left: 20px; } li { margin: 4px 0; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration: underline; }
.meta { color: #4a5a85; font-size: 13px; margin: 0 0 18px; }
.box { border: 2px solid var(--ink); padding: 10px 14px; box-shadow: 4px 4px 0 var(--ink); margin: 16px 0; background: #f3f7ff; }
footer { max-width: 700px; margin: 0 auto; border-top: 2px solid var(--ink); padding: 14px 0 28px; text-align: center; font-size: 12px; }
:focus-visible { outline: 3px solid #2f6bff; outline-offset: 2px; }
.spaced { margin-top: 48px; }