*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: var(--mk-8); }
body { margin: 0; color: var(--mk-ink); background: var(--mk-white); font: var(--mk-body)/1.6 var(--mk-font); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: var(--mk-h1); letter-spacing: -.035em; }
h2 { font-size: var(--mk-h2); letter-spacing: -.03em; }
h3 { font-size: var(--mk-h3); }
h4 { font-size: var(--mk-h4); }
p { max-inline-size: 70ch; }
a { text-decoration: none; color: inherit; text-underline-offset: .25em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .15em; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button, input, select, textarea { max-inline-size: 100%; }
img, svg, video { max-inline-size: 100%; block-size: auto; vertical-align: middle; }
:focus-visible { outline: var(--mk-focus) solid var(--mk-blue); outline-offset: 4px; }
.surface-dark :focus-visible, .button:focus-visible { outline-color: var(--mk-white); box-shadow: 0 0 0 7px var(--mk-ink); }
[hidden] { display: none !important; }
.skip-link { position: absolute; inset-inline-start: var(--mk-4); inset-block-start: var(--mk-4); z-index: 2; padding: var(--mk-3) var(--mk-4); background: var(--mk-white); color: var(--mk-ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    :root { --mk-motion: 0ms; }
    html { scroll-behavior: auto; }
}