* {
    box-sizing: border-box;
    margin: 0;
}

html, body {
    height: 100%;
    /* гасит резиновый отскок и «потянуть, чтобы обновить» на тачах */
    overscroll-behavior: none;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
img { display: block; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sprite { display: none; }

svg:has(use) {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
}