.stand-alone {
    margin: 0;
    background: oklch(from var(--accent) calc(l - .25) c h);
    color-scheme: dark;

    .demo-main {
        margin: 2vw auto;
        max-width: 60em;
    }
}

.demo {
    font-family: system-ui, sans-serif;
    margin: 0;
    color-scheme: dark;
    --link: var(--accent, blue);
    --link-hover: oklch(from var(--accent) calc(l + .1) c h);

    div.yivi-web-form {
        margin: 0;
        width: 100%;
    }

    .yivi-web-header p {
        color: white !important;
    }

    .yivi-web-button-secondary {
        border-color: oklch(from white l c h / calc(alpha - .2));

        &:hover {
            color: white;
            background: oklch(from white l c h / calc(alpha - .9));
        }
    }

    .yivi-web-forbidden-animation {
        background: white;
        box-shadow: 0 0 0 8px white;
        border-radius: 50%;
        padding: 1em;
        margin-block-end: 1em;
    }

    .yivi-web-waiting-for-user-animation {
        background: var(--secondary);
    }

    .yivi-web-waiting-for-user-animation::before,
    .yivi-web-waiting-for-user-animation::after {
        background: var(--accent);
    }

    .yivi-web-button-tertiary {
        color: white;
    }

    .yivi-web-pairing-form input {
        border-color: white;
    }

    + p {
        padding: 1em;
        background: orange;
    }
}

.demo-header {
    background: var(--accent);
    color: var(--secondary);
    padding: 1em 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
        color: var(--secondary);
    }
}

.demo-logo {
    font-weight: bold;
    font-size: 1.4em;
}

.demo-main {
    padding: 2vw 5vw 5vw;
    background: oklch(from var(--accent) calc(l - .25) c h);
    color: white;

    h1,
    h2 {
        font-size: max(2.5vw, 1.5em);
        text-wrap: balance;
    }
}

.result {
    padding: calc(1em + .5vw) calc(1.5em + 1vw);
    background: oklch(from white l c h / calc(alpha - .8));
    border-radius: 12px;

    p {
        margin-block: 12px;
        font-size: 1.2em;
    }
}

button[disabled] {
    font: inherit;
    font-weight: bold;
    padding: 12px 16px;
    background: dimgrey;
    color: white;
    border: none;
    border-radius: .5em;

    &:hover {
        background: dimgrey;
    }
}

.result:has(.price):not[hidden] {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
p.price {
    font-weight: bold;
    font-size: 2em;
}
.prev {
    font-size: .75em;
    font-weight: normal;
    display: block;
    text-decoration-line: line-through;
}
.art {
    width: min(14em, 50vw);
    aspect-ratio: 1 / 1.35;
    box-shadow: 0 .5em 1em rgba(0,0,0,0.3);
    background-image: radial-gradient(ellipse at left, oklch(from var(--secondary) l c h / calc(alpha - .5)), transparent);
    margin: 1em auto;
}