.wp-block-lohko-spin-demo{--spin-demo-accent:var(--wp--preset--color--royalblue);--spin-demo-right:var(--wp--preset--color--teal);--spin-demo-wrong:var(--wp--preset--color--coral);--spin-demo-ink:var(--wp--preset--color--lilyblue);--spin-demo-muted:var(--wp--preset--color--greyblue);--spin-demo-line:color-mix(in srgb,var(--wp--preset--color--white) 12%,transparent);display:flex;flex-direction:column;gap:28px;[hidden]{display:none!important}.spin-demo__header{align-items:flex-end;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between}.spin-demo__title{color:var(--wp--preset--color--white);font-size:clamp(1.375rem,3vw,1.625rem);font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0}.spin-demo__caption{color:var(--spin-demo-muted);font-size:.75rem;margin:0}.spin-demo__steps{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}.spin-demo__step{background:color-mix(in srgb,var(--wp--preset--color--darkestblue) 70%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 12%,transparent);border-radius:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;margin:0;padding:22px;transition:opacity .3s ease,border-color .3s ease,box-shadow .3s ease;&.is-dim{opacity:.45}&.is-live{border-color:var(--spin-demo-accent);box-shadow:0 0 30px color-mix(in srgb,var(--spin-demo-accent) 18%,transparent)}}.spin-demo__label{color:var(--wp--preset--color--skyblue);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.spin-demo__step-title{color:var(--wp--preset--color--white);font-size:1.0625rem;font-weight:700;line-height:1.3;margin:0}.spin-demo__step-note{color:var(--spin-demo-muted);font-size:.8125rem;line-height:1.55;margin:auto 0 0}.spin-demo__wheel{height:212px;margin:0 auto;position:relative;width:200px}.spin-demo__pin{border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid var(--wp--preset--color--white);filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--wp--preset--color--black) 50%,transparent));height:0;left:50%;position:absolute;top:0;translate:-50% 0;width:0;z-index:1}.spin-demo__disc{height:200px;left:0;position:absolute;top:10px;transition:transform 3.2s cubic-bezier(.17,.67,.2,1);width:200px}.spin-demo__segment{path{fill:var(--spin-demo-segment);stroke:var(--wp--preset--color--dark);stroke-width:2}text{fill:var(--wp--preset--color--white);font-family:inherit;font-size:15px;font-weight:800}&:nth-child(6n+1){--spin-demo-segment:var(--wp--preset--color--royalblue)}&:nth-child(6n+2){--spin-demo-segment:color-mix(in srgb,var(--wp--preset--color--teal) 35%,var(--wp--preset--color--dark))}&:nth-child(6n+3){--spin-demo-segment:color-mix(in srgb,var(--wp--preset--color--purple) 40%,var(--wp--preset--color--dark))}&:nth-child(6n+4){--spin-demo-segment:color-mix(in srgb,var(--wp--preset--color--royalblue) 35%,var(--wp--preset--color--dark))}&:nth-child(6n+5){--spin-demo-segment:color-mix(in srgb,var(--wp--preset--color--teal) 55%,var(--wp--preset--color--dark))}&:nth-child(6n){--spin-demo-segment:color-mix(in srgb,var(--wp--preset--color--purple) 30%,color-mix(in srgb,var(--wp--preset--color--royalblue) 30%,var(--wp--preset--color--dark)))}}.spin-demo__hub{fill:var(--wp--preset--color--dark);stroke:var(--wp--preset--color--cyan);stroke-width:3}.spin-demo__spin{align-items:center;background:var(--wp--preset--gradient--royalblue-to-cyan);border:0;border-radius:10px;color:var(--wp--preset--color--dark);cursor:pointer;display:inline-flex;font:inherit;font-size:.875rem;font-weight:800;height:44px;justify-content:center;padding:0 16px;&:disabled{cursor:default;opacity:.6}}.spin-demo__tally{display:flex;flex-direction:column;gap:8px;margin-top:6px}.spin-demo__score-caption{color:var(--spin-demo-muted);font-size:.75rem}.spin-demo__total{color:var(--wp--preset--color--white);line-height:1;margin:0}.spin-demo__total-value{font-size:2.875rem;font-weight:800;letter-spacing:-.03em}.spin-demo__total-unit{color:var(--spin-demo-muted);font-size:1.125rem;font-weight:700}.spin-demo__gain{color:var(--spin-demo-right);font-size:.875rem;font-weight:800;min-height:1.25rem}.spin-demo__meter{background:color-mix(in srgb,var(--wp--preset--color--white) 8%,transparent);border-radius:999px;display:block;height:8px;overflow:hidden}.spin-demo__meter-fill{background:var(--wp--preset--gradient--royalblue-to-cyan);border-radius:inherit;display:block;height:100%;transition:width .6s ease}.spin-demo__points{align-self:flex-start;background:color-mix(in srgb,var(--spin-demo-accent) 18%,transparent);border-radius:999px;color:var(--wp--preset--color--skyblue);font-size:.6875rem;font-weight:700;padding:5px 10px}.spin-demo__question{color:var(--wp--preset--color--white);font-size:.9375rem;font-weight:700;line-height:1.4;margin:0}.spin-demo__options{display:flex;flex-direction:column;gap:8px}.spin-demo__option{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--white) 5%,transparent);border:1px solid var(--spin-demo-line);border-radius:10px;box-sizing:border-box;color:var(--spin-demo-ink);cursor:pointer;display:flex;font:inherit;font-size:.875rem;gap:10px;margin:0;padding:11px 14px;text-align:left;width:100%;&:not(:disabled):hover{border-color:var(--wp--preset--color--skyblue)}&:disabled{cursor:default}&.is-correct{background:color-mix(in srgb,var(--spin-demo-right) 14%,transparent);border-color:var(--spin-demo-right)}&.is-correct,&.is-wrong{color:var(--wp--preset--color--white)}&.is-wrong{background:color-mix(in srgb,var(--spin-demo-wrong) 14%,transparent);border-color:var(--spin-demo-wrong)}}.spin-demo__key{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--white) 9%,transparent);border-radius:6px;color:var(--spin-demo-muted);display:inline-flex;flex:none;font-size:.6875rem;font-weight:700;height:22px;justify-content:center;width:22px}.spin-demo__option.is-correct .spin-demo__key{background:var(--spin-demo-right);color:var(--wp--preset--color--dark)}.spin-demo__option.is-wrong .spin-demo__key{background:var(--spin-demo-wrong);color:var(--wp--preset--color--dark)}.spin-demo__board{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.spin-demo__row{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--white) 4%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 10%,transparent);border-radius:10px;color:var(--spin-demo-ink);display:flex;font-size:.875rem;gap:12px;margin:0;padding:12px 14px;&.is-me{background:color-mix(in srgb,var(--spin-demo-accent) 14%,transparent);border-color:var(--spin-demo-accent);color:var(--wp--preset--color--white)}}.spin-demo__rank{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--white) 8%,transparent);border-radius:50%;color:var(--wp--preset--color--white);display:inline-flex;flex:none;font-size:.75rem;font-weight:800;height:26px;justify-content:center;width:26px}.spin-demo__row.is-me .spin-demo__rank{background:var(--wp--preset--gradient--royalblue-to-cyan);color:var(--wp--preset--color--dark)}.spin-demo__row-score{color:var(--wp--preset--color--white);font-weight:800;margin-left:auto}.spin-demo__again{align-items:center;background:transparent;border:1px solid var(--wp--preset--color--lilyblue);border-radius:10px;color:var(--wp--preset--color--white);cursor:pointer;display:inline-flex;font:inherit;font-size:.8125rem;font-weight:700;height:40px;justify-content:center;&:hover{background:color-mix(in srgb,var(--wp--preset--color--white) 5%,transparent)}}.spin-demo__again,.spin-demo__option,.spin-demo__spin{&:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px}}}.wp-block-lohko-spin-demo .spin-demo__steps:has(>.spin-demo__step:nth-child(4)){gap:18px;grid-template-columns:repeat(4,minmax(0,1fr));.spin-demo__wheel{height:182px;width:170px}.spin-demo__disc{height:170px;width:170px}}@media (max-width:991px){.wp-block-lohko-spin-demo .spin-demo__steps,.wp-block-lohko-spin-demo .spin-demo__steps:has(>.spin-demo__step:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:575px){.wp-block-lohko-spin-demo .spin-demo__steps,.wp-block-lohko-spin-demo .spin-demo__steps:has(>.spin-demo__step:nth-child(4)){grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.wp-block-lohko-spin-demo{.spin-demo__disc,.spin-demo__meter-fill,.spin-demo__step{transition:none}}}