*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--font-sans)}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.015em}
p{margin:0}
a{color:var(--link)}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.on-navy :focus-visible{outline-color:#fff}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.7rem 1.1rem;background:var(--btn);color:var(--on-btn);border-radius:var(--radius-sm);font-weight:600}
.skip-link:focus{top:calc(env(safe-area-inset-top,0px) + .75rem)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.code,.codes li{font:500 .88rem var(--font-mono);padding:.15rem .55rem;border:1px solid var(--line);border-radius:6px;background:var(--sky)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}