* {
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;
    font-family: system-ui;
    --primary-color: hsl(180 100% 40%);
    --gradient-range: 70;
    --gradient-primary: hsl(from var(--primary-color) calc(h - var(--gradient-range)/2) s l);
    --gradient-secondary: hsl(from var(--primary-color) calc(h + var(--gradient-range)/2) s l);

    --spacing-related: 1rem;
    --spacing-unrelated: 1.5rem;
}

hr {
    --line-thickness: 1px;
    border: none;
    position: relative;
    height: var(--line-thickness);
    @supports (clip-path: polygon(0 0)) {
        height: calc(4 * var(--line-thickness));
    }
    &::after {
        content: "";
        inset: 0;
        right: 0;
        left: 0;
        top: 0;
        position: absolute;
        background-image: linear-gradient(in oklch 90deg, var(--gradient-primary), var(--gradient-secondary));
        @supports (clip-path: polygon(0 0)) {
            --stop-point-1: 50%;
            --stop-point-2: 40%;
            --stop-point-3: 60%;
            --stop-point-4: 45%;
            --stop-point-5: 50%;
            clip-path: polygon(
                    0 calc(var(--stop-point-1) - var(--line-thickness)/2),
                    25% calc(var(--stop-point-2) - var(--line-thickness)/2),
                    50% calc(var(--stop-point-3) - var(--line-thickness)/2),
                    75% calc(var(--stop-point-4) - var(--line-thickness)/2),
                    100% calc(var(--stop-point-5) - var(--line-thickness)/2),
                    100% calc(var(--stop-point-5) + var(--line-thickness)/2),
                    75% calc(var(--stop-point-4) + var(--line-thickness)/2),
                    50% calc(var(--stop-point-3) + var(--line-thickness)/2),
                    25% calc(var(--stop-point-2) + var(--line-thickness)/2),
                    0 calc(var(--stop-point-1) + var(--line-thickness)/2)
            );
            @supports (clip-path: polygon(round 0px, 0 0)) {
                clip-path: polygon(
                        round 5px,
                        0 calc(var(--stop-point-1) - var(--line-thickness)/2),
                        25% calc(var(--stop-point-2) - var(--line-thickness)/2),
                        50% calc(var(--stop-point-3) - var(--line-thickness)/2),
                        75% calc(var(--stop-point-4) - var(--line-thickness)/2),
                        100% calc(var(--stop-point-5) - var(--line-thickness)/2),
                        100% calc(var(--stop-point-5) + var(--line-thickness)/2),
                        75% calc(var(--stop-point-4) + var(--line-thickness)/2),
                        50% calc(var(--stop-point-3) + var(--line-thickness)/2),
                        25% calc(var(--stop-point-2) + var(--line-thickness)/2),
                        0 calc(var(--stop-point-1) + var(--line-thickness)/2)
                );
            }
            @media (prefers-reduced-motion: no-preference) {
                animation: wave infinite 10s ease-in-out;
            }
        }
    }
}

@property --from {
    inherits: false;
    initial-value: 0%;
    syntax: "<percentage>";
}
:any-link:is(:hover, :focus) {
    --from: 0%;
    background-image: linear-gradient(
            in oklch 90deg,
            var(--gradient-primary) calc(var(--from) - 100%),
            var(--gradient-secondary) calc(var(--from) - 50%),
            var(--gradient-primary) var(--from),
            var(--gradient-secondary) calc(var(--from) + 50%),
            var(--gradient-primary) calc(var(--from) + 100%));
    background-clip: text;
    color: transparent;
    @media (prefers-reduced-motion: no-preference) {
        animation: link-rainbow infinite linear 5s;
    }
}
@keyframes link-rainbow {
    to {
        --from: 100%;
    }
}

hgroup {
    margin-block: var(--spacing-unrelated) var(--spacing-related);
    & > :is(h1, h2, h3, h4, h5, h6, p) {
        margin-block: 0;
    }
}
hgroup > p {
    color: color(from currentColor srgb r g b / .6);
}

:not(hgroup) > p::first-letter {
    margin-inline-start: 3ch;
    font-family: cursive;
    font-size: 1.5em;
    line-height: 0;
}

