:root {
    --radius: 0;
    --mom-black: 0 0% 0%;
    --mom-white: 0 0% 100%;
    --mom-red: 355 65% 48%;
    --accent: var(--mom-red);
    --option: 0 0% 96%;
    --card: 0 0% 85%;
    --correct: 164 81% 36%;
    --incorrect: 355 65% 48%;
    --unanswered: 0 0 0%;
    --text-lg: clamp(1.125rem, 0.556vi + 1rem, 1.5rem);
    --text-xl: clamp(1.375rem, 1.667vi + 1rem, 2.5rem);
}

.button {
    color: hsl(var(--mom-black));
    background-color: hsl(var(--mom-white));
    border-width: 2px;
    border-color: hsl(var(--mom-black));
    font-size: var(--text-lg);
    letter-spacing: normal;
}

@media (hover) and (pointer: fine) {
    .button:hover {
        color: hsl(var(--mom-white));
        background-color: hsl(var(--mom-red));
        border-color: hsl(var(--mom-red));
    }

    :is(body:has(.teaser), body:has(.set-question__header-question)) .button:hover {
        border-color: hsl(var(--mom-black));
    }

    :is(body:has(.teaser), body:has(.set-question__header-question)) .dialog__overlay .button:hover {
         border-color: hsl(var(--accent));
    }
}

.button:active, .button[data-state=on] {
    color: hsl(var(--mom-white));
    background-color: hsl(var(--mom-red));
    border-color: hsl(var(--mom-red));
    transform: none;
}

:is(body:has(.teaser), body:has(.set-question__header-question)) :is(.button:active, .button[data-state=on]) {
    border-color: hsl(var(--mom-black));
}

:is(body:has(.teaser), body:has(.set-question__header-question)) .dialog__overlay :is(.button:active, .button[data-state=on]) {
     border-color: hsl(var(--accent));
}

.button--variant-default {
    text-transform: none;
}

.layout__logo img {
    width: 8em;
}

.intro-image {
    margin: 0;
    top: auto;
    left: auto;
    right: -25%;
    max-width: none;
    max-height: 100lvw;
    opacity: 0.75;
}

.intro__description {
    font-size: clamp(1.75rem, 4.8148vi + 0.6667rem, 5rem);
}

.intro__button {
    font-weight: 600;
    color: hsl(var(--mom-white));
    background-color: hsl(var(--mom-red));
    border: none;
    text-transform: uppercase;
}

:is(body:has(.teaser), body:has(.set-question__header-question)) {
    --foreground: var(--mom-white);
    --background: var(--mom-black);
}

:is(body:has(.teaser), body:has(.set-question__header-question)) .dialog__overlay {
    --foreground: var(--mom-black);
    --background: var(--mom-white);

    color: hsl(var(--foreground));
}

.choice__option {
    color: hsl(var(--background));
    font-weight: 600;
    letter-spacing: 0.05em;
    border: none;
    gap: 0.75em;
}

@media (hover) and (pointer: fine) {
    .choice__option:hover {
        color: hsl(var(--foreground));
    }
}

.choice__option:is(:active,.choice__option[data-state=on]) {
    color: hsl(var(--foreground));
}

.choice--type-single .choice__option-indicator {
    background: hsl(var(--foreground));
    border-radius: 1e5px;
}

.choice--type-single .choice__option-indicator:after {
    border-radius: 1e5px;
}

.set-card__card {
    --foreground: var(--background);
    color: hsl(var(--mom-black));
}

.set-card__header .icon {
    color: hsl(var(--mom-white));
    background: hsl(var(--mom-red));
    border: none;
    padding: 0.15em;
}

.sort__option-indicator {
    color: hsl(var(--foreground));
}

.sort__option:active, .sort__option[data-state=on] {
    color: hsl(var(--foreground));
}

.sort__option {
    --input: var(--foreground);
    font-weight: 600;
    letter-spacing: 0.05em;
}

@media (hover) and (pointer: fine) {
    .sort__option:hover {
        background: hsl(var(--accent));
    }
}

.lightbox__overlay {
    background: hsl(var(--mom-black) / 0.6);
}

.set-binary-question__options-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.set-binary-question__options .button {
    color: hsl(var(--foreground));
    background: transparent;
    border: 3px solid hsl(var(--foreground));
    border-radius: 1e5px;
    padding: 1.5em;
}

@media (hover) and (pointer: fine) {
    .set-binary-question__options .button:hover {
        border-color: hsl(var(--foreground)) !important;
    }
}

.set-binary-question__options .button .icon {
    width: 3em;
    height: 3em;
}

.set-binary-question__options .button:active, .set-binary-question__options .button[data-state=on] {
    border-color: hsl(var(--foreground)) !important;
    background: hsl(var(--accent));
}

.set-binary-question--variant-swipe:before {
    background: transparent;
}


.outro-rich-text-score__text {
    font-size: var(--text-xl) !important;
    font-weight: 600;
    text-align: center;
}

.outro-results__header-title {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.avatar__image-fallback.outro-results-navigation__tab-icon {
    display: none;
}

.avatar.outro-results-navigation__tab {
    text-decoration: none;
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    border: 2px solid transparent;
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: 0.05em;
    padding: 0.375em 0.75em;
}

.avatar.outro-results-navigation__tab[aria-current] {
    background: hsl(var(--mom-red));
}

.set-result-question-item__open {
    display: none;
}

.pill {
    font-weight: 600;
    letter-spacing: 0.05em;
    border-width: 2px;
}

.accordion {
    --accent: 0 0% 85% !important;
}

.intro__description-text {
    color: hsl(var(--background));
    background: hsl(var(--foreground));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.45;
    padding: 0 0.1em;
}

.set-card__figure {
    background: hsl(var(--mom-white));
}

.button--size-small,
.button--size-base {
    padding: 0.375em 0.75em;
}

.button--size-small.button--shape-icon,
.button--size-base.button--shape-icon
{
    padding: 0.375em;
}

.button--size-large {
    padding: 0.75em 1.25em;
}

.button--size-large.button--shape-icon {
    padding: 0.75em;
}

.outro-results-navigation__tab-label {
    width: auto;
    height: auto;
    overflow: visible;
}

.table__header {
    text-transform: none;
    letter-spacing: 0.05em;
}

.set-result-question-title__index {
    font-weight: 600;
    letter-spacing: 0.05em;
}

.set-result-question-title__question {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.outro-results__header-description {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.set-result-question-table__cell {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.outro-results-navigation {
    gap: 1.5em;
}

.button-group {
    gap: 2em;
}

.set-question__header-question {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.teaser__slides-title {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.rich-text-share {
    gap: 1.5em;
}

.rich-text {
    font-size: var(--text-lg);
}

.teaser__slides-slide .rich-text {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
}

.set-single-choice-question__options,
.set-multiple-choice-question__options{
    gap: 1em;
}

.sort__option,
.choice__option {
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    padding: 0.5em 0.375em;
}

.sort__option-indicator,
.choice__option-indicator {
    width: 1lh;
    height: 1lh;
}

.choice__option-indicator {
    padding: 0.25em !important;
    margin-left: 0.15em !important;
}

.dialog__content {
    padding-top: calc(var(--gap) * 2.5);
}

.dialog__title {
    padding-right: calc(var(--gap) * 2.5);
}