:root {
    color-scheme: light;
    --font-display: "Manrope", Arial, sans-serif;
    --font-nav: var(--font-display);
    --font-eyebrow: var(--font-nav);
    --font-serif: var(--font-display);
    --blue-ink: #3232D5;
    --blue-quiet: #325AAC;
    --blue-electric: #3283FE;
    --paper: #F4F4F2;
    --paper-2: #E8E7E2;
    --paper-3: #D7D5CD;
    --text: #1A1A1A;
    --text-soft: #5E5B55;
    --line: rgba(26, 26, 26, 0.18);
    --line-strong: rgba(26, 26, 26, 0.42);
    --surface: rgba(244, 244, 242, 0.82);
    --surface-strong: rgba(232, 231, 226, 0.92);
    --accent: var(--blue-ink);
    --accent-2: var(--blue-electric);
    --shadow: 0 2rem 5rem rgba(26, 26, 26, 0.13);
    --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-raw: cubic-bezier(0.77, 0, 0.175, 1);
    --duration-slow: 0.8s;
    --duration-long: 1.4s;
    --header-height: 5.5rem;
    --page-x: clamp(1rem, 5cqi, 5.5rem);
    --space-1: clamp(0.75rem, 1.5cqi, 1.5rem);
    --space-2: clamp(1.25rem, 2.6cqi, 3rem);
    --space-3: clamp(2.5rem, 5cqi, 6rem);
    --space-4: clamp(4rem, 9cqi, 11rem);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0A0A0F;
    --paper-2: #11121A;
    --paper-3: #191B26;
    --text: #EAEAEA;
    --text-soft: #AAAEB8;
    --line: rgba(234, 234, 234, 0.16);
    --line-strong: rgba(234, 234, 234, 0.34);
    --surface: rgba(10, 10, 15, 0.74);
    --surface-strong: rgba(17, 18, 26, 0.92);
    --accent: #3283FE;
    --accent-2: #3232D5;
    --shadow: 0 2rem 7rem rgba(0, 0, 0, 0.42);
}

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

html {
    min-height: 100%;
    background: var(--paper);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    background: linear-gradient(180deg, var(--paper), var(--paper-2));
    color: var(--text);
    font-family: var(--font-display);
    transition: background-color var(--duration-slow) var(--ease-lux), color var(--duration-slow) var(--ease-lux);
    overflow-x: hidden;
    container-type: inline-size;
}

body::before,
body::after {
    position: fixed;
    inset: auto;
    z-index: -2;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    pointer-events: none;
    content: "";
    filter: blur(4.5rem);
    opacity: 0;
    transition: opacity var(--duration-long) var(--ease-lux);
}

body::before {
    top: -7rem;
    right: -8rem;
    background: rgba(50, 131, 254, 0.46);
}

body::after {
    bottom: 12rem;
    left: -10rem;
    background: rgba(50, 50, 213, 0.34);
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after { opacity: 0.28; }

::selection { background: var(--accent); color: #FFFFFF; }
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 58%, var(--text-soft)) color-mix(in srgb, var(--paper-3) 72%, transparent);
}

::-webkit-scrollbar {
    width: 0.72rem;
    height: 0.72rem;
}

::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--paper-3) 72%, transparent);
}

::-webkit-scrollbar-thumb {
    border: 0.18rem solid color-mix(in srgb, var(--paper-3) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 58%, var(--text-soft));
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 0.35rem; }