.custom-lens-color-options{overflow:hidden}.custom-lens-color-options__inner{position:relative}.custom-lens-color-options__header{max-width:74rem}.custom-lens-color-options__heading{margin:0;color:var(--color-foreground);font-size:5.2rem;font-weight:700;line-height:.95}.custom-lens-color-options__intro{max-width:58rem;margin-top:3.6rem;color:var(--color-foreground);font-size:1.4rem;font-weight:700;line-height:1.1}.custom-lens-color-options__intro>*{margin-top:0}.custom-lens-color-options__intro>*:last-child{margin-bottom:0}.colors-game{--play-offset-x: 0px;--play-offset-y: 0px;--selector-progress: 0%;margin-top:5rem}.colors-game__stage{position:relative;min-height:44rem}.colors-game__panel{position:absolute;top:0;right:0;bottom:0;left:0;display:block;margin:0;opacity:0;pointer-events:none;transform:translateY(1.4rem);transition:opacity .42s ease,transform .52s ease,visibility 0s linear .42s;visibility:hidden}.colors-game__panel.is-active{position:relative;opacity:1;pointer-events:auto;transform:translateY(0);transition-delay:0s;visibility:visible}.colors-game__badge{width:fit-content;min-width:8.4rem;margin:0 auto 3rem;border:.1rem solid var(--color-foreground);border-radius:8px;padding:.5rem 1.6rem;color:var(--color-foreground);font-size:1.8rem;font-weight:700;line-height:1;text-align:center;text-transform:uppercase;opacity:0;transform:translateY(-.8rem);transition:opacity .36s ease 80ms,transform .42s ease 80ms}.colors-game__panel.is-active .colors-game__badge{opacity:1;transform:translateY(0)}.colors-game__visual{position:relative;display:grid;min-height:34rem;place-items:center}.colors-game__lens{position:relative;z-index:1;width:min(36rem,54vw);aspect-ratio:1;overflow:hidden;border-radius:50%;opacity:0;transform:scale(.975);transition:opacity .42s ease .12s,transform .62s cubic-bezier(.22,1,.36,1) .12s}.colors-game__panel.is-active .colors-game__lens{opacity:1;transform:scale(1)}.colors-game__lens:before,.colors-game__lens:after{content:"";position:absolute;z-index:2;width:.9rem;height:.9rem;pointer-events:none}.colors-game__lens:before{top:43%;left:20%}.colors-game__lens:after{right:12%;bottom:38%}.colors-game__lens:before,.colors-game__lens:after{background:linear-gradient(var(--color-foreground),var(--color-foreground)) center / 100% .1rem no-repeat,linear-gradient(var(--color-foreground),var(--color-foreground)) center / .1rem 100% no-repeat}.colors-game__lens-image{display:block;position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover}.colors-game__annotation{position:absolute;z-index:2;max-width:27rem;margin:0;color:var(--color-foreground);font-size:1.5rem;font-weight:700;line-height:1.1;opacity:0;transition:opacity .42s ease .21s,transform .52s ease .21s}.colors-game__annotation:after{content:"";position:absolute;top:50%;height:.1rem;background:rgb(var(--color-foreground-rgb) / .16)}.colors-game__annotation--left{top:calc(50% - 1rem);right:calc(50% + 27rem);left:auto;text-align:right;transform:translate(-1.2rem)}.colors-game__annotation--left:after{left:calc(100% + 1.2rem);width:14.6rem;transform:rotate(-7deg);transform-origin:left center}.colors-game__annotation--right{top:calc(50% - 8.6rem);left:calc(50% + 25.2rem);right:auto;transform:translate(1.2rem)}.colors-game__annotation--right:after{right:calc(100% + 1.2rem);width:14.8rem;transform:rotate(-48deg);transform-origin:right center}.colors-game__panel.is-active .colors-game__annotation{opacity:1;transform:translate(0)}.colors-game__info{display:flex;flex-direction:column;align-items:end;justify-content:end}.colors-game__info span{color:#000;font-size:14px}.colors-game__play{right:0;bottom:3rem;z-index:4;min-width:11.6rem;border:.1rem solid var(--color-foreground);border-radius:100%;padding:0;height:69px;background:var(--color-background);color:var(--color-foreground);cursor:pointer;font-size:1.6rem;font-weight:700;line-height:1;text-align:center;text-transform:uppercase;transition:background-color var(--duration-short) ease,color var(--duration-short) ease,transform .42s ease;animation:myAnimation 1s ease-in-out infinite}@keyframes myAnimation{0%{transform:rotate(0)}20%{transform:rotate(20deg)}40%{transform:rotate(-20deg)}60%{transform:rotate(20deg)}80%{transform:rotate(-20deg)}to{transform:rotate(20deg)}}.colors-game.is-playing .colors-game__play{animation:colors-game-play-float 1.5s ease-in-out infinite alternate}.colors-game__controls{min-width:0;margin:2rem 0 0;border:0;padding:0}.colors-game__selector{position:relative;height:1.8rem;overflow:visible;border-radius:999px;background:var(--selector-gradient)}.colors-game__selector__points{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:grid;grid-template-columns:repeat(var(--color-count),minmax(0,1fr))}.colors-game__selector__points:before{content:"";position:absolute;top:50%;right:.4rem;left:.4rem;height:.1rem;background:rgb(var(--color-foreground-rgb) / .16);transform:translateY(-50%);pointer-events:none}.colors-game__selector-dragger{position:absolute;top:50%;left:var(--selector-progress);z-index:2;display:block;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--color-foreground);box-shadow:0 0 0 .1rem rgba(var(--color-background),.35);transform:translate(-50%,-50%);transition:left .56s cubic-bezier(.22,1,.36,1);pointer-events:none}.colors-game__point{position:relative;min-width:0;min-height:1.8rem;border:0;padding:0;background:transparent;cursor:pointer}.colors-game__point:before{content:"";position:absolute;top:50%;left:50%;width:.4rem;height:.4rem;border-radius:50%;background:var(--color-foreground);transform:translate(-50%,-50%);transition:box-shadow var(--duration-short) ease,opacity var(--duration-short) ease}.colors-game__point:focus-visible:before{box-shadow:0 0 0 .4rem rgba(var(--color-background),.65)}.colors-game__list{display:grid;grid-template-columns:repeat(var(--color-count),minmax(7rem,1fr));gap:1.6rem;margin:3.2rem 0 0;padding:0;list-style:none}.colors-game__list-button{display:grid;width:100%;min-width:0;border:0;padding:0;background:transparent;color:var(--color-foreground);cursor:pointer;font:inherit;justify-items:center;row-gap:1.2rem}.colors-game__swatch{display:block;width:4.8rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 24%,rgba(255,255,255,.22),transparent 34%),linear-gradient(180deg,var(--swatch-top),var(--swatch-bottom));box-shadow:inset 0 0 0 .1rem rgb(var(--color-foreground-rgb) / .08);transition:box-shadow var(--duration-short) ease,transform var(--duration-short) ease}.colors-game__name{display:block;max-width:100%;overflow-wrap:anywhere;font-size:1.1rem;font-weight:700;line-height:1.1}.colors-game__list-button:hover .colors-game__swatch,.colors-game__list-button:focus-visible .colors-game__swatch,.colors-game__list-button.is-active .colors-game__swatch{box-shadow:inset 0 0 0 .1rem rgb(var(--color-foreground-rgb) / .14),0 0 0 .3rem rgb(var(--color-foreground-rgb) / .12);transform:translateY(-.2rem)}@keyframes colors-game-play-float{0%{translate:0 -.2rem}to{translate:0 .6rem}}@media screen and (max-width:989px){.custom-lens-color-options__heading{font-size:4.2rem}.colors-game__annotation{max-width:15rem}.colors-game__annotation:after{width:8rem}}@media screen and (max-width:989px){.custom-lens-color-options__heading{font-size:3.6rem}.custom-lens-color-options__intro{margin-top:2rem}.colors-game{margin-top:3.2rem}.colors-game__stage{min-height:0}.colors-game__badge{min-width:7.2rem;margin-bottom:2rem;font-size:1.5rem}.colors-game__visual{min-height:0;padding-bottom:8rem}.colors-game__lens{width:min(46rem,82vw)}.colors-game__lens:before,.colors-game__lens:after{display:none}.colors-game__annotation{position:absolute;top:inherit;bottom:0;right:auto;left:auto;max-width:40%;margin:1.8rem auto 0;text-align:center;min-height:33px;font-size:13px}.colors-game__annotation:after{content:none}.colors-game__annotation--left{order:2;left:0}.colors-game__annotation--right{order:3;right:0}.colors-game__play{bottom:-6.2rem;font-size:1.4375rem;transform:translate(0);position:relative;left:0;min-width:4.6rem}.colors-game__controls{margin-top:4.4rem}.colors-game__list{grid-template-columns:repeat(auto-fit,minmax(2rem,1fr));gap:1.6rem .1rem;margin-top:2.4rem}.colors-game__swatch{width:2rem}.colors-game__name{font-size:.6rem}}
/*# sourceMappingURL=/cdn/shop/t/24/assets/custom-lens-color-options.css.map */