.interactive-demo .overlay-root{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:8px;box-sizing:border-box;width:-moz-fit-content;width:fit-content;max-width:100%;pointer-events:none}.interactive-demo .overlay-root :is(.overlay-bar,.overlay-answer,.overlay-loading){pointer-events:auto}.interactive-demo .overlay-bar{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:999px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(10,13,26,.88);border:1px solid rgba(122,84,244,.35);box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 20px rgba(122,84,244,.25);-webkit-user-select:none;-moz-user-select:none;user-select:none}.interactive-demo .overlay-bar__grip{display:inline-flex;align-items:center;justify-content:center;color:#64748b;padding:0 4px;cursor:-webkit-grab;cursor:grab}.interactive-demo .overlay-bar__grip:hover{color:#cbd5e1}.interactive-demo .overlay-bar__pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:none;border-radius:999px;background:linear-gradient(135deg,#7a54f4,#6366f1);color:#ffffff;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px rgba(122,84,244,.45);transition:all .2s cubic-bezier(.16,1,.3,1)}.interactive-demo .overlay-bar__pill:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(122,84,244,.6);background:linear-gradient(135deg,#8b5cf6,#7a54f4)}.interactive-demo .overlay-bar__pill:active:not(:disabled){transform:translateY(0)}.interactive-demo .overlay-bar__logo-icon{display:inline-flex;align-items:center;border-radius:4px;overflow:hidden}.interactive-demo .overlay-bar__sparkle{color:#fbbf24}.interactive-demo .overlay-bar__pill--pulse{animation:pill-glow-pulse 2.2s ease-in-out infinite}@keyframes pill-glow-pulse{0%,to{box-shadow:0 0 0 0 rgba(122,84,244,.7)}50%{box-shadow:0 0 0 10px rgba(122,84,244,0)}}.interactive-demo .overlay-bar__pill--loading{background:#1e293b;color:#cbd5e1;box-shadow:none;cursor:wait}.interactive-demo .overlay-bar__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:50%;background:transparent;color:#94a3b8;cursor:pointer;transition:all .2s ease}.interactive-demo .overlay-bar__icon:hover:not(:disabled){background:rgba(255,255,255,.08);color:#f8fafc}.interactive-demo .overlay-bar__icon:disabled{opacity:.45;cursor:default}.interactive-demo .overlay-loading{position:relative;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(10,13,26,.92);border:1px solid rgba(122,84,244,.4);box-shadow:0 12px 30px rgba(0,0,0,.5);color:#e2e8f0;font-size:11px;font-weight:600;overflow:hidden}.interactive-demo .overlay-loading__scanner{position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,#7a54f4,transparent);animation:scan-pass 1.2s linear infinite}@keyframes scan-pass{to{left:100%}}.interactive-demo .overlay-loading__spinner{width:12px;height:12px;border:2px solid rgba(122,84,244,.25);border-top-color:#a78bfa;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.interactive-demo .overlay-answer{display:flex;flex-direction:column;gap:8px;width:320px;max-width:calc(100vw - 32px);padding:12px 14px;border-radius:12px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:rgba(10,13,26,.94);border:1px solid rgba(122,84,244,.45);box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 25px rgba(122,84,244,.25);animation:answer-pop .25s cubic-bezier(.16,1,.3,1)}@keyframes answer-pop{0%{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.interactive-demo .overlay-answer__header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:6px}.interactive-demo .overlay-answer__meta{display:flex;align-items:center;gap:6px}.interactive-demo .overlay-answer__logo-mini{display:inline-flex;align-items:center;border-radius:3px;overflow:hidden}.interactive-demo .overlay-answer__brand{font-size:11px;font-weight:800;color:#f8fafc}.interactive-demo .overlay-answer__confidence{font-size:10px;font-weight:700;color:#34d399;background:rgba(16,185,129,.12);padding:1px 6px;border-radius:999px;border:1px solid rgba(16,185,129,.25)}.interactive-demo .overlay-answer__controls{display:flex;align-items:center;gap:4px}.interactive-demo .overlay-answer__action-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#cbd5e1;font-size:10px;font-weight:700;cursor:pointer;transition:all .15s ease}.interactive-demo .overlay-answer__action-btn:hover{background:rgba(122,84,244,.2);border-color:#7a54f4;color:#fff}.interactive-demo .overlay-answer__close-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:#94a3b8;border-radius:4px;cursor:pointer}.interactive-demo .overlay-answer__close-btn:hover{background:rgba(255,255,255,.1);color:#fff}.interactive-demo .overlay-answer__body{padding-top:2px}.interactive-demo .overlay-answer__text{margin:0;font-size:12px;line-height:1.5;color:#e2e8f0;font-weight:500}.interactive-demo{position:relative;width:100%;max-width:640px;border-radius:16px;background:linear-gradient(180deg,rgba(122,84,244,.14),rgba(14,18,32,.6));padding:1px;box-shadow:0 24px 60px -12px rgba(0,0,0,.7),0 0 32px -4px rgba(122,84,244,.2);margin:0 auto;transition:transform .3s ease,box-shadow .3s ease}.interactive-demo:hover{box-shadow:0 30px 70px -12px rgba(0,0,0,.8),0 0 45px -4px rgba(122,84,244,.3)}.interactive-demo__window-frame{display:flex;flex-direction:column;width:100%;border-radius:15px;background:#0a0d18;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.interactive-demo__top-control{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(15,20,36,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07);gap:12px}.interactive-demo__brand-badge{display:inline-flex;align-items:center;gap:8px}.interactive-demo__logo-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;box-shadow:0 0 10px rgba(122,84,244,.4)}.interactive-demo__badge-text{font-size:12px;font-weight:700;letter-spacing:.02em;color:#e2e8f0}.interactive-demo__instruction{font-size:12px;display:flex;align-items:center}.interactive-demo__hint-pulse{display:inline-flex;align-items:center;gap:6px;color:#94a3b8;font-weight:500}.interactive-demo__hint-pulse strong{color:#a78bfa;font-weight:700}.interactive-demo__hint-pulse .inline-arrow{color:#7a54f4;animation:bounce-x 1.4s ease-in-out infinite}@keyframes bounce-x{0%,to{transform:translateX(0)}50%{transform:translateX(4px)}}.interactive-demo__hint-loading{display:inline-flex;align-items:center;gap:6px;color:#c4b5fd;font-weight:600}.interactive-demo__reset-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(122,84,244,.35);background:rgba(122,84,244,.12);color:#e2e8f0;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s ease}.interactive-demo__reset-btn:hover{background:rgba(122,84,244,.25);border-color:#7a54f4;color:#fff}.interactive-demo__viewport{position:relative;min-height:380px;background:#090c16;overflow:hidden;display:flex;flex-direction:column}.interactive-demo__overlay-slot{position:absolute;top:14px;right:14px;z-index:10}.demo-scene{display:flex;flex-direction:column;width:100%;height:100%;min-height:380px}.demo-scene__header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#0d111e;border-bottom:1px solid rgba(255,255,255,.06)}.demo-scene__window-controls{display:flex;align-items:center;gap:6px}.demo-dot{width:9px;height:9px;border-radius:50%}.demo-dot--red{background:#ef4444}.demo-dot--yellow{background:#f59e0b}.demo-dot--green{background:#10b981}.demo-scene__header-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#94a3b8}.demo-scene__badge-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:#cbd5e1;border:1px solid rgba(255,255,255,.08)}.demo-scene__badge-pill--purple{background:rgba(122,84,244,.15);border-color:rgba(122,84,244,.3);color:#c4b5fd}.demo-scene__pulse-dot{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 6px #10b981}.demo-scene__tabs{display:flex;align-items:center;gap:2px;margin-left:8px}.demo-scene__tab{display:flex;align-items:center;gap:5px;font-size:11px;color:#64748b;padding:4px 10px;border-radius:4px 4px 0 0}.demo-scene__tab--active{background:#121727;color:#e2e8f0;border-top:1px solid #7a54f4}.demo-scene__body{flex:1 1;padding:16px}.demo-scene__body,.quiz-card{display:flex;flex-direction:column}.quiz-card{gap:12px;max-width:430px}.quiz-card__meta{display:flex;align-items:center;justify-content:space-between}.quiz-card__tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#a78bfa}.quiz-card__points{font-size:11px;color:#64748b}.quiz-card__question{font-size:14px;font-weight:600;line-height:1.45;color:#f1f5f9;margin:0}.quiz-card__options{display:flex;flex-direction:column;gap:7px;margin-top:2px}.quiz-option{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:all .25s ease}.quiz-option__letter{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;background:rgba(255,255,255,.06);color:#94a3b8;font-size:11px;font-weight:700}.quiz-option__text{font-size:12px;color:#cbd5e1;flex:1 1}.demo-scene__body--ide{padding:0;display:flex;flex-direction:column;background:#0a0d18}.ide-editor{display:flex;padding:12px;gap:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.6}.ide-lines{display:flex;flex-direction:column;color:#334155;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-align:right;min-width:14px}.ide-code{margin:0;color:#e2e8f0;overflow-x:auto}.code-kw{color:#f43f5e;font-weight:600}.code-fn{color:#38bdf8}.code-str{color:#a3e635}.code-comment{color:#64748b;font-style:italic}.code-err{-webkit-text-decoration:underline wavy #ef4444;text-decoration:underline wavy #ef4444;color:#fca5a5}.ide-terminal{margin-top:auto;border-top:1px solid rgba(255,255,255,.07);background:#070911;padding:10px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ide-terminal__bar{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}.ide-terminal__content{display:flex;flex-direction:column;gap:2px}.ide-err-msg{color:#f87171;font-size:11px;font-weight:600}.ide-err-sub{color:#475569;font-size:10px}.doc-article{display:flex;flex-direction:column;gap:10px;max-width:440px}.doc-article__eyebrow{font-size:10px;font-weight:700;color:#a78bfa;text-transform:uppercase;letter-spacing:.05em}.doc-article__heading{font-size:15px;font-weight:700;color:#f8fafc;margin:0}.doc-article__paragraph{font-size:12px;line-height:1.6;color:#94a3b8;margin:0}.doc-article__callout{padding:10px 12px;border-radius:8px;background:rgba(122,84,244,.08);border-left:3px solid #7a54f4;font-size:11px;line-height:1.5;color:#cbd5e1}.sheet-container{overflow-x:auto;max-width:460px}.demo-table{width:100%;border-collapse:collapse;font-size:11px;text-align:left}.demo-table th{font-weight:700;color:#64748b;border-bottom:1px solid rgba(255,255,255,.08)}.demo-table td,.demo-table th{padding:8px 10px;white-space:nowrap}.demo-table td{color:#cbd5e1;border-bottom:1px solid rgba(255,255,255,.04)}.demo-table__total td{font-weight:700;color:#f8fafc;border-top:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02)}.text-violet{color:#a78bfa}.text-emerald{color:#34d399}.text-amber{color:#fbbf24}.interactive-demo__footer-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0d111e;border-top:1px solid rgba(255,255,255,.07);overflow-x:auto}.interactive-demo__footer-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.interactive-demo__tabs{display:flex;align-items:center;gap:6px}.interactive-demo__tab{padding:5px 12px;border-radius:999px;font-size:11px;font-weight:600;color:#94a3b8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer;white-space:nowrap;transition:all .2s ease}.interactive-demo__tab:hover:not(:disabled){background:rgba(122,84,244,.12);border-color:rgba(122,84,244,.3);color:#e2e8f0}.interactive-demo__tab--active{background:#7a54f4!important;color:#ffffff!important;border-color:#8b5cf6!important;box-shadow:0 0 14px rgba(122,84,244,.45)}.interactive-demo__tab:disabled{opacity:.5;cursor:not-allowed}@media (max-width:860px){.interactive-demo{max-width:100%}}@media (max-width:540px){.interactive-demo__top-control{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px}.interactive-demo__viewport{min-height:440px}.interactive-demo__overlay-slot{top:auto;bottom:12px;right:12px;left:12px}.quiz-card{max-width:100%}.interactive-demo{width:100%!important;max-width:100%!important;margin:0!important;border-radius:12px!important}.interactive-demo__window-frame{border-radius:11px!important;width:100%!important}.interactive-demo__viewport{min-height:400px!important}.interactive-demo__overlay-slot{top:auto!important;bottom:10px!important;left:8px!important;right:8px!important}.interactive-demo .overlay-root{width:100%!important;max-width:100%!important;align-items:stretch!important}.interactive-demo .overlay-bar{width:100%!important;justify-content:space-between!important}.interactive-demo .overlay-answer{width:100%!important;max-width:100%!important}.interactive-demo__footer-bar{padding:8px 10px!important;gap:6px!important}.interactive-demo__tab{padding:4px 10px!important;font-size:10px!important}}