@layer {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        background-repeat: no-repeat;
    }

    * {
        padding: 0;
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        block-size: 100%;
    }

    body {
        min-block-size: 100%;
    }

    img,
    iframe,
    audio,
    video,
    canvas {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }

    svg {
        max-inline-size: 100%;
    }

    svg:not([fill]) {
        fill: currentColor;
    }

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

    textarea {
        resize: vertical;
    }

    fieldset,
    iframe {
        border: none;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    p {
        text-wrap: pretty;
        font-variant-numeric: proportional-nums;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-variant-numeric: lining-nums;
    }

    p,
    blockquote,
    q,
    figcaption,
    li {
        hanging-punctuation: first allow-end last;
    }

    input,
    label,
    button,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1;
    }

    math,
    time,
    table {
        font-variant-numeric: tabular-nums lining-nums slashed-zero;
    }

    code {
        font-variant-numeric: slashed-zero;
    }

    table {
        border-collapse: collapse;
    }

    abbr {
        font-variant-caps: all-small-caps;
        text-decoration: none;

        &[title] {
            cursor: help;
            text-decoration: underline dotted;
        }
    }

    sup,
    sub {
        line-height: 0;
    }

    :disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }

    :focus-visible {
        outline-offset: 0.2rem;
    }
}

:root {
    --gap: clamp(2px, 1vw, 0.5rlh);
    --text-color: oklch(0.43 0.16 37.8);
    --link-color: oklch(0.57 0.27 345.37);
    --background-color: oklch(0.9807 0.0192 78.52);
    --shadow-color: oklch(0.34 0.05 263.3);

    color-scheme: light dark;

    @media (prefers-color-scheme: dark) {
        --link-color: oklch(0.68 0.19 251.7);
        --background-color: oklch(0.12 0.03 264.2);
        --text-color: oklch(0.86 0.07 251.4);
    }
}

html {
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 125%;
    line-height: 1.5;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    @media (width < 100ch) {
        font-size: 100%;
    }

    @media (width < 80ch) {
        font-size: 90%;
    }

    @media (width < 1280px) and (orientation: landscape) {
        font-size: 90%;
    }
}

body {
    margin-inline: auto;
}

:where(h1, h2, h3, h4, h5, h6) {
    text-align: center;
}

:where(h3, h4, h5, h6) {
    font-size: 0.85rem;
    font-weight: 550;
    margin-block-end: 0.25rlh;
}

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

@media (prefers-color-scheme: dark) {
    :where(img, video) {
        box-shadow: oklch(from var(--shadow-color) l c h / 40%) 0 5px 40px;
    }
}

video {
    max-inline-size: 1280px;
    aspect-ratio: 16 / 9;
    width: 100%;
    cursor: pointer;
    transition: box-shadow 200ms ease;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 7C8 6.17595 8.94076 5.70557 9.6 6.2L16.9333 11.7C17.4667 12.1 17.4667 12.9 16.9333 13.3L9.6 18.8C8.94076 19.2944 8 18.824 8 18V7Z" fill="oklch(0.43 0.16 37.8)"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5em;

    @media (prefers-color-scheme: dark) {
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 7C8 6.17595 8.94076 5.70557 9.6 6.2L16.9333 11.7C17.4667 12.1 17.4667 12.9 16.9333 13.3L9.6 18.8C8.94076 19.2944 8 18.824 8 18V7Z" fill="white"/></svg>');
    }

    @media (width > 1280px) {
        border-radius: 6px;
    }

    &:playing {
        @media (prefers-color-scheme: dark) {
            box-shadow: oklch(from var(--shadow-color) l c h / 60%) 0 5px 40px;
        }
    }
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 1280px;

    &::after {
        content: "";
        display: block;
        position: absolute;
        right: 15px;
        bottom: 15px;
        aspect-ratio: 1 / 1;
        width: 1em;
        opacity: 0.85;
        background-size: 100% 100%;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.38881 0.283798C3.68073 -0.106367 2.81922 -0.0934611 2.12315 0.317739C1.42707 0.72894 1 1.47726 1 2.28571V29.7143C1 30.5227 1.42707 31.2711 2.12315 31.6823C2.81922 32.0935 3.68073 32.1064 4.38881 31.7162L29.2777 18.0019C30.0072 17.5999 30.4603 16.8329 30.4603 16C30.4603 15.1671 30.0072 14.4001 29.2777 13.9981L4.38881 0.283798Z" fill="white"/></svg>');
    }

    &:has(video:playing) {
        &::after {
            background-image: url('data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.29412 0C4.02711 0 3 0.991862 3 2.21538V29.7846C3 31.0081 4.02711 32 5.29412 32H12.4314C13.6984 32 14.7255 31.0081 14.7255 29.7846V2.21538C14.7255 0.991862 13.6984 0 12.4314 0H5.29412Z" fill="white"/><path d="M19.5686 0C18.3016 0 17.2745 0.991862 17.2745 2.21538V29.7846C17.2745 31.0081 18.3016 32 19.5686 32H26.7059C27.9729 32 29 31.0081 29 29.7846V2.21538C29 0.991862 27.9729 0 26.7059 0H19.5686Z" fill="white"/></svg>');
        }
    }
}

