:root {
    --color-ink: #06213f;
    --color-ink-deep: #021529;
    --color-paper: #ffffff;
    --color-mist: #eef2f6;
    --color-slate: #4d5d72;
    --color-steel: #8b9098;
    --color-raspberry: #c2307a;
    --color-raspberry-light: #f06aa8;
    --color-mint: #7fdcc4;
    --color-notice: #fff3c4;

    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;

    --text-micro: 0.75rem;
    --text-small: 0.875rem;
    --text-body: 1.0625rem;
    --text-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
    --text-title: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
    --text-heading: clamp(2.125rem, 1.3rem + 3.4vw, 4.5rem);
    --text-display: clamp(2.5rem, 1.2rem + 5.4vw, 6.5rem);
    --tracking-display: -0.045em;
    --tracking-tight: -0.015em;
    --leading-display: 0.95;
    --leading-heading: 1.02;
    --leading-body: 1.6;
    --measure: 40rem;

    --page-gutter: clamp(1rem, 4vw, 3rem);
    --page-max: 88rem;
    --section-space: clamp(6rem, 4rem + 7vw, 11.5rem);
    --stack-xs: 0.5rem;
    --stack-s: 1rem;
    --stack-m: 1.5rem;
    --stack-l: clamp(2.75rem, 2.25rem + 2.2vw, 4.5rem);
    --header-height: clamp(4.5rem, 3.9rem + 1.6vw, 5.5rem);
    --header-space: calc(0.75rem + var(--header-height) + 0.5rem);
    --frame: clamp(0.5rem, 0.25rem + 0.7vw, 0.875rem);
    --target-size: 2.75rem;

    --radius-pill: 999px;
    --radius-sheet: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    --radius-card: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --radius-small: 0.75rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 180ms;
    --duration-medium: 420ms;
    --duration-slow: 900ms;
}

:root,
[data-theme='light'],
[data-theme='mist'] {
    --bg: var(--color-paper);
    --fg: var(--color-ink);
    --fg-muted: rgba(6, 33, 63, 0.7);
    --line: rgba(6, 33, 63, 0.12);
    --line-strong: rgba(6, 33, 63, 0.28);
    --surface: var(--color-mist);
    --accent: var(--color-raspberry);
    --accent-fg: var(--color-paper);
    --solid-bg: var(--color-ink);
    --solid-fg: var(--color-paper);
    --focus: var(--color-raspberry);
    color: var(--fg);
    background-color: var(--bg);
}

[data-theme='mist'] {
    --bg: var(--color-mist);
    --surface: var(--color-paper);
}

[data-theme='dark'] {
    --bg: var(--color-ink);
    --fg: var(--color-paper);
    --fg-muted: rgba(255, 255, 255, 0.72);
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.32);
    --surface: rgba(255, 255, 255, 0.07);
    --accent: var(--color-raspberry-light);
    --accent-fg: var(--color-ink);
    --solid-bg: var(--color-paper);
    --solid-fg: var(--color-ink);
    --focus: var(--color-mint);
    color: var(--fg);
    background-color: var(--bg);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    font-family: var(--font-family);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    display: block;
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
    text-wrap: balance;
}

p {
    margin: 0;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

b,
strong {
    font-weight: var(--weight-bold);
}

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

button {
    cursor: pointer;
}

[type='search'] {
    -webkit-appearance: textfield;
    appearance: textfield;
}

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

:focus-visible {
    outline: 3px solid var(--focus, var(--color-raspberry));
    outline-offset: 3px;
}

::selection {
    color: var(--color-paper);
    background-color: var(--color-raspberry);
}

.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
    word-wrap: normal !important;
}

#primary[tabindex='-1']:focus {
    outline: 0;
}

.page-inner {
    width: min(100% - 2 * var(--page-gutter), var(--page-max));
    margin-inline: auto;
}

.sheet {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--radius-sheet) * -1);
    padding-block: var(--section-space) calc(var(--section-space) + var(--radius-sheet));
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}

.section-header {
    display: grid;
    gap: var(--stack-s);
    margin-bottom: var(--stack-l);
}

.section-title {
    font-size: var(--text-heading);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-heading);
    hyphens: auto;
}

.section-lead {
    max-width: var(--measure);
    color: var(--fg-muted);
    font-size: var(--text-lead);
    line-height: 1.5;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--target-size);
    padding: 0.375rem 0.375rem 0.375rem 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    color: var(--fg);
    background: transparent;
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease,
        transform var(--duration-medium) var(--ease-out);
}

.pill:active {
    transform: scale(0.97);
}

.pill.is-solid {
    border-color: var(--solid-bg);
    color: var(--solid-fg);
    background-color: var(--solid-bg);
}

.pill.is-accent {
    border-color: var(--accent);
    color: var(--accent-fg);
    background-color: var(--accent);
}

.pill-icon {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border-radius: 50%;
    color: var(--solid-fg);
    background-color: var(--solid-bg);
}

.pill.is-solid .pill-icon,
.pill.is-accent .pill-icon {
    color: currentColor;
    background-color: color-mix(in srgb, currentColor 16%, transparent);
}

.pill-icon svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--duration-medium) var(--ease-out);
}

.pill-icon svg + svg {
    position: absolute;
    transform: translateX(-170%);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--target-size);
    padding: 0.5rem 1.125rem 0.5rem 0.875rem;
    border-radius: var(--radius-pill);
    color: var(--fg);
    background-color: var(--color-paper);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--line);
    transition:
        background-color var(--duration-fast) ease,
        color var(--duration-fast) ease,
        box-shadow var(--duration-fast) ease;
}

.chip .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent);
    transition: color var(--duration-fast) ease;
}

@media (hover: hover) {
    .chip:hover {
        color: var(--color-paper);
        background-color: var(--color-ink);
        box-shadow: inset 0 0 0 1px var(--color-ink);
    }

    .chip:hover .icon {
        color: var(--color-raspberry-light);
    }

    .pill:hover {
        border-color: var(--fg);
    }

    .pill.is-solid:hover,
    .pill.is-accent:hover {
        border-color: transparent;
    }

    .pill:hover .pill-icon svg:first-child {
        transform: translateX(170%);
    }

    .pill:hover .pill-icon svg + svg {
        transform: none;
    }
}

.blur-text-word {
    display: inline-block;
    animation: blur-text-in 1.1s var(--ease-out) var(--word-delay, 0ms) both;
}

.blur-text-word:nth-of-type(2) {
    --word-delay: 120ms;
}

.blur-text-word:nth-of-type(3) {
    --word-delay: 240ms;
}

.blur-text-word:nth-of-type(4) {
    --word-delay: 360ms;
}

.blur-text-word:nth-of-type(5) {
    --word-delay: 480ms;
}

.blur-text-word:nth-of-type(6) {
    --word-delay: 600ms;
}

.blur-text-word:nth-of-type(n + 7) {
    --word-delay: 720ms;
}

@keyframes blur-text-in {
    0% {
        opacity: 0;
        filter: blur(14px);
        transform: translateY(-0.35em);
    }

    55% {
        opacity: 0.6;
        filter: blur(4px);
        transform: translateY(0.04em);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

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