/* Reset, base typography and animated background */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    color: var(--ink);
    line-height: 1.85;
    background-color: var(--bg);
    background-image:
        radial-gradient(42rem 42rem at 88% -8%, rgba(37, 150, 190, 0.22), transparent 60%),
        radial-gradient(38rem 38rem at 4% 12%, rgba(70, 134, 180, 0.2), transparent 55%),
        radial-gradient(30rem 30rem at 70% 110%, rgba(245, 166, 35, 0.12), transparent 60%);
    background-attachment: fixed;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

h1,
h2,
h3,
p {
    margin: 0;
}

button,
select,
input {
    font: inherit;
    color: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.hidden {
    display: none !important;
}

.muted {
    color: var(--muted);
}

/* Scrollbar polish */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}