@layer components {

    .quiz {
        padding: clamp(24px, 4vw, 64px);
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .quiz__form {
        display: grid;
        gap: var(--s-8);
    }

    .quiz__progress {
        font-size: var(--t-xs);
        font-weight: 500;
        letter-spacing: var(--track-caps);
        text-transform: uppercase;
        color: var(--c-muted);
    }

    .quiz__legend {
        display: grid;
        gap: var(--s-2);
        margin-bottom: var(--s-5);
    }

    .quiz__n {
        font-size: var(--t-xs);
        letter-spacing: var(--track-caps);
        color: var(--c-muted);
    }

    .quiz__question {
        font-size: var(--t-xl);
    }

    .quiz__help {
        color: var(--c-muted);
    }

    .quiz__options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: var(--s-3);
    }

    .quiz__option {
        position: relative;
        cursor: pointer;
    }

    .quiz__input {
        position: absolute;
        opacity: 0;
    }

    .quiz__box {
        display: grid;
        align-content: start;
        gap: var(--s-1);
        height: 100%;
        min-height: 92px;
        padding: var(--s-4);
        border: 1px solid transparent;
        border-radius: var(--r-1);
        background: var(--c-page);
        transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
    }

    .quiz__option:hover .quiz__box {
        border-color: var(--c-line-strong);
    }

    .quiz__label {
        font-weight: 500;
    }

    .quiz__note-text {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .quiz__input:checked + .quiz__box {
        border-color: var(--c-ink);
        box-shadow: inset 0 0 0 1px var(--c-ink);
    }

    .quiz__input:focus-visible + .quiz__box {
        outline: 2px solid var(--c-ink);
        outline-offset: 3px;
    }

    .quiz__nav,
    .quiz__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-3);
    }

    .quiz__result {
        display: grid;
        gap: var(--s-4);
    }

    .quiz__title {
        font-size: var(--t-2xl);
    }

    .quiz__lede,
    .quiz__note,
    .quiz__set-text {
        max-width: 62ch;
        color: var(--c-muted);
    }

    .quiz__routine {
        display: grid;
        margin-block: var(--s-3);
        border-top: 1px solid var(--c-line-strong);
    }

    .quiz__pick {
        display: grid;
        grid-template-columns: 150px 80px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--s-4);
        padding-block: var(--s-4);
        border-bottom: 1px solid var(--c-line-strong);
    }

    .quiz__pick-step {
        font-size: var(--t-xs);
        font-weight: 500;
        letter-spacing: var(--track-caps);
        text-transform: uppercase;
        color: var(--c-muted);
    }

    .quiz__pick-media {
        display: block;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-page);
    }

    .quiz__pick-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .quiz__pick-body {
        display: grid;
        gap: 2px;
    }

    .quiz__pick-name {
        font-family: var(--f-display);
        font-size: var(--t-lg);
    }

    .quiz__pick-why {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .quiz__pick-buy {
        display: grid;
        justify-items: end;
        gap: var(--s-2);
        font-variant-numeric: tabular-nums;
    }

    .quiz__set {
        padding: var(--s-4) var(--s-5);
        border-radius: var(--r-1);
        background: var(--c-page);
    }

    .quiz__save {
        display: grid;
        gap: var(--s-2);
        margin-top: var(--s-5);
        padding-top: var(--s-6);
        border-top: 1px solid var(--c-line-strong);
    }

    .quiz__save-title {
        font-size: var(--t-xl);
    }

    .quiz__save-text {
        max-width: 62ch;
        color: var(--c-muted);
    }

    .quiz__save-note {
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    @media (max-width: 767px) {
        .quiz__pick {
            grid-template-columns: 64px minmax(0, 1fr);
        }

        .quiz__pick-step {
            grid-column: 1 / -1;
        }

        .quiz__pick-buy {
            grid-column: 2;
            justify-items: start;
        }
    }

    .quiz__error {
        font-size: var(--t-sm);
        font-weight: 500;
        color: var(--c-warn);
    }

    .quiz__saved {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

}