small.disclaimer {
    display: block;
    width: 100%;
    text-align: end;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: grid;
    --gutter-size: minmax(5ch, 15%);
    grid-template-columns:
        [full-width-start breakout-left-start]
        var(--gutter-size)
        [breakout-right-start content-start]
        1fr
        [content-end breakout-left-end]
        var(--gutter-size)
        [gutter-right-end full-width-end];
    & > * {
        grid-column: content;
    }
}

.hero {
    position: relative;
    width: fit-content;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: linear-gradient(in oklch 130deg, var(--gradient-primary) 15%, var(--gradient-secondary) 85%);
    }
}
.hero {
    shape-outside: circle(50%);
    --animation-duration: 30s;
    & > img {
        display: block;
        clip-path: circle(50%);
        @supports (clip-path: shape(from 0% 0%,curve to 0% 0% with 0% 0%)) {
            clip-path: shape(from 91.94% 69.06%,curve to 80.46% 82.92% with 89.47% 78.68%,curve to 63.34% 93.41% with 71.45% 87.16%,curve to 45.81% 95.77% with 55.22% 99.66%,curve to 28.11% 87.70% with 36.39% 91.88%,curve to 13.05% 76.49% with 19.82% 83.52%,curve to 3.30% 59.73% with 6.28% 69.46%,curve to 0% 0% with 0% 0%,curve to 100% 0% with 0% 0%,curve to 96.19% 49.62% with 97.96% 39.81%,curve to 91.94% 69.06% with 94.41% 59.44%);
            @media (prefers-reduced-motion: no-preference) {
                animation: blob-topless infinite var(--animation-duration) linear;
            }
        }
    }
    &::before {
        clip-path: circle(50%);
        @supports (clip-path: shape(from 0% 0%,curve to 0% 0% with 0% 0%)) {
            clip-path: shape(from 91.94% 69.06%,curve to 80.46% 82.92% with 89.47% 78.68%,curve to 63.34% 93.41% with 71.45% 87.16%,curve to 45.81% 95.77% with 55.22% 99.66%,curve to 28.11% 87.70% with 36.39% 91.88%,curve to 13.05% 76.49% with 19.82% 83.52%,curve to 3.30% 59.73% with 6.28% 69.46%,curve to 2.67% 39.99% with 0.31% 50.00%,curve to 13.10% 23.98% with 5.02% 29.98%,curve to 28.34% 11.68% with 21.17% 17.98%,curve to 45.31% 3.32% with 35.50% 5.38%,curve to 64.90% 4.25% with 55.12% 1.25%,curve to 81.91% 14.41% with 74.69% 7.24%,curve to 93.55% 30.69% with 89.13% 21.57%,curve to 96.19% 49.62% with 97.96% 39.81%,curve to 91.94% 69.06% with 94.41% 59.44%);
            @media (prefers-reduced-motion: no-preference) {
                animation: blob infinite var(--animation-duration) linear;
            }
        }
    }
}
@keyframes blob-topless {
    0%, 100% {
        clip-path: shape(from 91.94% 69.06%,curve to 80.46% 82.92% with 89.47% 78.68%,curve to 63.34% 93.41% with 71.45% 87.16%,curve to 45.81% 95.77% with 55.22% 99.66%,curve to 28.11% 87.70% with 36.39% 91.88%,curve to 13.05% 76.49% with 19.82% 83.52%,curve to 3.30% 59.73% with 6.28% 69.46%,curve to 0% 0% with 0% 0%,curve to 100% 0% with 0% 0%,curve to 96.19% 49.62% with 97.96% 39.81%,curve to 91.94% 69.06% with 94.41% 59.44%);
    }
    25% {
        clip-path: shape(from 89.60% 68.11%,curve to 80.28% 83.49% with 87.72% 77.41%,curve to 63.72% 91.59% with 72.85% 89.57%,curve to 45.35% 93.15% with 54.58% 93.61%,curve to 28.18% 87.88% with 36.13% 92.70%,curve to 12.83% 76.45% with 20.24% 83.06%,curve to 4.69% 59.92% with 5.43% 69.84%,curve to 0% 0% with 0% 0%,curve to 100% 0% with 0% 0%,curve to 93.78% 49.51% with 96.08% 40.21%,curve to 89.60% 68.11% with 91.48% 58.82%);
    }
    50% {
        clip-path: shape(from 90.70% 67.89%,curve to 79.19% 82.50% with 85.93% 76.11%,curve to 63.49% 90.96% with 72.45% 88.89%,curve to 44.58% 95.15% with 54.52% 93.04%,curve to 26.42% 91.29% with 34.64% 97.26%,curve to 14.20% 76.52% with 18.20% 85.32%,curve to 9.20% 58.86% with 10.20% 67.72%,curve to 0% 0% with 0% 0%,curve to 100% 0% with 0% 0%,curve to 93.66% 50.38% with 91.86% 41.10%,curve to 90.70% 67.89% with 95.47% 59.67%);
    }
    75% {
        clip-path: shape(from 91.03% 68.58%,curve to 80.55% 83.62% with 88.37% 77.88%,curve to 63.89% 93.67% with 72.73% 89.37%,curve to 45.92% 94.28% with 55.04% 97.97%,curve to 27.02% 88.50% with 36.81% 90.60%,curve to 13.25% 77.27% with 17.23% 86.39%,curve to 7.68% 59.07% with 9.26% 68.14%,curve to 0% 0% with 0% 0%,curve to 100% 0% with 0% 0%,curve to 93.51% 50.04% with 93.32% 40.79%,curve to 91.03% 68.58% with 93.70% 59.29%);
    }
}
@keyframes blob {
    0%, 100% {
        clip-path: shape(from 91.94% 69.06%,curve to 80.46% 82.92% with 89.47% 78.68%,curve to 63.34% 93.41% with 71.45% 87.16%,curve to 45.81% 95.77% with 55.22% 99.66%,curve to 28.11% 87.70% with 36.39% 91.88%,curve to 13.05% 76.49% with 19.82% 83.52%,curve to 3.30% 59.73% with 6.28% 69.46%,curve to 2.67% 39.99% with 0.31% 50.00%,curve to 13.10% 23.98% with 5.02% 29.98%,curve to 28.34% 11.68% with 21.17% 17.98%,curve to 45.31% 3.32% with 35.50% 5.38%,curve to 64.90% 4.25% with 55.12% 1.25%,curve to 81.91% 14.41% with 74.69% 7.24%,curve to 93.55% 30.69% with 89.13% 21.57%,curve to 96.19% 49.62% with 97.96% 39.81%,curve to 91.94% 69.06% with 94.41% 59.44%);
    }
    25% {
        clip-path: shape(from 89.60% 68.11%,curve to 80.28% 83.49% with 87.72% 77.41%,curve to 63.72% 91.59% with 72.85% 89.57%,curve to 45.35% 93.15% with 54.58% 93.61%,curve to 28.18% 87.88% with 36.13% 92.70%,curve to 12.83% 76.45% with 20.24% 83.06%,curve to 4.69% 59.92% with 5.43% 69.84%,curve to 7.49% 41.32% with 3.95% 50.00%,curve to 16.22% 25.45% with 11.03% 32.65%,curve to 28.09% 10.67% with 21.41% 18.25%,curve to 44.75% 4.04% with 34.76% 3.10%,curve to 63.22% 8.69% with 54.73% 4.99%,curve to 78.39% 18.46% with 71.71% 12.40%,curve to 90.58% 32.36% with 85.07% 24.52%,curve to 93.78% 49.51% with 96.08% 40.21%,curve to 89.60% 68.11% with 91.48% 58.82%);
    }
    50% {
        clip-path: shape(from 90.70% 67.89%,curve to 79.19% 82.50% with 85.93% 76.11%,curve to 63.49% 90.96% with 72.45% 88.89%,curve to 44.58% 95.15% with 54.52% 93.04%,curve to 26.42% 91.29% with 34.64% 97.26%,curve to 14.20% 76.52% with 18.20% 85.32%,curve to 9.20% 58.86% with 10.20% 67.72%,curve to 7.23% 40.26% with 8.21% 50.00%,curve to 12.20% 22.57% with 6.25% 30.52%,curve to 27.57% 12.28% with 18.15% 14.62%,curve to 45.89% 7.20% with 36.99% 9.95%,curve to 63.48% 8.02% with 54.79% 4.45%,curve to 79.44% 17.46% with 72.18% 11.59%,curve to 89.28% 32.22% with 86.71% 23.33%,curve to 93.66% 50.38% with 91.86% 41.10%,curve to 90.70% 67.89% with 95.47% 59.67%);
    }
    75% {
        clip-path: shape(from 91.03% 68.58%,curve to 80.55% 83.62% with 88.37% 77.88%,curve to 63.89% 93.67% with 72.73% 89.37%,curve to 45.92% 94.28% with 55.04% 97.97%,curve to 27.02% 88.50% with 36.81% 90.60%,curve to 13.25% 77.27% with 17.23% 86.39%,curve to 7.68% 59.07% with 9.26% 68.14%,curve to 6.94% 40.60% with 6.11% 50.00%,curve to 14.73% 24.88% with 7.76% 31.19%,curve to 29.40% 14.43% with 21.70% 18.57%,curve to 46.11% 5.82% with 37.10% 10.29%,curve to 63.95% 5.93% with 55.11% 1.35%,curve to 80.98% 16.03% with 72.80% 10.51%,curve to 91.24% 31.17% with 89.17% 21.54%,curve to 93.51% 50.04% with 93.32% 40.79%,curve to 91.03% 68.58% with 93.70% 59.29%);
    }
}

