.kcq-tool{--kcq-ink:#17324d;--kcq-teal:#0f766e;--kcq-teal-dark:#115e59;--kcq-cyan:#0891b2;--kcq-blue:#2563eb;--kcq-orange:#ea580c;--kcq-green:#15803d;--kcq-red:#b91c1c;--kcq-muted:#64748b;position:relative;isolation:isolate;overflow:hidden;padding:clamp(1rem,3vw,2rem);border:1px solid #ccfbf1;border-radius:24px;background:linear-gradient(145deg,#f8fffe 0%,#ecfeff 54%,#eff6ff 100%);color:var(--kcq-ink);box-shadow:0 18px 50px rgba(15,118,110,.09)}
.kcq-bubble{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}.kcq-bubble-one{width:190px;height:190px;right:-70px;top:-75px;background:rgba(103,232,249,.24)}.kcq-bubble-two{width:145px;height:145px;left:-70px;bottom:-80px;background:rgba(153,246,228,.35)}
.kcq-hero{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1.25rem}.kcq-brand{display:flex;align-items:center;gap:1rem;min-width:260px}
.kcq-logo{position:relative;width:64px;height:64px;flex:0 0 auto;border:4px solid #fff;border-radius:20px;background:linear-gradient(145deg,#2dd4bf,var(--kcq-teal));box-shadow:0 9px 22px rgba(15,118,110,.25);transform:rotate(-4deg)}
.kcq-flask-neck{position:absolute;left:25px;top:10px;width:14px;height:19px;border:3px solid #fff;border-bottom:0}.kcq-flask-liquid{position:absolute;left:15px;bottom:10px;width:34px;height:27px;border:3px solid #fff;border-radius:5px 5px 13px 13px;background:linear-gradient(to top,#fbbf24 55%,transparent 56%);transform:skew(-9deg)}
.kcq-kicker{display:block;color:var(--kcq-teal);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.kcq-hero h2{margin:.15rem 0 .2rem;color:var(--kcq-ink);font-size:clamp(1.5rem,3vw,2rem);line-height:1.1}.kcq-hero p{max-width:37rem;margin:0;color:var(--kcq-muted);font-size:.92rem}
.kcq-stats{display:grid;grid-template-columns:repeat(4,minmax(78px,1fr));gap:.55rem}.kcq-stat{display:flex;align-items:center;gap:.45rem;min-width:82px;padding:.65rem .7rem;border:1px solid #ccfbf1;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(15,118,110,.05)}.kcq-stat-icon{width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:#ccfbf1;color:var(--kcq-teal);font-size:.75rem;font-weight:900}.kcq-stat strong{display:block;color:var(--kcq-ink);font-size:1.15rem;line-height:1;font-variant-numeric:tabular-nums}.kcq-stat small{display:block;margin-top:.15rem;color:var(--kcq-muted);font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.kcq-settings{display:flex;align-items:flex-end;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem;padding:.85rem;border:1px solid #ccfbf1;border-radius:17px;background:rgba(255,255,255,.8)}.kcq-setting{display:flex;flex:1 1 160px;flex-direction:column;gap:.35rem}.kcq-setting:first-child{flex:2 1 300px}.kcq-round-setting{max-width:175px}.kcq-setting-label{color:#475569;font-size:.64rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.kcq-pills{display:flex;gap:.35rem;padding:.25rem;border-radius:12px;background:#f0fdfa}.kcq-pill{display:inline-flex!important;align-items:center;justify-content:center;gap:.35rem;visibility:visible!important;flex:1;min-height:38px;padding:.4rem .65rem;border:0;border-radius:9px;background:transparent;color:#475569;font:inherit;font-size:.74rem;font-weight:900;cursor:pointer}.kcq-pill span{width:19px;height:19px;display:grid;place-items:center;border-radius:6px;background:#dbeafe;color:#1d4ed8;font-size:.58rem}.kcq-pill.is-active{background:#fff;color:var(--kcq-teal-dark);box-shadow:0 3px 10px rgba(15,118,110,.13)}.kcq-pill.is-active span{background:var(--kcq-teal);color:#fff}
.kcq-round-setting select{min-height:38px;padding:.4rem 2rem .4rem .65rem;border:1px solid #99f6e4;border-radius:10px;background:#fff;color:var(--kcq-ink);font:inherit;font-size:.75rem;font-weight:800}.kcq-sound{display:inline-flex!important;align-items:center;justify-content:center;gap:.35rem;visibility:visible!important;min-height:38px;padding:.45rem .75rem;border:1px solid #99f6e4;border-radius:10px;background:#fff;color:#64748b;font:inherit;font-size:.73rem;font-weight:900;cursor:pointer;white-space:nowrap}.kcq-sound.is-on{background:#f0fdfa;color:var(--kcq-teal-dark)}
.kcq-quiz{padding:clamp(1rem,3vw,1.55rem);border:1px solid #ccfbf1;border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 10px 28px rgba(15,118,110,.07)}.kcq-round-row{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem;color:#64748b;font-size:.68rem;font-weight:900}.kcq-progress{height:8px;overflow:hidden;border-radius:99px;background:#e2e8f0}.kcq-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--kcq-teal),#22d3ee);transition:width .25s ease}
.kcq-question-card{max-width:720px;margin:1rem auto;padding:1.15rem;border:2px dashed #99f6e4;border-radius:18px;background:linear-gradient(135deg,#f0fdfa,#ecfeff);text-align:center}.kcq-topic{display:inline-block;padding:.25rem .55rem;border-radius:99px;background:#ccfbf1;color:var(--kcq-teal-dark);font-size:.62rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.kcq-question{margin:.55rem auto .25rem;color:var(--kcq-ink);font-size:clamp(1.05rem,2.5vw,1.35rem);font-weight:900;line-height:1.4}.kcq-question-help{margin:0;color:#64748b;font-size:.72rem}
.kcq-choices{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:.65rem;max-width:720px;margin:0 auto}.kcq-choice{position:relative;display:flex!important;align-items:center;visibility:visible!important;min-height:61px;padding:.7rem .8rem .7rem 2.6rem;border:2px solid #dbeafe;border-radius:14px;background:#fff;color:var(--kcq-ink);font:inherit;font-size:.84rem;font-weight:850;text-align:left;cursor:pointer;box-shadow:0 4px 11px rgba(30,64,175,.05);transition:transform .15s,border-color .15s,background .15s}.kcq-choice:hover:not(:disabled),.kcq-choice:focus-visible{transform:translateY(-2px);border-color:#2dd4bf;outline:3px solid rgba(45,212,191,.2)}.kcq-choice-key{position:absolute;left:.65rem;width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#ecfeff;color:var(--kcq-teal);font-size:.62rem}.kcq-choice.is-correct{border-color:#22c55e!important;background:#dcfce7!important;color:#14532d!important;animation:kcq-pop .35s ease}.kcq-choice.is-correct::after{content:"✓";margin-left:auto;color:#15803d;font-size:1rem}.kcq-choice.is-wrong{border-color:#ef4444!important;background:#fee2e2!important;color:#7f1d1d!important;animation:kcq-shake .35s ease}.kcq-choice.is-removed{border-style:dashed;opacity:.35;text-decoration:line-through}.kcq-choice:disabled:not(.is-correct):not(.is-wrong):not(.is-removed){opacity:.68}
.kcq-feedback{max-width:720px;min-height:39px;margin:.75rem auto 0;padding:.55rem .75rem;border-radius:10px;text-align:center;font-size:.77rem;font-weight:800}.kcq-feedback.is-info{border:1px solid #bae6fd;background:#f0f9ff;color:#0c4a6e}.kcq-feedback.is-success{border:1px solid #86efac;background:#dcfce7;color:#14532d}.kcq-feedback.is-error{border:1px solid #fca5a5;background:#fee2e2;color:#7f1d1d}
.kcq-explanation{display:flex;align-items:flex-start;gap:.65rem;max-width:720px;margin:.65rem auto 0;padding:.75rem;border:1px solid #fde68a;border-radius:12px;background:#fffbeb;color:#713f12}.kcq-explanation-icon{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#fbbf24;color:#fff;font-family:Georgia,serif;font-weight:900}.kcq-explanation strong{font-size:.76rem}.kcq-explanation p{margin:.15rem 0 0;font-size:.76rem;line-height:1.45}
.kcq-actions{display:flex;justify-content:center;gap:.6rem;margin-top:.85rem}.kcq-action{display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;min-width:175px;min-height:43px;padding:.6rem .9rem;border:2px solid var(--kcq-teal);border-radius:10px;font:inherit;font-size:.77rem;font-weight:900;line-height:1.2;cursor:pointer}.kcq-action-primary{background:var(--kcq-teal)!important;color:#fff!important;box-shadow:0 6px 14px rgba(15,118,110,.2)}.kcq-action-primary:hover{border-color:var(--kcq-teal-dark);background:var(--kcq-teal-dark)!important}.kcq-action-outline{border-color:#5eead4!important;background:#fff!important;color:var(--kcq-teal-dark)!important}.kcq-action-outline:hover{background:#f0fdfa!important}.kcq-action:disabled{display:inline-flex!important;visibility:visible!important;cursor:not-allowed;opacity:.55}
.kcq-summary{margin-top:1rem;padding:1.45rem;border:1px solid #fde68a;border-radius:20px;background:linear-gradient(135deg,#fffbeb,#f0fdfa);text-align:center}.kcq-summary-icon{width:52px;height:52px;display:grid;place-items:center;margin:0 auto .55rem;border-radius:50%;background:#fef3c7;color:#d97706;font-size:1.35rem}.kcq-summary h3{margin:.2rem 0;color:var(--kcq-ink)}.kcq-summary p{max-width:600px;margin:.35rem auto .9rem;color:#64748b}.kcq-summary-actions{display:flex;justify-content:center;gap:.55rem;flex-wrap:wrap}
.kcq-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .2rem 0;color:#64748b;font-size:.68rem}.kcq-footer button{display:inline-flex!important;visibility:visible!important;padding:.25rem;border:0;background:transparent;color:#64748b;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes kcq-pop{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}@keyframes kcq-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:900px){.kcq-hero{align-items:flex-start;flex-direction:column}.kcq-stats{width:100%}}
@media(max-width:640px){.kcq-tool{border-radius:18px}.kcq-brand{align-items:flex-start}.kcq-logo{width:54px;height:54px;border-radius:16px}.kcq-flask-neck{left:20px;top:8px}.kcq-flask-liquid{left:11px;bottom:8px;width:32px}.kcq-stats{grid-template-columns:repeat(2,1fr)}.kcq-stat{justify-content:center}.kcq-settings{align-items:stretch;flex-direction:column}.kcq-round-setting{max-width:none}.kcq-sound{width:100%}.kcq-choices{grid-template-columns:1fr}.kcq-actions{flex-direction:column-reverse}.kcq-action{width:100%}.kcq-footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.kcq-progress span,.kcq-choice{transition:none}.kcq-choice.is-correct,.kcq-choice.is-wrong{animation:none}}