:root {
    color-scheme: light dark;
    /* @link https://tailwindcss.com/docs/colors */
    --neutral-50: oklch(98.5% 0 0);
    --neutral-100: oklch(97% 0 0);
    --neutral-200: oklch(92.2% 0 0);
    --neutral-300: oklch(87% 0 0);
    --neutral-400: oklch(70.8% 0 0);
    --neutral-500: oklch(55.6% 0 0);
    --neutral-600: oklch(43.9% 0 0);
    --neutral-700: oklch(37.1% 0 0);
    --neutral-800: oklch(26.9% 0 0);
    --neutral-900: oklch(20.5% 0 0);
    --neutral-950: oklch(14.5% 0 0);
    /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --font-size--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
    --font-size--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
    --font-size-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --font-size-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
    --font-size-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
    --font-size-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
    --font-size-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
    --font-size-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
    --content-width-tight: 20ch;
    --content-width-small: 45ch;
    --content-width-normal: 60ch;
    --content-width-wide: 72ch;
    --header-width-1: 20ch;
    --header-width-2: 25ch;
    --header-width-3: 35ch;
}

html {
    box-sizing: border-box;
}

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

:where(:not(dialog)) {
    margin: 0;
}

:where(html) {
    block-size: 100%;
    font-family: system-ui, sans-serif;
    line-height: 1.4;
    -webkit-text-size-adjust: none;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

:where(body) {
    color: light-dark(var(--neutral-950), var(--neutral-100));
    background-color: light-dark(var(--neutral-50), black);
    min-block-size: 100%;
}

:where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
    font-weight: bold;
    line-height: 1.25;
}

:where(h1) {
    font-size: var(--font-size-5);
    max-inline-size: var(--header-width-1);
}

:where(h2) {
    font-size: var(--font-size-4);
    max-inline-size: var(--header-width-2);
}

:where(h3) {
    font-size: var(--font-size-3);
}

:where(h4) {
    font-size: var(--font-size-2);
}

:where(h5) {
    font-size: var(--font-size-1);
}

:where(:not(fieldset, progress, meter)) {
    border-width: 0;
    border-style: solid;
    background-origin: border-box;
    background-repeat: no-repeat;
}

:where(:not(:active):focus-visible) {
    outline-offset: 2px;
}

:where(h3, h4, h5, h6, dt) {
    max-inline-size: var(--header-width-3);
}

:where(p, ul, ol, dl, h6) {
    font-size: var(--font-size-0);
}

:where(a, u, ins, abbr) {
    text-underline-offset: 1px;

    @supports (-moz-appearance: none) {
        text-underline-offset: 2px;
    }
}

:where(a[href],
    area,
    button,
    input:not([type="text"],
        [type="email"],
        [type="number"],
        [type="password"],
        [type=""],
        [type="tel"],
        [type="url"]),
    label[for],
    select,
    summary,
    [tabindex]:not([tabindex*="-"], pre)) {
    cursor: pointer;
}

:where(a[href],
    area,
    button,
    input,
    label[for],
    select,
    summary,
    textarea,
    [tabindex]:not([tabindex*="-"])) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:where(a) {
    &:where([href]) {
        text-decoration-color: cornflowerblue;

        &:where(:visited) {
            text-decoration-color: mediumpurple;
        }
    }

    &:where(:not(:hover)) {
        text-decoration: inherit;
    }
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
}

:where(img, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
}

:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
    font: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
}

::placeholder {
    color: var(--neutral-700);
    opacity: 0.75;
}

.background {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Layer 1: Grid SVG pattern */
    background-image:
        url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="none" stroke="%23222" stroke-width="0.5" opacity="0.9" /></svg>');
    background-repeat: repeat;
    background-size: 5vw;

    /* Mask fade: visible top -> transparent bottom */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 98%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 98%);
}

.background::after {
    content: "";
    position: absolute;
    inset: 0;
    filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"><feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="2" seed="12" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence><feSpecularLighting surfaceScale="30" specularConstant="1" specularExponent="20" lighting-color="%23fefefe" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting"><feDistantLight azimuth="3" elevation="95"></feDistantLight></feSpecularLighting></filter></svg>#nnnoise-filter');
    opacity: 0.4;
    pointer-events: none;
}