.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;
}

/* Checklist shown in the result of onboarding-style demos (VOG, university demos). */
.checks {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;

    li {
        display: flex;
        gap: .75em;
        margin-block: .5em;
        font-size: 1.1em;
    }

    li::before {
        content: '•';
        flex-shrink: 0;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.5em;
        text-align: center;
        border-radius: 50%;
        background: oklch(from white l c h / calc(alpha - .8));
        font-weight: bold;
    }

    li.ok::before {
        content: '✓';
        background: #2fbf5f;
        color: white;
    }

    li.fail::before {
        content: '✕';
        background: #d23c3c;
        color: white;
    }

    li.note::before {
        content: 'i';
        background: #3b82f6;
        color: white;
    }
}

.checks-title {
    font-size: 1em !important;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-block: 0 .5em;
}

/* Pre-filled form shown when a demo fills in a registration with wallet data. */
.prefilled {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
    gap: .75em 1.5em;
    margin: 0 0 1em;

    div {
        display: flex;
        flex-direction: column;
        gap: .25em;
    }

    dt {
        font-size: .8em;
        text-transform: uppercase;
        letter-spacing: .1em;
        opacity: .8;
    }

    dd {
        margin: 0;
        padding: .5em .75em;
        border-radius: 6px;
        background: oklch(from white l c h / calc(alpha - .9));
        border: 1px solid oklch(from white l c h / calc(alpha - .7));
        font-size: 1.1em;
        min-height: 1.4em;
    }

    dd:empty::before {
        content: '—';
        opacity: .5;
    }
}