.wp-block-lohko-quiz-demo{--quiz-demo-right:var(--wp--preset--color--teal);--quiz-demo-wrong:var(--wp--preset--color--coral);--quiz-demo-ink:var(--wp--preset--color--lilyblue);--quiz-demo-muted:var(--wp--preset--color--greyblue);--quiz-demo-line:color-mix(in srgb,var(--wp--preset--color--white) 12%,transparent);display:flex;flex-direction:column;gap:24px;[hidden]{display:none!important}.quiz-demo__header{align-items:baseline;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}.quiz-demo__title{color:var(--wp--preset--color--white);font-size:.875rem;font-weight:700;margin:0}.quiz-demo__note{color:var(--quiz-demo-muted);font-size:.75rem;margin:0}.quiz-demo__grid{display:grid;gap:clamp(24px,4vw,40px);grid-template-columns:minmax(0,560fr) minmax(0,400fr)}.quiz-demo__player{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:18px;padding:clamp(20px,3vw,28px)}.quiz-demo__meta{color:var(--quiz-demo-muted);display:flex;font-size:.75rem;gap:12px;justify-content:space-between}.quiz-demo__progress{background:color-mix(in srgb,var(--wp--preset--color--white) 8%,transparent);border-radius:4px;display:block;height:4px}.quiz-demo__progress-fill{background:var(--wp--preset--gradient--royalblue-to-cyan);border-radius:inherit;display:block;height:100%;transition:width .3s ease;width:var(--quiz-demo-position)}.quiz-demo__questions{list-style:none}.quiz-demo__question,.quiz-demo__questions{display:flex;flex-direction:column;gap:18px;margin:0;padding:0}.quiz-demo__question-text,.quiz-demo__result{color:var(--wp--preset--color--white);font-size:1.25rem;font-weight:700;line-height:1.35;margin:0}.quiz-demo__options{display:flex;flex-direction:column;gap:10px}.quiz-demo__option{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--white) 5%,transparent);border:1px solid var(--quiz-demo-line);border-radius:10px;box-sizing:border-box;color:var(--quiz-demo-ink);cursor:pointer;display:flex;font:inherit;font-size:.9375rem;gap:10px;margin:0;min-height:52px;padding:14px 16px;text-align:left;transition:background-color .15s ease,border-color .15s ease;width:100%;&:not(:disabled):hover{border-color:var(--wp--preset--color--skyblue)}&:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px}&:disabled{cursor:default}&.is-correct{background:color-mix(in srgb,var(--quiz-demo-right) 14%,transparent);border-color:var(--quiz-demo-right)}&.is-correct,&.is-wrong{color:var(--wp--preset--color--white)}&.is-wrong{background:color-mix(in srgb,var(--quiz-demo-wrong) 14%,transparent);border-color:var(--quiz-demo-wrong)}}.quiz-demo__key{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--white) 9%,transparent);border-radius:6px;color:var(--quiz-demo-muted);display:inline-flex;flex:none;font-size:.6875rem;font-weight:700;height:22px;justify-content:center;width:22px}.quiz-demo__option.is-correct .quiz-demo__key{background:var(--quiz-demo-right);color:var(--wp--preset--color--dark)}.quiz-demo__option.is-wrong .quiz-demo__key{background:var(--quiz-demo-wrong);color:var(--wp--preset--color--dark)}.quiz-demo__feedback{font-size:.875rem;line-height:1.55;margin:0;&:empty{display:none}&.is-correct,&.is-wrong{border-radius:10px;padding:14px 16px}&.is-correct{background:color-mix(in srgb,var(--quiz-demo-right) 12%,var(--wp--preset--color--dark));color:color-mix(in srgb,var(--quiz-demo-right) 20%,var(--wp--preset--color--white))}&.is-wrong{background:color-mix(in srgb,var(--quiz-demo-wrong) 12%,var(--wp--preset--color--dark));color:color-mix(in srgb,var(--quiz-demo-wrong) 20%,var(--wp--preset--color--white))}}.quiz-demo__next{align-self:flex-end;background:var(--wp--preset--gradient--royalblue-to-cyan);border:0;border-radius:10px;color:var(--wp--preset--color--dark);cursor:pointer;font:inherit;font-size:.875rem;font-weight:700;padding:12px 20px;&:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px}}.quiz-demo__side,.quiz-demo__steps{display:flex;flex-direction:column;gap:14px}.quiz-demo__steps>.wp-block-lohko-cta-card{border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 9%,transparent);border-radius:12px;height:auto;padding:16px 18px;&:not(.has-background){background:color-mix(in srgb,var(--wp--preset--color--white) 3%,transparent)}}.quiz-demo__total{align-items:center;background:radial-gradient(260px 140px at 50% 40%,color-mix(in srgb,var(--wp--preset--color--royalblue) 22%,var(--wp--preset--color--darkestblue)) 0,var(--wp--preset--color--darkestblue) 100%);border:1px solid color-mix(in srgb,var(--wp--preset--color--royalblue) 20%,transparent);border-radius:12px;display:flex;gap:16px;justify-content:space-between;margin-top:auto;padding:18px}.quiz-demo__total-text{display:flex;flex-direction:column;gap:2px}.quiz-demo__score-label{color:var(--quiz-demo-muted);font-size:.75rem}.quiz-demo__total-value{color:var(--wp--preset--color--white);font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}.quiz-demo__restart{background:transparent;border:1px solid var(--wp--preset--color--lilyblue);border-radius:10px;color:var(--wp--preset--color--white);cursor:pointer;font:inherit;font-size:.8125rem;font-weight:700;padding:10px 16px;&:hover{background:color-mix(in srgb,var(--wp--preset--color--white) 5%,transparent)}&:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:3px}}}@media (max-width:991px){.wp-block-lohko-quiz-demo .quiz-demo__grid{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.wp-block-lohko-quiz-demo{.quiz-demo__option,.quiz-demo__progress-fill{transition:none}}}