.wp-block-lohko-finder-demo{--finder-demo-accent:var(--wp--preset--color--royalblue);--finder-demo-ink:var(--wp--preset--color--lilyblue);--finder-demo-muted:var(--wp--preset--color--greyblue);height:470px;margin-inline:auto;max-width:540px;position:relative;width:100%;.finder-demo__window{backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);background:color-mix(in srgb,var(--wp--preset--color--darkestblue) 82%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 10%,transparent);border-radius:16px;box-shadow:0 32px 70px color-mix(in srgb,var(--wp--preset--color--black) 40%,transparent);box-sizing:border-box;left:0;overflow:hidden;position:absolute;top:0;width:87%}.finder-demo__chrome{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--white) 2%,transparent);border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--white) 7%,transparent);display:flex;gap:6px;height:34px;padding:0 14px;span{border:1.5px solid var(--wp--preset--color--coral);border-radius:50%;box-sizing:border-box;height:9px;width:9px}span:nth-child(2){border-color:var(--wp--preset--color--amber)}span:nth-child(3){border-color:var(--wp--preset--color--green)}}.finder-demo__body{gap:18px;padding:22px 22px 70px}.finder-demo__body,.finder-demo__progress{align-items:center;display:flex;flex-direction:column}.finder-demo__progress{gap:8px;width:100%}.finder-demo__progress-track{background:color-mix(in srgb,var(--finder-demo-accent) 18%,transparent);border-radius:3px;display:block;height:6px;overflow:hidden;width:100%}.finder-demo__progress-bar{background:linear-gradient(90deg,var(--finder-demo-accent),var(--wp--preset--color--cyan));border-radius:3px;display:block;height:100%;transition:width .35s ease}.finder-demo__progress-count{color:var(--finder-demo-muted);font-size:.71875rem;font-weight:600}.finder-demo__question{align-items:center;display:none;flex-direction:column;gap:18px;width:100%;&.is-active{display:flex}}.finder-demo__done-title,.finder-demo__question-text{color:var(--wp--preset--color--white);font-size:1rem;font-weight:700;line-height:1.35;margin:0;text-align:center}.finder-demo__answers{display:flex;gap:14px;justify-content:center;width:100%}.finder-demo__answer{--finder-demo-answer:var(--wp--preset--color--royalblue);align-items:center;background:none;border:0;color:inherit;cursor:pointer;display:flex;flex:0 1 124px;flex-direction:column;font:inherit;gap:10px;margin:0;min-width:0;padding:0;&:focus-visible{outline:none;.finder-demo__circle{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px}}}.finder-demo__answer:nth-child(3n+2){--finder-demo-answer:var(--wp--preset--color--purple)}.finder-demo__answer:nth-child(3n+3){--finder-demo-answer:var(--wp--preset--color--teal)}.finder-demo__circle{align-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--finder-demo-answer) 45%,var(--wp--preset--color--black)) 0,var(--finder-demo-answer) 100%);border:2px solid transparent;border-radius:50%;box-sizing:border-box;color:var(--wp--preset--color--white);display:flex;flex-shrink:0;height:88px;justify-content:center;position:relative;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;width:88px}.finder-demo__answer:hover .finder-demo__circle{box-shadow:0 10px 24px color-mix(in srgb,var(--wp--preset--color--black) 35%,transparent);transform:translateY(-3px)}.finder-demo__answer.is-picked .finder-demo__circle{border-color:var(--finder-demo-accent)}.finder-demo__check{align-items:center;background:var(--finder-demo-accent);border-radius:50%;box-shadow:0 4px 12px color-mix(in srgb,var(--wp--preset--color--black) 35%,transparent);display:none;height:30px;justify-content:center;position:absolute;width:30px}.finder-demo__answer.is-picked .finder-demo__check{display:flex}.finder-demo__answer-label{color:var(--finder-demo-ink);font-size:.78125rem;font-weight:600;line-height:1.3;text-align:center}.finder-demo__done{align-items:center;display:none;flex-direction:column;gap:12px;padding:0 0 18px}&.is-done .finder-demo__done{display:flex}.finder-demo__done-text{color:var(--finder-demo-muted);font-size:.84375rem;margin:0;text-align:center}.finder-demo__restart{background:color-mix(in srgb,var(--wp--preset--color--white) 4%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 16%,transparent);border-radius:10px;color:var(--wp--preset--color--white);cursor:pointer;font:inherit;font-size:.84375rem;font-weight:600;margin:0;padding:10px 18px;transition:background-color .2s ease;&:hover{background:color-mix(in srgb,var(--wp--preset--color--white) 8%,transparent)}&:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px}}.finder-demo__connector{color:color-mix(in srgb,var(--finder-demo-accent) 70%,transparent);display:block;left:7.4%;position:absolute;top:330px}.finder-demo__card{background:color-mix(in srgb,var(--wp--preset--color--darkestblue) 96%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 12%,transparent);border-radius:16px;box-shadow:0 28px 60px color-mix(in srgb,var(--wp--preset--color--black) 50%,transparent);box-sizing:border-box;display:flex;gap:14px;padding:12px;position:absolute;right:0;top:290px;transition:transform .26s ease,box-shadow .26s ease;width:67.4%;&.is-pulsing{box-shadow:0 34px 70px color-mix(in srgb,var(--finder-demo-accent) 35%,transparent);transform:translateY(-4px) scale(1.02)}}.finder-demo__tiles{border-radius:12px;display:block;flex:0 0 116px;height:140px;overflow:hidden;position:relative}.finder-demo__tile{--finder-demo-tile-from:var(--wp--preset--color--royalblue);--finder-demo-tile-to:var(--wp--preset--color--cyan);align-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--finder-demo-tile-from) 75%,var(--wp--preset--color--black)) 0,var(--finder-demo-tile-to) 100%);color:var(--wp--preset--color--dark);display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity .3s ease;&.is-active{opacity:1}}.finder-demo__tile:nth-child(3n+2){--finder-demo-tile-from:var(--wp--preset--color--purple);--finder-demo-tile-to:var(--wp--preset--color--royalblue)}.finder-demo__tile:nth-child(3n+3){--finder-demo-tile-from:var(--wp--preset--color--teal);--finder-demo-tile-to:var(--wp--preset--color--cyan)}.finder-demo__product-image{display:block;height:auto;max-width:80%}.finder-demo__shade{fill:color-mix(in srgb,var(--wp--preset--color--slateblue) 65%,var(--wp--preset--color--dark))}.finder-demo__shine{fill:color-mix(in srgb,var(--wp--preset--color--white) 35%,transparent)}.finder-demo__card-body{display:flex;flex:1;flex-direction:column;gap:7px;min-width:0;padding:4px 4px 2px 0}.finder-demo__card-label{color:var(--wp--preset--color--cyan);font-size:.71875rem;font-weight:600}.finder-demo__product{color:var(--wp--preset--color--white);display:none;font-size:1.0625rem;font-weight:700;&.is-active{display:block}}.finder-demo__reasons{display:flex;flex-direction:column;gap:7px;list-style:none;margin:0;padding:0}.finder-demo__reason{align-items:center;color:var(--finder-demo-ink);display:flex;font-size:.78125rem;gap:7px;line-height:1.35;margin:0;padding:0;&[hidden]{display:none}}.finder-demo__reason-icon{color:var(--finder-demo-accent);flex-shrink:0}.finder-demo__cart{align-self:flex-start;background:var(--wp--preset--gradient--royalblue-to-cyan);border-radius:999px;color:var(--wp--preset--color--dark);font-size:.84375rem;font-weight:700;margin-top:4px;padding:10px 18px}}@media (max-width:767px){.wp-block-lohko-finder-demo{height:auto;.finder-demo__window{position:relative;width:100%}.finder-demo__connector{display:none}.finder-demo__card{margin:-44px 10px 0;position:relative;right:auto;top:auto;width:auto}.finder-demo__answer{flex-basis:30%}.finder-demo__circle{height:72px;width:72px}}}@media (prefers-reduced-motion:reduce){.wp-block-lohko-finder-demo{.finder-demo__card,.finder-demo__circle,.finder-demo__progress-bar,.finder-demo__restart,.finder-demo__tile{transition:none}.finder-demo__answer:hover .finder-demo__circle{transform:none}}}