.demo-page{--bg:#0b1220;--bg-2:#0f172a;--card:#111a2e;--card-2:#1a2744;--border:#22314f;--border-2:#2a3b5f;--text:#e6edf7;--muted:#8c9bb5;--muted-2:#6b7a94;--red:#ef4444;--red-2:#dc2626;--yellow:#eab308;--green:#10b981;--amber:#f59e0b;--blue:#3b82f6;--pink:#ec4899}*{box-sizing:border-box}html,body{color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";background:#06080f;min-height:100vh;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.page-wrap{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.demo{background:var(--bg);border:1px solid #1a2540;border-radius:14px;width:800px;max-width:100%;height:560px;font-size:14px;line-height:1.45;position:relative;overflow:hidden;box-shadow:0 30px 80px #0000008c,inset 0 2px #ffffff08}.chrome{background:var(--bg-2);z-index:30;border-bottom:1px solid #18223b;align-items:center;height:52px;padding:0 18px;display:flex;position:absolute;inset:0 0 auto}.chrome .brand{align-items:center;gap:10px;display:flex}.chrome .brand img{object-fit:contain;width:28px;height:28px}.chrome .brand .t{flex-direction:column;line-height:1.1;display:flex}.chrome .brand .t b{letter-spacing:-.01em;white-space:nowrap;font-size:13px;font-weight:700}.chrome .brand .t span{color:var(--muted);white-space:nowrap;font-size:10.5px;font-weight:500}.chrome .center{align-items:center;gap:18px;font-size:12px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.chrome .pill{color:#fca5a5;background:#ef44441f;border:1px solid #ef444459;border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:600}.chrome .q-count{color:var(--muted);font-size:11px}.chrome .timer{font-variant-numeric:tabular-nums;color:#d5deee;font-size:14px;font-weight:700}.chrome .right{color:var(--muted);align-items:center;gap:14px;margin-left:auto;font-size:11px;display:flex}.chrome .right .icn{vertical-align:-2px;width:14px;height:14px;margin-right:4px;display:inline-block}.stage{position:absolute;inset:52px 0 0;overflow:hidden}.scene{opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0;transform:translateY(6px)}.scene.on{opacity:1;pointer-events:auto;transform:none}.scene.out{opacity:0;transform:translateY(-6px)}.dash{height:100%;padding:22px 26px 0;overflow:hidden}.dash h1{letter-spacing:-.015em;margin:2px 0 3px;font-size:22px;font-weight:700}.dash .sub{color:var(--muted);margin:0 0 16px;font-size:12.5px}.dash .row-h{justify-content:space-between;align-items:center;margin:6px 0 10px;display:flex}.dash .row-h h2{margin:0;font-size:13.5px;font-weight:600}.dash .row-h a{color:var(--red);font-size:12px;font-weight:600;text-decoration:none}.int-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;display:grid}.int-card{background:var(--card);border:1px solid var(--border);border-radius:10px;align-items:center;gap:12px;padding:14px;transition:box-shadow .35s,border-color .35s,transform .35s;display:flex;position:relative}.int-card .logo-sq{background:#1d2843;border-radius:8px;flex:0 0 34px;place-items:center;width:34px;height:34px;display:grid}.int-card .logo-sq img{object-fit:contain;width:22px;height:22px}.int-card .meta{flex:1;min-width:0}.int-card .meta b{letter-spacing:-.005em;font-size:13px;font-weight:600;display:block}.int-card .meta span{color:var(--muted);margin-top:2px;font-size:11.5px;display:block}.int-card .start-btn{background:var(--red-2);color:#fff;border-radius:6px;align-items:center;gap:4px;padding:6px 11px;font-size:11.5px;font-weight:600;display:inline-flex}.int-card.highlight{border-color:var(--red);transform:translateY(-1px)}.int-card.clicked .start-btn{background:#b91c1c;transform:scale(.94)}.int-card .start-btn{transition:transform .15s,background .2s}.progress-row{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:2px;display:grid}.stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px}.stat b{font-size:18px;font-weight:700;display:block}.stat span{color:var(--muted);font-size:10.5px}.stat.green b{color:#34d399}.stat.amber b{color:#fbbf24}.reminder{background:var(--card);border:1px solid var(--border);border-radius:10px;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;display:flex}.reminder .dot{color:var(--red);font-size:15px;font-weight:700}.reminder .t{font-size:12px}.reminder .t b{color:#fff}.reminder .t span{color:var(--muted)}.panel-scene{height:100%;padding:18px 26px 0;position:relative}.panel-row{justify-content:center;gap:40px;margin:6px 0 14px;display:flex}.panelist{opacity:0;flex-direction:column;align-items:center;transition:opacity .45s,transform .45s;display:flex;transform:translateY(8px)}.panelist.on{opacity:1;transform:none}.avatar{color:#fff;border:2px solid #0000;border-radius:50%;place-items:center;width:46px;height:46px;font-size:13px;font-weight:700;display:grid;position:relative}.av-cw{color:#fff;background:#ef4444;border-color:#facc15}.av-fj{background:#16a34a;border-color:#16a34a}.av-hr{background:#2563eb;border-color:#2563eb}.panelist.speaking .avatar:after{content:"";border:2px solid #facc158c;border-radius:50%;animation:1.4s ease-out infinite ring;position:absolute;inset:-6px}@keyframes ring{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}.panelist{min-width:110px}.panelist .name{white-space:nowrap;margin-top:7px;font-size:11.5px;font-weight:600}.panelist .role{color:var(--muted);white-space:nowrap;font-size:10px}.q-bubble{background:var(--card);border:1px solid var(--border);border-radius:12px;max-width:620px;margin:0 auto;padding:14px 16px;position:relative}.q-bubble .who{color:#facc15;letter-spacing:.01em;margin-bottom:6px;font-size:11px;font-weight:600}.q-bubble .txt{color:#cfd8ea;min-height:3.1em;font-size:12.5px;line-height:1.55}.q-bubble .txt .hl{color:#facc15}.cursor{vertical-align:-2px;background:#cfd8ea;width:6px;height:14px;margin-left:2px;animation:1s steps(2,end) infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.resp{background:var(--card);border:1px solid var(--border);border-radius:12px;min-height:120px;padding:12px 14px;position:absolute;bottom:18px;left:26px;right:26px}.resp .trans{color:#cfd8ea;min-height:56px;font-size:12px;line-height:1.55}.resp .trans.placeholder{color:var(--muted-2)}.resp .controls{align-items:center;gap:10px;margin-top:10px;display:flex}.mic-btn{background:var(--red-2);color:#fff;border-radius:7px;align-items:center;gap:6px;padding:7px 12px;font-size:12px;font-weight:600;display:inline-flex;position:relative}.mic-btn .rec{background:#fff;border-radius:50%;width:7px;height:7px}.mic-btn.recording .rec{animation:1s ease-in-out infinite pulse-rec}@keyframes pulse-rec{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.wave{align-items:center;gap:2px;height:20px;display:flex}.wave i{opacity:.9;background:#ef4444;border-radius:2px;width:2.5px;display:block}.timer-mini{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:11px}.submit-btn{background:var(--red-2);color:#fff;border-radius:7px;padding:7px 14px;font-size:12px;font-weight:600;transition:transform .15s,background .2s}.submit-btn.clicked{background:#991b1b;transform:scale(.94)}.loading{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loading .logo-big{place-items:center;width:58px;height:58px;margin-bottom:16px;animation:2s ease-in-out infinite float;display:grid}.loading .logo-big img{object-fit:contain;width:58px;height:58px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.loading h2{margin:0 0 4px;font-size:17px;font-weight:700}.loading p{color:var(--muted);margin:0 0 18px;font-size:12px}.bar-wrap{background:#1a2540;border-radius:999px;width:280px;height:4px;overflow:hidden}.bar-wrap .bar{background:linear-gradient(90deg, transparent, var(--red), transparent);width:40%;height:100%;animation:1.5s ease-in-out infinite indet}@keyframes indet{0%{transform:translate(-100%)}to{transform:translate(350%)}}.checks{color:var(--muted);flex-direction:column;gap:6px;width:280px;margin-top:20px;font-size:11.5px;display:flex}.checks .ck{opacity:0;align-items:center;gap:8px;transition:opacity .35s,transform .35s,color .35s;display:flex;transform:translateY(4px)}.checks .ck.on{opacity:1;color:#cfd8ea;transform:none}.checks .ck .tick{color:#04261b;background:#10b981;border-radius:50%;place-items:center;width:14px;height:14px;font-size:9px;font-weight:800;display:grid}.report-scene{color:#0f172a;background:#f5f7fb;position:absolute;inset:0;overflow:hidden}.report-scroll{will-change:transform;padding:18px 22px 22px;transition:transform 4.5s;position:absolute;inset:0}.rep-head{border-bottom:1px solid #e5e9f2;justify-content:space-between;align-items:flex-start;margin-bottom:14px;padding-bottom:12px;display:flex}.rep-head .kicker{color:#dc2626;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;font-weight:700}.rep-head h2{letter-spacing:-.015em;color:#0b1220;margin:3px 0 2px;font-size:20px;font-weight:800}.rep-head .meta{color:#64748b;font-size:11.5px}.rep-head .grade{align-items:center;gap:14px;display:flex}.rep-head .grade .g{color:#ca8a04;font-size:32px;font-weight:800;line-height:1}.rep-head .grade .sc{color:#0b1220;font-variant-numeric:tabular-nums;font-size:32px;font-weight:800;line-height:1}.rep-head .grade .lbl{color:#64748b;text-align:center;margin-top:3px;font-size:10px;font-weight:500;display:block}.rep-head .grade .col{flex-direction:column;align-items:center;display:flex}.r-card{opacity:0;background:#fff;border:1px solid #e5e9f2;border-radius:10px;margin-bottom:10px;padding:14px 16px;transition:opacity .5s,transform .5s;transform:translateY(10px)}.r-card.on{opacity:1;transform:none}.r-card h3{color:#0b1220;margin:0 0 2px;font-size:13.5px;font-weight:700}.r-card .desc{color:#64748b;margin:0;font-size:11.5px}.score-row{align-items:center;gap:14px;margin:12px 0 6px;display:flex}.score-row .num{font-variant-numeric:tabular-nums;color:#ca8a04;min-width:46px;font-size:28px;font-weight:800;line-height:1}.score-row .num.green{color:#16a34a}.score-row .num .suffix{color:#94a3b8;font-size:10px;font-weight:500;display:block}.score-row .bar-c{flex:1}.score-row .bar-c .lbl{justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:11.5px;display:flex}.score-row .bar-c .lbl b{color:#0b1220;font-weight:600}.score-row .bar-c .lbl .tag{color:#ca8a04;font-size:11px;font-weight:700}.score-row .bar-c .lbl .tag.green{color:#16a34a}.bar-bg{background:#eef1f6;border-radius:999px;width:100%;height:7px;overflow:hidden}.bar-fill{background:linear-gradient(90deg,#fbbf24,#eab308);border-radius:999px;width:0%;height:100%;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}.bar-fill.green{background:linear-gradient(90deg,#22c55e,#16a34a)}.bar-fill.red{background:linear-gradient(90deg,#f87171,#ef4444)}.bar-fill.amber{background:linear-gradient(90deg,#fb923c,#f97316)}.tip{color:#1e3a8a;opacity:0;background:#eff6ff;border:1px solid #dbeafe;border-radius:8px;gap:8px;margin-top:10px;padding:10px 12px;font-size:11.5px;line-height:1.5;transition:opacity .5s .2s,transform .5s .2s;display:flex;transform:translateY(4px)}.tip.on{opacity:1;transform:none}.tip .kick{color:#2563eb;letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-weight:700}.tip svg{flex-shrink:0;margin-top:1px}.qbd-title{color:#64748b;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 8px;font-size:10.5px;font-weight:700}.qbd-row{opacity:0;align-items:center;gap:10px;margin-bottom:7px;transition:opacity .4s,transform .4s;display:flex;transform:translate(-8px)}.qbd-row.on{opacity:1;transform:none}.qbd-row .i{color:#475569;background:#f1f5f9;border-radius:50%;flex:0 0 18px;place-items:center;width:18px;height:18px;font-size:10px;font-weight:700;display:grid}.qbd-row .tr{background:#eef1f6;border-radius:999px;flex:1;height:6px;overflow:hidden}.qbd-row .tr .f{border-radius:999px;width:0%;height:100%;transition:width 1s cubic-bezier(.2,.7,.2,1)}.qbd-row .tr .f.green{background:#22c55e}.qbd-row .tr .f.orange{background:#f97316}.qbd-row .tr .f.red{background:#f87171}.qbd-row .time{color:#475569;font-variant-numeric:tabular-nums;text-align:right;min-width:34px;font-size:10.5px;font-weight:600}.qbd-row .tag{text-align:right;min-width:56px;font-size:10px;font-weight:600}.qbd-row .tag.green{color:#16a34a}.qbd-row .tag.orange{color:#f97316}.qbd-row .tag.red{color:#ef4444}.ans-card{opacity:0;background:#fff;border:1px solid #e5e9f2;border-radius:10px;margin-bottom:8px;padding:12px 14px;transition:opacity .5s,transform .5s;transform:translateY(8px)}.ans-card.on{opacity:1;transform:none}.ans-card .top{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.ans-card .q{color:#0b1220;font-size:12px;font-weight:700}.ans-card .s{color:#16a34a;font-variant-numeric:tabular-nums;font-size:13px;font-weight:800}.ans-card .s.amber{color:#ca8a04}.ans-card .snip{color:#475569;font-size:11px;line-height:1.5}.outro{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.outro img{object-fit:contain;opacity:0;width:74px;height:74px;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s;transform:scale(.9)}.outro h1{letter-spacing:-.015em;opacity:0;margin:18px 0 6px;font-size:26px;font-weight:800;transition:opacity .6s .3s,transform .6s .3s;transform:translateY(6px)}.outro p{color:var(--muted);opacity:0;margin:0;font-size:13px;transition:opacity .6s .5s,transform .6s .5s;transform:translateY(6px)}.outro.on img{opacity:1;transform:scale(1)}.outro.on h1,.outro.on p{opacity:1;transform:none}.cursor-click{z-index:100;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 4px #00000080);width:18px;height:18px;transition:opacity .25s,transform .7s cubic-bezier(.2,.7,.2,1);position:absolute}.cursor-click.on{opacity:1}.cursor-click:before{content:"";opacity:0;border:2px solid #ef4444b3;border-radius:50%;transition:transform .5s,opacity .5s;position:absolute;inset:-8px;transform:scale(0)}.cursor-click.ping:before{opacity:0;transition:transform .6s,opacity .6s;transform:scale(1.8)}.demo-progress{z-index:40;background:#ffffff0a;height:2px;position:absolute;bottom:0;left:0;right:0}.demo-progress .fill{background:var(--red);width:0%;height:100%;transition:width .12s linear}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}.caption{text-align:center;color:#6b7a94;margin-top:14px;font-size:12px;font-weight:500}.caption b{color:#cfd8ea;font-weight:600}