.retinol-quiz{--quiz-bg:#fff;--quiz-card-bg:#f5f5f5;--quiz-media-bg:#ececea;--quiz-text-color:#000;--quiz-muted-color:#9e9e9e;--quiz-border-color:#000;--quiz-progress-track-bg:#e1ded9;--quiz-progress-bar-bg:#000;--quiz-font-family:var(--brand-base-font-family);background-color:var(--quiz-bg);color:var(--quiz-text-color);font-family:var(--quiz-font-family);width:100%}.retinol-quiz__wrapper{display:flex;flex-direction:column;gap:0;width:100%}@media(min-width:1024px){.retinol-quiz__wrapper{align-items:stretch;flex-direction:row;gap:0;justify-content:center;margin:2.25rem auto 4rem;max-width:63.8125rem;min-height:28.375rem;padding:0}}.retinol-quiz__media-panel{aspect-ratio:375/216;background-color:var(--quiz-bg);height:auto;margin:0;overflow:hidden;padding:0;position:relative;width:100%}@media(min-width:1024px){.retinol-quiz__media-panel{align-self:stretch;aspect-ratio:auto;background-color:var(--quiz-media-bg);display:flex;flex:0 0 31.75rem;flex-direction:column;height:100%;justify-content:flex-start;max-width:49.755%;min-height:28.375rem;width:31.75rem}}.retinol-quiz__media-inner{display:block;height:100%;width:100%}@media(min-width:1024px){.retinol-quiz__media-inner{height:auto}}.retinol-quiz__hero-img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center bottom;object-position:center bottom;width:100%}@media(min-width:1024px){.retinol-quiz__hero-img{height:auto;-o-object-fit:contain;object-fit:contain}}.retinol-quiz__question-panel{display:flex;flex-direction:column;margin:0;padding:0;width:100%}@media(min-width:1024px){.retinol-quiz__question-panel{flex:0 0 32.0625rem;max-width:50.245%;min-height:28.375rem;width:32.0625rem}}.retinol-quiz__card{background-color:var(--quiz-card-bg);box-sizing:border-box;display:flex;flex-direction:column;min-height:24.875rem;width:100%}@media(min-width:1024px){.retinol-quiz__card{height:100%;min-height:28.375rem;padding:1.625rem 1.75rem 1.5625rem 2.875rem}}.retinol-quiz__progress-container{width:100%}.retinol-quiz__progress-container--desktop{display:none}@media(min-width:1024px){.retinol-quiz__progress-container--desktop{display:block;margin-bottom:1.25rem;max-width:27.4375rem}}.retinol-quiz__progress-container--mobile{display:block;margin-top:auto}@media(min-width:1024px){.retinol-quiz__progress-container--mobile{display:none}}.retinol-quiz__progress-track{background-color:var(--quiz-progress-track-bg);height:.25rem;overflow:hidden;position:relative;width:100%}@media(min-width:1024px){.retinol-quiz__progress-track{height:.1875rem}}.retinol-quiz__progress-bar{background-color:var(--quiz-progress-bar-bg);height:100%;transition:width .3s ease;width:20%}.retinol-quiz__step-content{padding:1.3125rem 1.0625rem 1.5rem;transition:opacity .18s ease,transform .18s ease}@media(min-width:1024px){.retinol-quiz__step-content{max-width:26.3125rem;padding:0}}.retinol-quiz__step-content--out-left{opacity:0;transform:translateX(-.75rem)}.retinol-quiz__step-content--out-right{opacity:0;transform:translateX(.75rem)}.retinol-quiz__step-counter{color:var(--quiz-text-color);font-size:.9375rem;font-weight:400;line-height:1.25rem;margin-bottom:1.125rem}.retinol-quiz__title{color:var(--quiz-text-color);font-size:1.875rem;font-weight:700;line-height:1.875rem;margin:0 0 1.25rem;word-break:break-word}@media(min-width:1024px){.retinol-quiz__title{margin-bottom:1.3125rem;min-height:5.625rem}}.retinol-quiz__subtitle{color:var(--quiz-muted-color);font-size:.75rem;line-height:1.125rem;margin:-.75rem 0 1rem}.retinol-quiz__options-container{display:grid;gap:.5rem .625rem;grid-template-columns:repeat(2,minmax(0,1fr));max-width:21.25rem;width:100%}@media(min-width:1024px){.retinol-quiz__options-container{gap:.375rem .3125rem;max-width:25.3125rem}}.retinol-quiz__option-btn{align-items:center;background-color:transparent;border:1px solid var(--quiz-border-color);color:var(--quiz-text-color);cursor:pointer;display:flex;font-family:var(--quiz-font-family);font-size:.75rem;font-weight:600;justify-content:center;line-height:1.25rem;min-height:2rem;padding:.375rem .625rem;text-align:center;transition:background-color .2s ease,color .2s ease;width:100%}.retinol-quiz__option-btn:hover{background-color:rgba(0,0,0,.05)}.retinol-quiz__option-btn:focus{outline:1px solid var(--quiz-border-color);outline-offset:2px}.retinol-quiz__option-btn.selected{background-color:var(--quiz-text-color);color:var(--quiz-bg)}.retinol-quiz__option-label{display:block}.retinol-quiz__footer{align-items:center;background-color:var(--quiz-bg);display:flex;justify-content:space-between;min-height:2.75rem;padding:.75rem .8125rem 1rem}@media(min-width:1024px){.retinol-quiz__footer{background-color:transparent;margin-top:auto;max-width:27.4375rem;min-height:2rem;padding:.5rem .625rem 0 0;width:100%}}.retinol-quiz__nav-btn{align-items:center;background-color:transparent;border:none;box-shadow:none;color:var(--quiz-text-color);cursor:pointer;display:inline-flex;flex:none;font-family:var(--quiz-font-family);font-size:.875rem;font-weight:400;gap:.625rem;line-height:1.5;outline:none;padding:.25rem 0;transition:opacity .2s ease,transform .2s ease;width:auto}@media(min-width:1024px){.retinol-quiz__nav-btn{font-size:.75rem;line-height:1.25rem}}.retinol-quiz__nav-btn:hover:not(:disabled){opacity:.8;text-decoration:none}.retinol-quiz__nav-btn.disabled,.retinol-quiz__nav-btn:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.retinol-quiz__nav-btn:focus:not(:focus-visible){outline:none}.retinol-quiz__nav-btn:focus-visible{border-radius:.125rem;outline:2px solid currentcolor;outline-offset:2px}.retinol-quiz__nav-btn .icon-regimen-arrow{display:inline-block;font-size:.4375rem;line-height:1;transition:transform .2s ease}.retinol-quiz__nav-btn .icon-regimen-arrow.rotate-180{transform:rotate(180deg)}.retinol-quiz__nav-btn--back{padding-left:3px}.retinol-quiz__nav-btn--back:hover:not(:disabled) .icon-regimen-arrow{transform:translateX(-3px) rotate(180deg)}.retinol-quiz__nav-btn--next{margin-left:auto;padding-right:3px}.retinol-quiz__nav-btn--next:hover:not(:disabled) .icon-regimen-arrow{transform:translateX(3px)}.retinol-quiz__nav-btn-text{text-decoration:none}@media(min-width:1024px){.retinol-quiz__nav-btn-text{text-decoration:underline;text-underline-offset:.1875rem}}.rotate-180{transform:rotate(180deg)}.retinol-quiz--theordinary,[data-brand=theordinary] .retinol-quiz{--quiz-bg:#fff;--quiz-card-bg:#f5f5f5;--quiz-media-bg:#ececea;--quiz-text-color:#000;--quiz-border-color:#000;--quiz-progress-track-bg:#d9d9d9;--quiz-progress-bar-bg:#000;--quiz-font-family:var(--brand-base-font-family)}