p {
    margin-bottom: 0.5rlh;
}

:where(hgroup, header, body > h2) {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin-inline: 5vw;

    &:first-of-type {
        height: min(90vh, 800px);
    }
}

:where(hgroup, header, section) {
    h2 {
        margin-bottom: 0.5rlh;
    }

    p {
        max-width: 57ch;
        margin-inline: auto;
    }
}

hr {
    margin-block: 3rlh;
    max-width: 20%;
    margin-inline: auto;
    border: none;
    background-color: oklch(from var(--text-color) l c h / 30%);
    height: 1px;
}

section {
    margin-inline: 5vw;
    margin-block: 3rlh;
}

body > h2 {
    font-size: 4rem;
    font-weight: 656;
    font-variation-settings: "YAXS" 673;
    font-style: italic;
}

a {
    color: var(--link-color);
    text-underline-offset: 0.2em;

    &:hover {
        color: oklch(from var(--link-color) calc(l * 1.2) c h);
    }

    &:active {
        color: oklch(from var(--link-color) calc(l * 0.9) calc(c * 0.8) h / 80%);
    }
}

summary {
    cursor: pointer;
}

details {
    p {
        font-size: 80%;
    }
}

dl {
    margin: 1rlh auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, min(500px, 100%)));
    place-content: center;
    text-align: left;
    width: 100%;
    gap: 2rlh;

    dt {
        font-weight: 550;
        margin-block-end: 0.25rlh;
    }

    dd {
        font-size: smaller;
    }
}

figure {
    content-visibility: auto;
    container-type: inline-size;

    & + figure {
        margin-top: 3rlh;
    }

    @media (width >= 1200px) {
        min-height: 100vh;
    }

    > picture:only-of-type {
        display: grid;
        place-content: center;
    }

    > :where(video, .video-container) {
        margin-inline: auto;
    }

    :where(img, video) {
        width: 100%;

        @media (orientation: portrait) or (min-width: 1280px) {
            max-height: 90cqh;
        }
    }

    &:not(.grid) :where(img, video) {
        margin-block: 1rlh;
    }

    &.graphic {
        display: grid;
        place-content: center;

        img {
            width: auto;
        }
    }
}

figcaption {
    text-align: center;
    max-inline-size: 80ch;
    margin-inline: auto;
    padding: 1rlh 2em;
    text-wrap: pretty;

    @media (max-width: 500px) {
        padding-top: 0.5rlh;
    }
}