@property --stop-point-1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}
@property --stop-point-2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}
@property --stop-point-3 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}
@property --stop-point-4 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}
@property --stop-point-5 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}
b {
    position: relative;
    &::after {
        content: "";
        left: 0;
        right: 0;
        top: 1em;
        position: absolute;
        background-image: linear-gradient(in oklch 90deg, var(--gradient-primary), var(--gradient-secondary));
        --line-thickness: 4px;
        height: var(--line-thickness);
        @supports (clip-path: polygon(0 0)) {
            height: calc(4 * var(--line-thickness));
            --default-text-underline-offset: 1px;
            top: calc(1em - var(--line-thickness) + var(--default-text-underline-offset));
            --stop-point-1: 50%;
            --stop-point-2: 40%;
            --stop-point-3: 60%;
            --stop-point-4: 45%;
            --stop-point-5: 50%;
            clip-path: polygon(
                0 calc(var(--stop-point-1) - var(--line-thickness)/2),
                25% calc(var(--stop-point-2) - var(--line-thickness)/2),
                50% calc(var(--stop-point-3) - var(--line-thickness)/2),
                75% calc(var(--stop-point-4) - var(--line-thickness)/2),
                100% calc(var(--stop-point-5) - var(--line-thickness)/2),
                100% calc(var(--stop-point-5) + var(--line-thickness)/2),
                75% calc(var(--stop-point-4) + var(--line-thickness)/2),
                50% calc(var(--stop-point-3) + var(--line-thickness)/2),
                25% calc(var(--stop-point-2) + var(--line-thickness)/2),
                0 calc(var(--stop-point-1) + var(--line-thickness)/2)
            );
            @supports (clip-path: polygon(round 0px, 0 0)) {
                clip-path: polygon(
                    round 5px,
                    0 calc(var(--stop-point-1) - var(--line-thickness)/2),
                    25% calc(var(--stop-point-2) - var(--line-thickness)/2),
                    50% calc(var(--stop-point-3) - var(--line-thickness)/2),
                    75% calc(var(--stop-point-4) - var(--line-thickness)/2),
                    100% calc(var(--stop-point-5) - var(--line-thickness)/2),
                    100% calc(var(--stop-point-5) + var(--line-thickness)/2),
                    75% calc(var(--stop-point-4) + var(--line-thickness)/2),
                    50% calc(var(--stop-point-3) + var(--line-thickness)/2),
                    25% calc(var(--stop-point-2) + var(--line-thickness)/2),
                    0 calc(var(--stop-point-1) + var(--line-thickness)/2)
                );
            }
            @media (prefers-reduced-motion: no-preference) {
                animation: wave infinite 10s ease-in-out;
            }
        }
    }
}

@keyframes wave {
    from, to {
        --stop-point-1: 50%;
        --stop-point-2: 40%;
        --stop-point-3: 60%;
        --stop-point-4: 45%;
        --stop-point-5: 50%;
    }
    25% {
        --stop-point-1: 50%;
        --stop-point-2: 45%;
        --stop-point-3: 58%;
        --stop-point-4: 60%;
        --stop-point-5: 50%;
    }
    50% {
        --stop-point-1: 50%;
        --stop-point-2: 60%;
        --stop-point-3: 50%;
        --stop-point-4: 60%;
        --stop-point-5: 50%;
    }
    75% {
        --stop-point-1: 50%;
        --stop-point-2: 45%;
        --stop-point-3: 45%;
        --stop-point-4: 55%;
        --stop-point-5: 50%;
    }
}