.demo-overlay{position:fixed;inset:0;z-index:100;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.demo-overlay[hidden]{display:none}.demo-modal{background:#fff;border-radius:1rem;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 48px #0003;overflow:hidden}.demo-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.demo-header-left{display:flex;align-items:center;gap:.75rem}.demo-badge{font-size:.6875rem;font-weight:600;text-transform:uppercase;padding:.2rem .5rem;border-radius:9999px;background:var(--primary);color:var(--primary-foreground)}.demo-cert-name{font-weight:600;font-size:.9375rem}.demo-close{background:none;border:none;cursor:pointer;padding:.25rem;color:var(--muted);transition:color .15s}.demo-close:hover{color:var(--foreground)}.demo-progress{height:3px;background:var(--border)}.demo-progress-fill{height:100%;background:var(--primary);transition:width .3s ease;width:20%}.demo-body{flex:1;overflow-y:auto;padding:1.25rem}.demo-domain{font-size:.75rem;font-weight:500;color:var(--primary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.03em}.demo-question{font-family:var(--font-ui)!important;font-size:1rem;font-weight:500;line-height:1.5;margin-bottom:1.25rem;color:var(--foreground)}.demo-options{display:flex;flex-direction:column;gap:.5rem}.demo-option{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;min-height:44px;border-radius:.5rem;border:1px solid var(--border);background:transparent;cursor:pointer;box-shadow:0 1px 2px #0000000a;transition:all .15s ease;width:100%;text-align:left;font-family:var(--font-ui);font-size:.875rem;color:var(--foreground);touch-action:manipulation}.demo-option:hover:not(.demo-option-locked){background:#f6f5f4}.demo-option:active:not(.demo-option-locked){transform:scale(.98)}.demo-option-letter{width:1.5rem;height:1.5rem;border-radius:9999px;font-weight:600;font-size:.875rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#efeeeb;color:#737373;transition:all .15s ease}.demo-option-text{flex:1;line-height:1.625}.demo-option-icon{flex-shrink:0;width:1rem;height:1rem;display:none}.demo-option.correct{background:#eff5f2;border-color:#4e7e68}.demo-option.correct .demo-option-letter{background:#4e7e68;color:#fff}.demo-option.correct .demo-option-icon.icon-check{display:block;color:#4e7e68}.demo-option.incorrect{background:#f9f2f1;border-color:#a35643}.demo-option.incorrect .demo-option-letter{background:#a35643;color:#fff}.demo-option.incorrect .demo-option-icon.icon-x{display:block;color:#a35643}.demo-option-locked{pointer-events:none}.demo-alex{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.demo-alex-header{display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.75rem 1rem;border-radius:.5rem;transition:background .15s}.demo-alex-header:hover{background:#f6f5f4}.demo-alex-avatar{width:1.75rem;height:1.75rem;border-radius:9999px;object-fit:cover}.demo-alex-label{flex:1;font-weight:500;font-size:.875rem}.demo-alex-chevron{color:var(--muted);transition:transform .2s}.demo-alex.open .demo-alex-chevron{transform:rotate(180deg)}.demo-alex-body{display:none;padding:.75rem 0}.demo-alex.open .demo-alex-body{display:block}.demo-alex-result{font-size:.875rem;font-weight:600;margin-bottom:.5rem}.demo-alex-result-correct{color:#4e7e68}.demo-alex-result-incorrect{color:#a35643}.demo-alex-message{font-size:.875rem;line-height:1.625;color:var(--foreground);word-wrap:break-word;white-space:pre-wrap}.demo-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid var(--border)}.demo-counter{font-size:.875rem;color:var(--muted);font-weight:500}.demo-next-btn{min-width:90px;min-height:40px;padding:.5rem 1.25rem;font-size:.875rem;background:#469173;color:#fff;border-radius:9999px;font-weight:500;border:none;cursor:pointer;font-family:var(--font-ui);display:inline-flex;align-items:center;gap:.375rem}.demo-next-btn:hover{background:#3f8368}.demo-next-btn:disabled{opacity:.5;pointer-events:none}.demo-complete{display:none;flex:1;align-items:center;justify-content:center;padding:2rem}.demo-complete:not([hidden]){display:flex}.demo-complete-inner{text-align:center}.demo-score-ring{display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem}.demo-score-value{font-size:3rem;font-weight:700;color:var(--primary)}.demo-score-label{font-size:.875rem;color:var(--muted)}.demo-complete-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.demo-complete-text{color:var(--muted);margin-bottom:1.5rem;line-height:1.6}.demo-complete-cta{display:inline-flex}@media(max-width:640px){.demo-overlay{padding:0;align-items:flex-end}.demo-modal{max-width:100%;max-height:100vh;height:100%;border-radius:0;padding-bottom:env(safe-area-inset-bottom)}.demo-header{padding:.75rem 1rem}.demo-cert-name{font-size:.8125rem}.demo-body{padding:1rem}.demo-question{font-size:.9375rem;margin-bottom:1rem}.demo-option{padding:.75rem;min-height:48px;font-size:.9375rem}.demo-option-letter{width:1.75rem;height:1.75rem}.demo-footer{padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}.demo-next-btn{min-height:44px;padding:.625rem 1.5rem}.demo-alex-header{padding:.75rem}.demo-alex-avatar{width:2rem;height:2rem}.demo-complete{padding:1.5rem}.demo-score-value{font-size:2.5rem}.demo-complete-title{font-size:1.25rem}.demo-complete-cta{width:100%;justify-content:center}}