.grid {
    --cols: 1;
    display: grid;
    gap: var(--gap);
    grid-auto-flow: row dense;
    grid-auto-rows: min-content;
    align-items: start;
    justify-items: center;
    justify-content: center;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));

    &.uneven-rows-right {
        @container (width > 800px) {
            grid-template-rows: min-content auto;

            picture:first-of-type {
                justify-self: end;
            }

            picture:last-of-type {
                justify-self: start;
                grid-column: 2;
                grid-row: 1 / span 2;
            }

            figcaption {
                grid-column: 1;
                grid-row: 2;
                align-self: stretch;
            }
        }
    }

    &:where(:has(> picture:nth-of-type(2))) {
        --cols: 2;

        :where(picture:first-of-type) {
            justify-self: end;
        }
        :where(picture:last-of-type) {
            justify-self: start;
        }

        @media (width <= 800px) {
            --cols: 1;

            picture {
                justify-self: center;
            }
        }
    }

    &:where(:has(> picture:nth-of-type(3))) {
        --cols: 3;

        @media (width <= 1200px) {
            --cols: 2;

            figcaption {
                grid-column: auto;
            }
        }
    }

    &.grid-2x2 {
        --cols: 2;

        picture:nth-of-type(even) {
            justify-self: start;
        }

        picture:nth-of-type(odd) {
            justify-self: end;
        }
    }

    figcaption {
        grid-column: 1 / -1;
        place-self: center;
    }
}

footer {
    font-size: small;
    font-variation-settings: "opsz" 21;
    column-gap: min(5vw, 5em);
    padding: 0 2em;
    max-inline-size: 70em;
    margin: 3rlh 5vw;

    .break {
        break-before: column;
    }

    @media (width > 500px) {
        columns: 2 auto;
    }

    p {
        margin-block-end: 0.5rlh;

        &:not(:first-of-type) {
            color: oklch(from var(--text-color) l calc(c * 0.7) h / 90%);
        }
    }
}

.notif-banner {
    margin-top: 1rlh;
    display: flex;
    justify-content: center;
}

.btn {
    --bg-factor: 0.7;
    --text-trans: 100%;
    --fg-color: var(--background-color);
    background-color: oklch(from var(--link-color) calc(l * var(--bg-factor)) c h);
    color: oklch(from var(--fg-color) l c h / var(--text-trans));
    border: 0;
    border-radius: 0.3em;
    padding: 0.2em 0.5em;
    font: inherit;
    cursor: pointer;
    transition: opacity 150ms ease;
    text-decoration: none;

    @media (prefers-color-scheme: dark) {
        --fg-color: var(--text-color);
    }

    &:where(:hover, :focus-visible) {
        --bg-factor: 0.75;
    }

    &:active {
        --bg-factor: 0.6;
        --text-trans: 70%;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

@media (hover: hover) and (pointer: fine) and (scripting: enabled) {
    #key-help {
        display: block;
    }
}

kbd {
    --trans: 90%;
    background-color: color-mix(in oklab, var(--text-color), transparent var(--trans));
    padding: 0 1px;
    border-radius: 2px;

    @media (prefers-color-scheme: dark) {
        --trans: 80%;
        box-shadow: rgb(0 0 0 / 90%) 0 1px 3px;
    }
}

#key-help {
    font-size: 80%;
    font-variation-settings: "opsz" 21;
}

.teaser {
    text-align: center;
    min-height: 30vh;
    display: grid;
    place-content: center;
}

.box {
    border-radius: 1em;
    background-color: oklch(from var(--background-color) calc(l * 1.6) c h);
    padding: 0.5em 1em;
    width: fit-content;
    margin-trim: block-end;
}

.space-double {
    margin-block-end: 2rlh;
}

html:has(.SideNav:hover) {
    scroll-behavior: smooth;
}

.SideNav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    z-index: 2;

    .SideNav__markers {
        opacity: 0.25;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        z-index: 3;
        margin-left: 0.5rlh;
        transform-origin: left center;
        transition:
            transform 400ms ease,
            opacity 400ms ease;
    }

    nav {
        --radius: 8px;

        min-width: 150px;
        padding: 1rlh;
        transform: translateX(-150%);
        transition: transform 300ms 100ms cubic-bezier(0.34, 1.56, 0.64, 1);
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        background-color: oklch(from var(--background-color) l c h / 90%);
        backdrop-filter: blur(10px);
    }

    h2 {
        font-size: 0.85rem;
        text-align: left;
        margin-bottom: 0.25rlh;
    }

    ul {
        list-style: none;
    }

    &:where(:hover, :focus-within) {
        nav {
            transform: none;
        }

        .SideNav__markers {
            opacity: 0;
            transform: perspective(500px) translateZ(-80px);
        }
    }
}

@media (hover: none) {
    .SideNav {
        display: none;
    }
}