@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("fonts/m-plus-rounded-1c-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("fonts/m-plus-rounded-1c-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("fonts/m-plus-rounded-1c-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("fonts/m-plus-rounded-1c-latin-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("fonts/m-plus-rounded-1c-latin-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --page: #f6fbf9;
    --surface: #fffefd;
    --ink: #20343b;
    --ink-muted: #607177;
    --brand: #087f8c;
    --brand-dark: #075861;
    --brand-soft: #ddf5f3;
    --secondary: #e45861;
    --secondary-dark: #a73545;
    --secondary-soft: #ffe3e6;
    --highlight: #9edee8;
    /* Compatibility aliases for existing component and catalog token names. */
    --purple: var(--brand);
    --purple-dark: var(--brand-dark);
    --purple-soft: var(--brand-soft);
    --pink: #ef6f70;
    --pink-soft: #ffe7e5;
    --yellow: var(--highlight);
    --mint: #74cbb9;
    --sky: #9bd9eb;
    --line: #d8e6e2;
    --accent-purple: #ef807b;
    --accent-pink: #ef879c;
    --accent-yellow: #9bd9eb;
    --accent-mint: #83d1be;
    --accent-sky: #91d4e8;
    --accent-coral: #f58c7f;
    --accent-lilac: #a4ddcf;
    --accent-peach: #f7b9aa;
    --accent-rose: #ed829b;
    --accent-orange: #e99a7e;
    --shadow-sm: 0 8px 24px rgba(32, 52, 59, .08);
    --shadow-md: 0 16px 38px rgba(32, 52, 59, .12);
    --shadow-lg: 0 24px 70px rgba(32, 52, 59, .18);
    --spring: cubic-bezier(.2, .9, .25, 1.25);
    --text-xs: .8125rem;
    --text-sm: clamp(.875rem, .85rem + .1vw, .9375rem);
    --text-base: clamp(1rem, .97rem + .12vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
    --heading-sm: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);
    --heading-md: clamp(1.75rem, 1.45rem + 1vw, 2.5rem);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--page);
    font-family: "M PLUS Rounded 1c", ui-rounded, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { display: block; }

/*
 * Give every native action the same tactile lift-and-press response as the
 * header's “Surprise me” button. `translate` composes with the decorative
 * transforms used by cards and icons, so their rotation and arrow motion stay
 * intact while the physical response remains consistent.
 */
:where(
    a[href]:not(.card-link):not(.prose-link),
    button:not(:disabled),
    summary,
    select:not(:disabled),
    input[type="checkbox"]:not(:disabled):not(.signup-consent input),
    input[type="radio"]:not(:disabled)
) {
    cursor: pointer;
    translate: 0 0;
    transition: translate 160ms var(--spring), box-shadow 160ms ease;
}

.quiz-card:has(> .card-link) {
    translate: 0 0;
}

.search-box:has(input:not(:disabled)),
.signup-email-row:has(> input:not(:disabled)),
.signup-consent:has(> input:not(:disabled)) {
    translate: 0 0;
    transition: translate 160ms var(--spring), box-shadow 160ms ease;
}

.prose-link {
    position: relative;
    top: 0;
    cursor: pointer;
    transition: top 160ms var(--spring);
}

@media (hover: hover) and (pointer: fine) {
    :where(
        a[href]:not(.card-link):not(.prose-link),
        button:not(:disabled),
        summary,
        select:not(:disabled),
        input[type="checkbox"]:not(:disabled):not(.signup-consent input),
        input[type="radio"]:not(:disabled)
    ):hover,
    .quiz-card:has(> .card-link:hover),
    .search-box:has(input:not(:disabled):hover),
    .signup-email-row:has(> input:not(:disabled):hover),
    .signup-consent:has(> input:not(:disabled)):hover {
        translate: 0 -2px;
    }

    .prose-link:hover {
        top: -2px;
    }
}

:where(
    a[href]:not(.card-link):not(.prose-link),
    button:not(:disabled),
    summary,
    select:not(:disabled),
    input[type="checkbox"]:not(:disabled):not(.signup-consent input),
    input[type="radio"]:not(:disabled)
):active,
.quiz-card:has(> .card-link:active),
.search-box:has(input:not(:disabled):active),
.signup-email-row:has(> input:not(:disabled):active),
.signup-consent:has(> input:not(:disabled)):active {
    box-shadow: none !important;
    translate: 0 2px;
}

.prose-link:active {
    top: 2px;
}

::selection {
    color: #fff;
    background: var(--purple);
}

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

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 2px solid #138a62; }
.invalid { outline: 2px solid #c42d5b; }
.validation-message { color: #a61f49; }

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.5rem;
    color: #fff;
    background: #8d2347;
    border-radius: 1rem;
}

.blazor-error-boundary::after { content: "Something went wrong."; }

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

    :where(
        a[href]:not(.card-link):not(.prose-link),
        button:not(:disabled),
        summary,
        select:not(:disabled),
        input[type="checkbox"]:not(:disabled):not(.signup-consent input),
        input[type="radio"]:not(:disabled)
    ):is(:hover, :active),
    .quiz-card:has(> .card-link:is(:hover, :active)),
    .search-box:has(input:not(:disabled):is(:hover, :active)),
    .signup-email-row:has(> input:not(:disabled):is(:hover, :active)),
    .signup-consent:has(> input:not(:disabled)):is(:hover, :active) {
        translate: 0 0;
    }

    .prose-link:is(:hover, :active) {
        top: 0;
    }
}