:root{--purple:#4a154b;--blue:#64c3eb;--ink:#0e0f12;--ring:#e8ebf1;--md-surface:#fafbfc;--md-surface-bright:#ffffff;--md-surface-container:#edf0f5;--md-on-surface:#111316;--md-on-surface-variant:#3e424a;--md-outline:#c3c8d1;--md-outline-variant:#dbe0e8;--md-primary:var(--purple);--md-primary-alt:var(--blue);--md-on-primary:#ffffff;--md-primary-container:#EADDFF;--md-on-primary-container:#21005D;--md-success:#2e7d32;--md-success-container:#dff0d8;--md-error:#b3261e;--md-error-container:#fbeaea;--elev-0:none;--elev-1:0 2px 4px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04);--elev-2:0 8px 18px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06);--state-hover:.10;--state-press:.14;--radius:18px;--chip-radius:999px}@media (prefers-color-scheme:dark){:root{--md-surface:#101214;--md-surface-bright:#16181c;--md-surface-container:#181b1f;--md-on-surface:#e7eaee;--md-on-surface-variant:#c7ccd6;--md-outline:#454a52;--md-outline-variant:#2e3238;--md-primary:color-mix(in oklab, var(--purple) 70%, var(--blue) 30%);--md-on-primary:#ffffff;--md-primary-container:#3a2a4a;--md-on-primary-container:#f0eaf7;--md-success:#7bd487;--md-success-container:#23402a;--md-error:#ffb4ab;--md-error-container:#3b0907;--elev-1:0 2px 4px rgba(0,0,0,.55);--elev-2:0 12px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35)}}.quiz-wrapper{display:flex;flex-wrap:wrap;max-width:900px;margin:40px auto;background:var(--md-surface-bright);border:1px solid var(--md-outline-variant);border-radius:22px;box-shadow:var(--elev-2);overflow:hidden;font-family:"Fields Light",system-ui,-apple-system,sans-serif;color:var(--md-on-surface)}.quiz-left,.quiz-right{box-sizing:border-box;padding:28px 20px}.quiz-left{width:40%;background:var(--md-surface-bright);border-right:1px solid var(--md-outline-variant)}.quiz-right{width:60%;padding:30px;background:var(--md-surface-bright)}.quiz-left h3{font-size:1.3rem;margin:0 0 1rem;color:var(--md-on-surface)}.quiz-left p,.quiz-feedback,.quiz-step-btn,.quiz-option,.quiz-result{font-family:"Fields Light",system-ui,-apple-system,sans-serif}.quiz-feedback{display:none;margin-top:1rem;font-size:.95rem;color:var(--md-on-primary-container);background:color-mix(in oklab,var(--md-primary-container) 72%,#fff);border-left:4px solid var(--md-primary);padding:12px 12px 12px 14px;border-radius:12px}.quiz-nav{display:flex;gap:8px;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}.quiz-step-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font:700 14px/1 "Fields Light",system-ui,-apple-system,sans-serif;color:var(--md-on-surface);background:var(--md-surface-bright);border:1.5px solid #fff0;border-radius:var(--chip-radius);box-shadow:var(--elev-1);cursor:pointer;transition:transform .18s cubic-bezier(.2,0,.2,1),box-shadow .18s cubic-bezier(.2,0,.2,1),border-color .18s,background-color .18s,color .18s,filter .18s}.quiz-step-btn:hover{transform:translateY(-1px);box-shadow:var(--elev-2);border-color:var(--md-primary);background:color-mix(in oklab,var(--md-primary-container) calc(var(--state-hover)*100%),transparent)}.quiz-step-btn:focus-visible{outline:3px solid var(--md-primary-container);outline-offset:2px}.quiz-step-btn.active{color:var(--md-on-primary)!important;background:linear-gradient(100deg,var(--md-primary),color-mix(in oklab,var(--md-primary-alt) 75%,var(--md-primary) 25%));background-size:200% 200%;border:1.5px solid color-mix(in oklab,var(--md-primary) 30%,transparent);box-shadow:0 12px 26px color-mix(in oklab,var(--md-primary) 28%,transparent);animation:quiz-grad-shift 8s ease-in-out infinite}.quiz-step-btn.disabled{pointer-events:none;opacity:.45}.quiz-question{display:none}.quiz-question.active{display:block}.quiz-option{border:1.5px solid var(--md-outline-variant);border-radius:var(--radius);background:var(--md-surface-bright);padding:16px;margin-bottom:18px;cursor:pointer;font-size:1.05rem;color:var(--md-on-surface);transition:background .18s cubic-bezier(.2,0,.2,1),border-color .18s cubic-bezier(.2,0,.2,1),box-shadow .18s cubic-bezier(.2,0,.2,1),transform .18s cubic-bezier(.2,0,.2,1);box-shadow:var(--elev-0)}.quiz-option:hover{border-color:var(--md-primary);background:color-mix(in oklab,var(--md-primary-container) calc(var(--state-hover)*100%),transparent);box-shadow:var(--elev-1);transform:translateY(-1px)}.quiz-option:focus-visible{outline:3px solid var(--md-primary-container);outline-offset:2px}.quiz-option.correct{border:2px solid var(--md-success);background:var(--md-success-container);color:color-mix(in oklab,var(--md-success) 40%,var(--md-on-surface))}.quiz-option.incorrect{border:2px solid var(--md-error);background:var(--md-error-container);color:color-mix(in oklab,var(--md-error) 36%,var(--md-on-surface))}.next-btn{display:none;margin-top:10px;padding:10px 16px;border:none;border-radius:var(--chip-radius);font-size:1rem;font-weight:800;letter-spacing:.02em;color:var(--md-on-primary);background:linear-gradient(100deg,var(--md-primary),color-mix(in oklab,var(--md-primary-alt) 75%,var(--md-primary) 25%));background-size:200% 200%;box-shadow:0 12px 26px color-mix(in oklab,var(--md-primary) 28%,transparent);cursor:pointer;transition:transform .18s cubic-bezier(.2,0,.2,1),box-shadow .18s cubic-bezier(.2,0,.2,1),filter .18s cubic-bezier(.2,0,.2,1)}.next-btn:hover{transform:translateY(-1px);box-shadow:var(--elev-2);filter:saturate(112%)}.next-btn:active{transform:translateY(0) scale(.99)}.next-btn:focus-visible{outline:3px solid var(--md-primary-container);outline-offset:2px}.quiz-result{display:none;font-size:1rem;line-height:1.6;border-top:1px solid var(--md-outline-variant);padding-top:20px;color:var(--md-on-surface)}.quiz-result li{margin-bottom:14px;background:var(--md-surface-container);padding:12px;border-left:4px solid var(--md-primary-alt);border-radius:12px;box-shadow:var(--elev-1)}@media (max-width:768px){.quiz-wrapper{flex-direction:column}.quiz-left,.quiz-right{width:100%}}@keyframes quiz-grad-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@media (prefers-reduced-motion:reduce){.quiz-step-btn,.quiz-option,.next-btn{transition:none}.quiz-step-btn.active,.next-btn{animation:none}}@media (forced-colors:active){.quiz-wrapper,.quiz-option,.next-btn,.quiz-step-btn{border:1px solid CanvasText;box-shadow:none}.next-btn,.quiz-step-btn.active{background:CanvasText;color:Canvas}}