.cq__ring{position:relative;width:var(--ring-size, 216px);height:var(--ring-size, 216px);margin:0 auto}.cq__ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.cq__ring circle{fill:none}.cq__ring-track{stroke:#eeeae4;stroke-width:5}.cq__ring-bleed{stroke:#1b6fdd;stroke-width:11;opacity:.42;filter:blur(13px)}.cq__ring-body{stroke:url(#cqArcGrad);stroke-width:5}@keyframes cqRingFill{0%{stroke-dashoffset:var(--circ)}to{stroke-dashoffset:var(--target)}}.cq__ring-bleed,.cq__ring-body{stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);animation:cqRingFill 1.35s cubic-bezier(.16,.84,.32,1) .2s forwards}.cq__ring-num{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:Libre Caslon Display,Georgia,serif;color:var(--ink, #141210);letter-spacing:-.025em}.cq__ring-num b{position:relative;font-weight:400;font-size:var(--ring-num, 78px);line-height:1}.cq__ring-num i{position:absolute;left:100%;bottom:.14em;margin-left:.04em;font-style:normal;font-size:20px;letter-spacing:0;color:#9c968f}@media(max-width:720px){.cq__ring{--ring-size: 178px;--ring-num: 64px}.cq__ring-num i{font-size:17px}}@media(prefers-reduced-motion:reduce){.cq__ring-bleed,.cq__ring-body{animation:none;stroke-dashoffset:var(--target)}}@property --cqp{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.cqg .cq__steps .cq__step .cq__stepdot{position:relative;flex:0 0 auto;width:var(--cqr-size, 26px);height:var(--cqr-size, 26px);border-radius:50%;background:transparent;border:var(--cqr-w, 2px) solid rgba(20,18,16,.1);box-shadow:none;overflow:visible;transition:border-color .4s cubic-bezier(.16,1,.3,1)}.cqg .cq__steps .cq__step .cq__stepdot:before{content:"";position:absolute;inset:calc(-1 * var(--cqr-w, 2px));border-radius:50%;opacity:0;background:conic-gradient(from -90deg,var(--sel-a, #93DDF9) 0deg,var(--sel-b, #6885E1) 180deg,var(--sel-a, #93DDF9) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%),conic-gradient(from -90deg,#000 var(--cqp),transparent var(--cqp));mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%),conic-gradient(from -90deg,#000 var(--cqp),transparent var(--cqp));-webkit-mask-composite:source-in;mask-composite:intersect}.cqg .cq__steps .cq__step .cq__stepdot:after{content:"";position:absolute;left:33%;top:15%;width:28%;height:52%;border:solid var(--sel-b, #6885E1);border-width:0 var(--cqr-w, 2px) var(--cqr-w, 2px) 0;border-radius:1px;transform:rotate(45deg) scale(0);transform-origin:50% 50%;opacity:0}@keyframes cqStepArc{0%{--cqp: 0deg}to{--cqp: 360deg}}@keyframes cqStepCheck{0%{transform:rotate(45deg) scale(0);opacity:0}55%{transform:rotate(45deg) scale(1.14);opacity:1}to{transform:rotate(45deg) scale(1);opacity:1}}@keyframes cqStepHalo{0%{box-shadow:0 0 color-mix(in srgb,var(--sel-a, #93DDF9) 40%,transparent)}to{box-shadow:0 0 14px 2px color-mix(in srgb,var(--sel-a, #93DDF9) calc(var(--cqr-glow, .55) * 100%),transparent)}}.cqg .cq__steps .cq__step.is-active .cq__stepdot{border-color:#14121012;animation:cqStepHalo var(--cqr-dur, 1.05s) cubic-bezier(.16,1,.3,1) forwards}.cqg .cq__steps .cq__step.is-active .cq__stepdot:before{opacity:1;animation:cqStepArc var(--cqr-dur, 1.05s) cubic-bezier(.16,1,.3,1) forwards}.cqg .cq__steps .cq__step.is-active .cq__stepdot:after{animation:cqStepCheck calc(var(--cqr-dur, 1.05s) * .34) cubic-bezier(.16,1,.3,1) calc(var(--cqr-dur, 1.05s) * .88) forwards}.cqg .cq__steps .cq__step.is-done .cq__stepdot{border-color:transparent;background:color-mix(in srgb,var(--sel-a, #93DDF9) 14%,transparent);box-shadow:0 0 12px 1px color-mix(in srgb,var(--sel-a, #93DDF9) calc(var(--cqr-glow, .55) * 70%),transparent);animation:none}.cqg .cq__steps .cq__step.is-done .cq__stepdot:before{opacity:1;--cqp: 360deg;animation:none}.cqg .cq__steps .cq__step.is-done .cq__stepdot:after{transform:rotate(45deg) scale(1);opacity:1;animation:none}@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)){.cqg .cq__steps .cq__step.is-active .cq__stepdot:before,.cqg .cq__steps .cq__step.is-done .cq__stepdot:before{opacity:1;animation:none;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%);mask:radial-gradient(farthest-side,transparent calc(100% - var(--cqr-w, 2px) - var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-w, 2px) + var(--cqr-aa, .75px)),#000 calc(100% - var(--cqr-aa, .75px)),transparent 100%)}}@media(max-width:720px){.cqg .cq__steps .cq__step .cq__stepdot{--cqr-size: 24px}}@media(prefers-reduced-motion:reduce){.cqg .cq__steps .cq__step .cq__stepdot,.cqg .cq__steps .cq__step .cq__stepdot:before,.cqg .cq__steps .cq__step .cq__stepdot:after{animation:none!important}.cqg .cq__steps .cq__step.is-active .cq__stepdot:before{opacity:1;--cqp: 360deg}.cqg .cq__steps .cq__step.is-active .cq__stepdot:after{transform:rotate(45deg) scale(1);opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/charm-quiz-ring.css.map */