*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-surface);color:var(--color-text-body);font:var(--type-body);transition:var(--t-theme);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--color-text-primary);font-family:var(--font-display);font-weight:var(--fw-regular);letter-spacing:var(--ls-display);text-wrap:balance}
p{margin:0}
a{color:var(--color-text-link);text-decoration-color:color-mix(in oklab,var(--color-text-link) 40%,transparent);text-underline-offset:.22em;transition:var(--t-hover)}
a:hover{color:var(--color-text-link-hover);text-decoration-color:currentColor}
::selection{background:var(--color-accent-quiet);color:var(--color-text-primary)}
/* Focus: the visible ring is a box-shadow (ring + page-coloured offset), but Windows High
   Contrast / forced-colors strips shadows — the transparent outline is what the OS repaints
   as a real, visible focus contour there. Keep both. */
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--sh-focus);border-radius:var(--r-xs)}
@media (forced-colors:active){:focus-visible{outline:3px solid Highlight;outline-offset:2px}}
/* Placeholders are text (WCAG 1.4.3) — pinned to a role that clears 4.5:1 on --color-field
   in every theme. Never override with --color-text-faint. */
::placeholder{color:var(--color-text-muted);opacity:1}
img{max-width:100%;display:block}