/* The page's ground rules: box model, the body type, focus, selection, scrollbars, reduced motion. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface-0); color: var(--text); font: var(--t-body); -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
a { color: inherit; }
code, kbd, pre { font-family: var(--code); }
::selection { background: rgba(168, 85, 247, .35); }
[hidden] { display: none !important; }

/* one focus ring, for the keyboard only */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); }
/* inside a field the field shows focus itself */
input:focus-visible, textarea:focus-visible { box-shadow: none; }

/* thin scrollbars in the lilac hairline colour */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* the first thing a keyboard reaches: straight to the page's content */
.skiplink { position: fixed; z-index: var(--z-toast); left: var(--s-3); top: var(--s-3); padding: 10px 16px; border-radius: var(--r-2); background: var(--surface-3); color: var(--white); font: var(--t-label); text-decoration: none; transform: translateY(-200%); transition: transform var(--d-2) var(--ease); }
.skiplink:focus-visible { transform: none; }
main:focus { outline: none; }