.skin-quiz{position:relative;overflow:hidden;isolation:isolate;background-color:rgb(var(--quiz-background));color:rgb(var(--quiz-text));padding-inline:2rem;padding-block:max(2.8rem,calc(var(--section-padding-top) * .75)) max(2.8rem,calc(var(--section-padding-bottom) * .75))}@media screen and (min-width:750px){.skin-quiz{padding-inline:4rem;padding-block:max(4rem,var(--section-padding-top)) max(4rem,var(--section-padding-bottom))}}.skin-quiz__app,.skin-quiz__setup-note{position:relative;z-index:1}.skin-quiz__app{display:block}.skin-quiz__setup-note{margin:0;opacity:.7}.skin-quiz__progress{display:flex;align-items:center;gap:2rem;margin-bottom:3.2rem}.skin-quiz__progress[hidden]{display:none}.skin-quiz__progress-label{margin:0;flex:0 0 auto;font-family:var(--font-heading-family);font-size:calc(var(--font-heading-scale) * var(--font-h5-size));color:rgba(var(--quiz-text),.55)}.skin-quiz__progress-track{display:flex;flex:1 1 auto;gap:.6rem;max-width:32rem}.skin-quiz__progress-segment{position:relative;flex:1 1 0;height:3px;background-color:rgba(var(--quiz-text),.14);overflow:hidden}.skin-quiz__progress-segment:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgb(var(--color-highlight));transform:scaleX(0);transform-origin:left;transition:transform var(--duration-long) cubic-bezier(.22,.61,.36,1)}.skin-quiz__progress-segment.is-filled:after{transform:scaleX(1)}.skin-quiz__intro{text-align:center;max-width:66rem;margin:0 auto;padding:2.4rem 0}.skin-quiz__eyebrow{margin:0 0 1.6rem;color:rgba(var(--quiz-text),.55)}.skin-quiz__heading{margin:0;color:rgb(var(--quiz-text));text-wrap:balance}.skin-quiz__intro-text{margin:1.8rem auto 0;max-width:52ch;color:rgba(var(--quiz-text),.72)}.skin-quiz__intro-actions{margin-top:3.2rem}.skin-quiz__start,.skin-quiz__add{background-color:rgb(var(--quiz-button-background));color:rgb(var(--quiz-button-label))}.skin-quiz__question{margin:0 0 1rem;font-size:calc(var(--font-heading-scale) * var(--font-h2-size));color:rgb(var(--quiz-text));text-wrap:balance;max-width:24ch}.skin-quiz__question:focus,.skin-quiz__result-heading:focus{outline:none}.skin-quiz__help{margin:0 0 2.4rem;max-width:52ch;color:rgba(var(--quiz-text),.65)}.skin-quiz__step,.skin-quiz__result{max-width:68rem;margin:0 auto}.skin-quiz__progress{max-width:68rem;margin-inline:auto}.skin-quiz__options{display:grid;gap:1rem}.skin-quiz__option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.6rem;width:100%;padding:1.6rem 2rem;border:1px solid rgba(var(--quiz-text),.18);border-radius:var(--button-radius);background:transparent;font-family:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color var(--duration-default) ease,background-color var(--duration-default) ease,transform var(--duration-default) ease}.skin-quiz__option-key{display:flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;border:1px solid rgba(var(--quiz-text),.22);border-radius:var(--button-radius);font-family:var(--font-heading-family);font-size:calc(var(--font-heading-scale) * var(--font-h5-size));color:rgba(var(--quiz-text),.55);transition:border-color var(--duration-default) ease,background-color var(--duration-default) ease,color var(--duration-default) ease}.skin-quiz__option-label{display:block;font-size:calc(var(--font-heading-scale) * var(--font-h4-size));line-height:1.3}.skin-quiz__option-hint{display:block;margin-top:.4rem;font-size:1.4rem;line-height:1.5;color:rgba(var(--quiz-text),.6)}.skin-quiz__option-arrow{display:flex;align-items:center;opacity:0;transform:translate(-.6rem);transition:opacity var(--duration-default) ease,transform var(--duration-default) ease}.skin-quiz__option-arrow svg{width:1.6rem;height:1.2rem;fill:rgb(var(--color-highlight))}@media(hover:hover){.skin-quiz__option:hover{border-color:rgba(var(--quiz-text),.4);background-color:rgba(var(--quiz-text),.05)}.skin-quiz__option:hover .skin-quiz__option-key{border-color:rgb(var(--color-highlight));background-color:rgb(var(--color-highlight));color:rgb(var(--quiz-background))}.skin-quiz__option:hover .skin-quiz__option-arrow{opacity:1;transform:none}}.skin-quiz__option:active{transform:scale(.995)}.skin-quiz__controls{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:2.4rem}.skin-quiz__back,.skin-quiz__restart{padding:0;border:0;background:none;font-family:inherit;color:rgba(var(--quiz-text),.7);font-size:1.4rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color var(--duration-default) ease}@media(hover:hover){.skin-quiz__back:hover,.skin-quiz__restart:hover{color:rgb(var(--color-highlight))}}.skin-quiz__reassurance{font-size:1.3rem;color:rgba(var(--quiz-text),.45)}.skin-quiz__result-heading{margin:0 0 1.4rem;color:rgb(var(--quiz-text));text-wrap:balance}.skin-quiz__result-text{margin-bottom:3.2rem;max-width:56ch;color:rgba(var(--quiz-text),.72)}.skin-quiz__routine{display:grid;gap:1px;margin:0 0 3.2rem;padding:0;list-style:none;background-color:rgba(var(--quiz-text),.14);border:1px solid rgba(var(--quiz-text),.14)}.skin-quiz__step-item{display:grid;grid-template-columns:7.2rem 1fr auto;gap:1.8rem;align-items:center;padding:1.6rem 2rem;background-color:rgb(var(--quiz-background))}.skin-quiz__step-media{position:relative;display:block;width:7.2rem;aspect-ratio:1;overflow:hidden;border-radius:var(--card-radius);background-color:rgb(var(--color-placeholder))}.skin-quiz__step-image{width:100%;height:100%;object-fit:cover;display:block}.skin-quiz__step-index{display:block;margin-bottom:.3rem;font-family:var(--font-heading-family);font-size:1.1rem;letter-spacing:.12em;color:rgb(var(--color-highlight))}.skin-quiz__step-name{display:block;font-size:calc(var(--font-heading-scale) * var(--font-h4-size));color:inherit}.skin-quiz__step-note{display:block;margin-top:.3rem;font-size:1.3rem;color:rgba(var(--quiz-text),.6)}.skin-quiz__step-price{white-space:nowrap;font-family:var(--font-price-family);font-size:calc(var(--font-heading-scale) * var(--font-h4-size))}.skin-quiz__result-actions{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.skin-quiz__error{margin-top:1.6rem;font-size:1.4rem;color:rgb(var(--color-critical))}.skin-quiz__stage{position:relative;transition:height var(--duration-long) cubic-bezier(.22,.61,.36,1)}.skin-quiz__stage.is-measuring{overflow:hidden}.skin-quiz__panel[hidden]{display:none}.skin-quiz__panel>*{opacity:0;transform:translateY(12px)}.skin-quiz__panel.is-active>*{animation:skin-quiz-rise var(--duration-long) cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i, 0) * 60ms)}@keyframes skin-quiz-rise{to{opacity:1;transform:none}}.skin-quiz__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.skin-quiz__backdrop-layer{position:absolute;display:block;will-change:transform}.skin-quiz--intensity-subtle{--quiz-bg-strength: .6}.skin-quiz--intensity-medium{--quiz-bg-strength: 1}.skin-quiz--intensity-strong{--quiz-bg-strength: 1.6}.skin-quiz--bg-aurora .skin-quiz__backdrop-layer{width:52rem;height:52rem;border-radius:50%;filter:blur(72px)}.skin-quiz--bg-aurora .skin-quiz__backdrop-layer--1{top:-16rem;left:-10rem;background:rgb(var(--color-highlight));opacity:calc(.3 * var(--quiz-bg-strength));animation:skin-quiz-drift-a 26s ease-in-out infinite}.skin-quiz--bg-aurora .skin-quiz__backdrop-layer--2{bottom:-20rem;right:-8rem;background:rgb(var(--color-highlight));opacity:calc(.2 * var(--quiz-bg-strength));animation:skin-quiz-drift-b 32s ease-in-out infinite}.skin-quiz--bg-aurora .skin-quiz__backdrop-layer--3{top:12%;right:24%;width:36rem;height:36rem;background:rgba(var(--quiz-text),.5);opacity:calc(.16 * var(--quiz-bg-strength));animation:skin-quiz-drift-a 38s ease-in-out infinite reverse}@keyframes skin-quiz-drift-a{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(9rem,6rem,0) scale(1.16)}}@keyframes skin-quiz-drift-b{0%,to{transform:translateZ(0) scale(1.1)}50%{transform:translate3d(-8rem,-5rem,0) scale(1)}}.skin-quiz--bg-mesh .skin-quiz__backdrop-layer--1{top:-30%;right:-30%;bottom:-30%;left:-30%;background:radial-gradient(circle at 20% 30%,rgba(var(--color-highlight),.55),transparent 45%),radial-gradient(circle at 78% 70%,rgba(var(--color-highlight),.3),transparent 46%),radial-gradient(circle at 55% 20%,rgba(var(--quiz-text),.2),transparent 40%);filter:blur(56px);opacity:calc(.55 * var(--quiz-bg-strength));animation:skin-quiz-mesh 34s ease-in-out infinite}.skin-quiz--bg-mesh .skin-quiz__backdrop-layer--2,.skin-quiz--bg-mesh .skin-quiz__backdrop-layer--3,.skin-quiz--bg-sheen .skin-quiz__backdrop-layer--2,.skin-quiz--bg-sheen .skin-quiz__backdrop-layer--3{display:none}@keyframes skin-quiz-mesh{0%,to{transform:translateZ(0) scale(1)}33%{transform:translate3d(-4%,3%,0) scale(1.1)}66%{transform:translate3d(3%,-3%,0) scale(1.05)}}.skin-quiz--bg-rings .skin-quiz__backdrop-layer{top:50%;left:50%;border-radius:50%;border:1px solid rgb(var(--color-highlight));transform:translate(-50%,-50%)}.skin-quiz--bg-rings .skin-quiz__backdrop-layer--1{width:36rem;height:36rem;animation:skin-quiz-breathe 14s ease-in-out infinite}.skin-quiz--bg-rings .skin-quiz__backdrop-layer--2{width:58rem;height:58rem;animation:skin-quiz-breathe 14s ease-in-out infinite 1.6s}.skin-quiz--bg-rings .skin-quiz__backdrop-layer--3{width:82rem;height:82rem;animation:skin-quiz-breathe 14s ease-in-out infinite 3.2s}@keyframes skin-quiz-breathe{0%,to{transform:translate(-50%,-50%) scale(.92);opacity:calc(.18 * var(--quiz-bg-strength))}50%{transform:translate(-50%,-50%) scale(1.08);opacity:calc(.55 * var(--quiz-bg-strength))}}.skin-quiz--bg-sheen .skin-quiz__backdrop-layer--1{top:-60%;bottom:-60%;left:-40%;width:45%;background:linear-gradient(100deg,transparent,rgba(var(--color-highlight),.6),rgba(var(--quiz-text),.12),transparent);filter:blur(44px);opacity:calc(.5 * var(--quiz-bg-strength));animation:skin-quiz-sheen 18s ease-in-out infinite}@keyframes skin-quiz-sheen{0%{transform:translateZ(0) rotate(8deg)}to{transform:translate3d(280%,0,0) rotate(8deg)}}.skin-quiz--bg-liquid .skin-quiz__backdrop-layer{width:50rem;height:50rem;background:rgb(var(--color-highlight));filter:blur(50px)}.skin-quiz--bg-liquid .skin-quiz__backdrop-layer--1{top:-14rem;left:-8rem;opacity:calc(.32 * var(--quiz-bg-strength));animation:skin-quiz-morph 19s ease-in-out infinite,skin-quiz-drift-a 30s ease-in-out infinite}.skin-quiz--bg-liquid .skin-quiz__backdrop-layer--2{bottom:-18rem;right:-6rem;opacity:calc(.24 * var(--quiz-bg-strength));animation:skin-quiz-morph 23s ease-in-out infinite reverse,skin-quiz-drift-b 34s ease-in-out infinite}.skin-quiz--bg-liquid .skin-quiz__backdrop-layer--3{top:22%;left:42%;width:34rem;height:34rem;background:rgba(var(--quiz-text),.6);opacity:calc(.14 * var(--quiz-bg-strength));animation:skin-quiz-morph 27s ease-in-out infinite,skin-quiz-drift-a 40s ease-in-out infinite reverse}@keyframes skin-quiz-morph{0%,to{border-radius:42% 58% 63% 37%/45% 42% 58% 55%}33%{border-radius:62% 38% 41% 59%/58% 63% 37% 42%}66%{border-radius:38% 62% 55% 45%/40% 48% 52% 60%}}.skin-quiz--bg-silk .skin-quiz__backdrop-layer{left:-25%;width:150%;height:72%;filter:blur(42px)}.skin-quiz--bg-silk .skin-quiz__backdrop-layer--1{top:-18%;border-radius:50% 50% 42% 58%/62% 55% 45% 38%;background:linear-gradient(104deg,transparent 8%,rgba(var(--color-highlight),.75) 34%,rgba(var(--quiz-text),.28) 52%,transparent 82%);opacity:calc(.5 * var(--quiz-bg-strength));animation:skin-quiz-fold-a 32s ease-in-out infinite}.skin-quiz--bg-silk .skin-quiz__backdrop-layer--2{bottom:-22%;border-radius:45% 55% 55% 45%/40% 48% 52% 60%;background:linear-gradient(82deg,transparent 12%,rgba(var(--quiz-text),.4) 40%,rgba(var(--color-highlight),.5) 62%,transparent 88%);opacity:calc(.4 * var(--quiz-bg-strength));animation:skin-quiz-fold-b 41s ease-in-out infinite}.skin-quiz--bg-silk .skin-quiz__backdrop-layer--3{top:22%;height:56%;border-radius:58% 42% 50% 50%/45% 60% 40% 55%;background:linear-gradient(122deg,transparent 20%,rgba(var(--color-highlight),.42) 50%,transparent 78%);opacity:calc(.32 * var(--quiz-bg-strength));animation:skin-quiz-fold-c 49s ease-in-out infinite}@keyframes skin-quiz-fold-a{0%,to{transform:translate3d(-3%,0,0) rotate(-7deg) scaleY(1);border-radius:50% 50% 42% 58%/62% 55% 45% 38%}50%{transform:translate3d(4%,3%,0) rotate(-2deg) scaleY(1.14);border-radius:42% 58% 55% 45%/48% 42% 58% 52%}}@keyframes skin-quiz-fold-b{0%,to{transform:translate3d(3%,0,0) rotate(5deg) scaleY(1.08);border-radius:45% 55% 55% 45%/40% 48% 52% 60%}50%{transform:translate3d(-4%,-3%,0) rotate(9deg) scaleY(1);border-radius:58% 42% 45% 55%/55% 40% 60% 45%}}@keyframes skin-quiz-fold-c{0%,to{transform:translate3d(0,2%,0) rotate(3deg);border-radius:58% 42% 50% 50%/45% 60% 40% 55%}50%{transform:translate3d(-5%,-2%,0) rotate(-4deg);border-radius:44% 56% 60% 40%/58% 44% 56% 42%}}.skin-quiz--bg-grid .skin-quiz__backdrop-layer--1{top:-15%;right:-15%;bottom:-15%;left:-15%;background-image:linear-gradient(rgb(var(--quiz-text)) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--quiz-text)) 1px,transparent 1px);background-size:6.4rem 6.4rem;opacity:calc(.14 * var(--quiz-bg-strength));-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 15%,transparent 68%);mask-image:radial-gradient(ellipse at 50% 50%,#000 15%,transparent 68%);animation:skin-quiz-grid 26s linear infinite}.skin-quiz--bg-grid .skin-quiz__backdrop-layer--2{top:50%;left:50%;width:46rem;height:46rem;margin:-23rem 0 0 -23rem;border-radius:50%;background:rgb(var(--color-highlight));filter:blur(80px);opacity:calc(.22 * var(--quiz-bg-strength));animation:skin-quiz-drift-a 34s ease-in-out infinite}.skin-quiz--bg-grid .skin-quiz__backdrop-layer--3{display:none}@keyframes skin-quiz-grid{to{transform:translate3d(6.4rem,6.4rem,0)}}.skin-quiz--bg-waves .skin-quiz__backdrop-layer{left:50%;width:200%;height:200%;border-radius:42%;transform-origin:50% 50%}.skin-quiz--bg-waves .skin-quiz__backdrop-layer--1{bottom:-172%;margin-left:-100%;background:rgba(var(--color-highlight),.85);opacity:calc(.3 * var(--quiz-bg-strength));animation:skin-quiz-wave 26s linear infinite}.skin-quiz--bg-waves .skin-quiz__backdrop-layer--2{bottom:-178%;margin-left:-100%;border-radius:45%;background:rgba(var(--quiz-text),.7);opacity:calc(.12 * var(--quiz-bg-strength));animation:skin-quiz-wave 34s linear infinite reverse}.skin-quiz--bg-waves .skin-quiz__backdrop-layer--3{display:none}@keyframes skin-quiz-wave{to{transform:rotate(360deg)}}.skin-quiz__backdrop-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;will-change:transform;animation:skin-quiz-kenburns 20s ease-in-out infinite alternate}.skin-quiz__backdrop-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgb(var(--quiz-background));opacity:calc(.9 - .25 * var(--quiz-bg-strength))}@keyframes skin-quiz-kenburns{0%{transform:scale(1.1) translate3d(3%,2%,0)}to{transform:scale(1.24) translate3d(-4.5%,-3%,0)}}@media screen and (max-width:749px){.skin-quiz__progress{flex-direction:column;align-items:stretch;gap:1rem;margin-bottom:3.2rem}.skin-quiz__progress-track,.skin-quiz__question{max-width:none}.skin-quiz__option{padding:1.6rem 1.8rem;gap:1.4rem}.skin-quiz__option-arrow{display:none}.skin-quiz__step-item{grid-template-columns:5.6rem 1fr;row-gap:.4rem}.skin-quiz__step-price{grid-column:2}.skin-quiz__step-media{width:5.6rem}}@media(prefers-reduced-motion:reduce){.skin-quiz__stage,.skin-quiz__option,.skin-quiz__option-key,.skin-quiz__option-arrow,.skin-quiz__progress-segment:after{transition:none}.skin-quiz__panel>*,.skin-quiz__panel.is-active>*{opacity:1;transform:none;animation:none}.skin-quiz__backdrop-layer{display:none}.skin-quiz__backdrop-image{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/76/assets/section-skin-quiz.css.map */