:root {
    color-scheme: light dark;
    --space-m: 1rem;
    --space-xs: calc(var(--space-m) / 2);
    --space-s: calc(var(--space-m) * 0.75);
    --space-l: calc(var(--space-m) * 1.5);
    --space-xl: calc(var(--space-m) * 2);
    --gutter: 1rem;
    --content-gap: 1em;
    --radius: 1em;
    --section-padding: 3em;
    --site-width: 1000px;
    --primary-base: oklch(51.864% 0.26903 263.286);
    --primary: var(--primary-base);
    --primary-dark: color-mix(in oklch, var(--primary-base) 82%, black);
    --primary-ultra-dark: color-mix(in oklch, var(--primary-base) 64%, black);
    --primary-light: color-mix(in oklch, var(--primary-base) 82%, white);
    --primary-ultra-light: color-mix(in oklch, var(--primary-base) 20%, white);
    --neutral-base: oklch(94% 0.018 86);
    --neutral: var(--neutral-base);
    --neutral-dark: color-mix(in oklch, var(--neutral-base) 78%, oklch(30% 0.018 78));
    --neutral-ultra-dark: color-mix(in oklch, var(--neutral-base) 58%, oklch(22% 0.018 78));
    --neutral-light: color-mix(in oklch, var(--neutral-base) 72%, white);
    --neutral-ultra-light: color-mix(in oklch, var(--neutral-base) 20%, white);
    --text-color: color-mix(in oklch, var(--neutral-base) 30%, black);
    --color-page: var(--neutral-ultra-light);
    --color-surface: var(--neutral-base);
    --color-text: var(--text-color);
    --color-text-muted: color-mix(in oklch, var(--color-text) 72%, var(--neutral-base));
}

:root[data-theme="light"] {
    color-scheme: light;
    --primary-base: oklch(51.864% 0.26903 263.286);
    --neutral-base: oklch(94% 0.018 86);
    --neutral: var(--neutral-base);
    --neutral-dark: color-mix(in oklch, var(--neutral-base) 78%, oklch(30% 0.018 78));
    --neutral-ultra-dark: color-mix(in oklch, var(--neutral-base) 58%, oklch(22% 0.018 78));
    --neutral-light: color-mix(in oklch, var(--neutral-base) 72%, white);
    --neutral-ultra-light: color-mix(in oklch, var(--neutral-base) 20%, white);
    --text-color: color-mix(in oklch, var(--neutral-base) 30%, black);
    --color-page: var(--neutral-ultra-light);
    --color-surface: var(--neutral-base);
    --color-text: var(--text-color);
    --color-text-muted: color-mix(in oklch, var(--color-text) 72%, var(--neutral-base));
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --primary-base: oklch(70% 0.18 263.286);
    --neutral-base: oklch(24% 0.018 78);
    --neutral: var(--neutral-base);
    --neutral-dark: color-mix(in oklch, var(--neutral-base) 78%, black);
    --neutral-ultra-dark: color-mix(in oklch, var(--neutral-base) 64%, black);
    --neutral-light: color-mix(in oklch, var(--neutral-base) 78%, white);
    --neutral-ultra-light: color-mix(in oklch, var(--neutral-base) 88%, black);
    --text-color: color-mix(in oklch, var(--neutral-base) 12%, white);
    --color-page: var(--neutral-ultra-light);
    --color-surface: var(--neutral-base);
    --color-text: var(--text-color);
    --color-text-muted: color-mix(in oklch, var(--color-text) 72%, var(--neutral-base));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --primary-base: oklch(70% 0.18 263.286);
        --neutral-base: oklch(24% 0.018 78);
        --neutral: var(--neutral-base);
        --neutral-dark: color-mix(in oklch, var(--neutral-base) 78%, black);
        --neutral-ultra-dark: color-mix(in oklch, var(--neutral-base) 64%, black);
        --neutral-light: color-mix(in oklch, var(--neutral-base) 78%, white);
        --neutral-ultra-light: color-mix(in oklch, var(--neutral-base) 88%, black);
        --text-color: color-mix(in oklch, var(--neutral-base) 12%, white);
        --color-page: var(--neutral-ultra-light);
        --color-surface: var(--neutral-base);
        --color-text: var(--text-color);
        --color-text-muted: color-mix(in oklch, var(--color-text) 72%, var(--neutral-base));
    }
}

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

h1 {
    margin: 0;
    text-align: center;
}

h2,
h3,
h4,
h5,
h6,
p,
span {
    text-align: center;
}

section {
    width: 100%;
    min-width: 0;
    padding-inline: var(--gutter);
    padding-block: var(--section-padding);
}

.container {
    width: 100%;
    min-width: 0;
    max-width: var(--site-width);
    margin-inline: auto;
}

body {
    all: unset;
    display: block;
    font-family: Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-page);
}

figure {
    margin: 0;
}

.toggle-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    max-width: var(--site-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: var(--space-m);
    border-bottom: 1px solid var(--neutral-light);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.theme-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 1px solid color-mix(in oklch, var(--color-text) 18%, transparent);
    border-radius: 999px;
    background: color-mix(in oklch, var(--color-surface) 78%, transparent);
    color: oklch(82% 0.16 84);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    box-shadow: 0 0.75rem 2rem color-mix(in oklch, black 12%, transparent);
    backdrop-filter: blur(12px);
}

:root[data-theme="dark"] .theme-toggle {
    color: white;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle {
        color: white;
    }
}

.theme-toggle__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.theme-toggle__icon--moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle__icon--sun {
        display: none;
    }

    :root:not([data-theme]) .theme-toggle__icon--moon {
        display: block;
    }
}

.theme-toggle:hover {
    background: color-mix(in oklch, var(--color-surface) 88%, var(--primary-ultra-light));
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 3px;
}

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* min-width: 0; */
    /* max-width: 100%; */
    min-height: 100vh;
    background: var(--color-page);
}

.hero-section {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.hero-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: var(--content-gap);
}

.hero-section__title {
    text-wrap: balance;
}

.hero-section__media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 500px;
    gap: var(--content-gap);
}

.hero-section__media {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 400px 200px 300px 400px;
    display: block;
}
.hero-section__media-caption {
    color: var(--color-text-muted);
    text-wrap: balance;
}

@media (max-width: 560px) {
    .hero-section__inner {
        align-items: stretch;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    figcaption {
        width: 100%;
        text-align: center;
        overflow-wrap: break-word;
    }
}

@media (min-width: 561px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    figcaption {
        text-align: center;
    }
}