@import "https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";
.demo-root{--bg:#f7f6f2;--surface:#fff;--surface2:#f0efe9;--border:#00000014;--border2:#00000024;--text:#1a1916;--muted:#6b6a64;--hint:#9e9c95;--green:#1a7a56;--green-bg:#e4f5ec;--green-light:#9fdfc2;--blue:#1859a0;--blue-bg:#e4eefa;--red:#b02020;--red-bg:#fdeaea;--amber:#9a6200;--amber-bg:#fef3dc;--radius:10px;--radius-lg:14px;--mono:"JetBrains Mono", monospace;background:var(--bg);color:var(--text);border-radius:var(--radius-lg);border:.5px solid var(--border2);flex-direction:column;min-height:580px;font-family:Sora,sans-serif;font-size:14px;line-height:1.6;display:flex}.demo-topbar{border-bottom:.5px solid var(--border2);background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;display:flex}.demo-page-title{color:var(--text);letter-spacing:-.01em;font-size:14px;font-weight:600}.demo-page-sub{color:var(--hint);margin-top:2px;font-size:11px}.demo-co-content{flex-direction:column;flex:1;gap:14px;padding:20px 22px;display:flex;overflow-y:auto}.demo-co-content::-webkit-scrollbar{width:5px}.demo-co-content::-webkit-scrollbar-track{background:0 0}.demo-co-content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}.demo-ce-layout{flex:1;display:flex;overflow:hidden}.demo-ce-sidebar{border-right:.5px solid var(--border2);background:var(--surface);flex-direction:column;flex-shrink:0;gap:10px;width:196px;padding:18px 16px;display:flex;overflow-y:auto}.demo-ce-main{flex-direction:column;flex:1;gap:14px;min-width:0;padding:20px 22px;display:flex;overflow-y:auto}.demo-ce-main::-webkit-scrollbar{width:5px}.demo-ce-main::-webkit-scrollbar-track{background:0 0}.demo-ce-main::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}.demo-card{background:var(--surface);border:.5px solid var(--border2);border-radius:var(--radius-lg);padding:18px}.demo-bubbles{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.demo-legend{align-items:center;gap:5px;display:flex}.demo-btn{border-radius:var(--radius);cursor:pointer;border:.5px solid var(--border2);background:var(--surface);color:var(--text);white-space:nowrap;padding:8px 16px;font-family:Sora,sans-serif;font-size:12.5px;font-weight:500;transition:all .15s}.demo-btn:hover{background:var(--surface2)}.demo-btn:active{transform:scale(.98)}.demo-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.demo-btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}.demo-btn-primary:hover{background:#124880;border-color:#124880}.demo-btn-sm{padding:5px 12px;font-size:11.5px}.demo-btn-green{background:var(--green);color:#fff;border-color:var(--green)}.demo-btn-green:hover{background:#145f42;border-color:#145f42}.demo-audio-wrap{background:var(--surface2);border-radius:var(--radius);margin-bottom:16px;padding:14px 16px}.demo-audio-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.demo-audio-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:600}.demo-listen-count{font-size:11px;font-family:var(--mono);border-radius:20px;flex-shrink:0;padding:3px 10px;font-weight:600}.demo-listen-ok{background:var(--green-bg);color:var(--green)}.demo-listen-warn{background:var(--amber-bg);color:var(--amber)}.demo-listen-done{background:var(--red-bg);color:var(--red)}.demo-audio-image{object-fit:contain;border-radius:var(--radius);border:.5px solid var(--border2);width:100%;max-height:220px;margin-bottom:10px}.demo-question{color:var(--text);margin-bottom:12px;font-size:14px;font-weight:600;line-height:1.5}.demo-choices{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.demo-choice{border:.5px solid var(--border2);border-radius:var(--radius);cursor:pointer;background:var(--surface);color:var(--text);text-align:left;align-items:flex-start;gap:10px;width:100%;padding:10px 14px;font-family:Sora,sans-serif;font-size:13px;line-height:1.5;transition:all .15s;display:flex}.demo-choice:hover:not(:disabled),.demo-choice.selected{border-color:var(--blue);background:var(--blue-bg)}.demo-choice.correct{border-color:var(--green);background:var(--green-bg)}.demo-choice.wrong{border-color:var(--red);background:var(--red-bg)}.demo-choice:disabled{cursor:default}.demo-choice-letter{border:1px solid var(--border2);width:22px;height:22px;font-size:11px;font-weight:600;font-family:var(--mono);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}.demo-choice.selected .demo-choice-letter{background:var(--blue);color:#fff;border-color:var(--blue)}.demo-choice.correct .demo-choice-letter{background:var(--green);color:#fff;border-color:var(--green)}.demo-choice.wrong .demo-choice-letter{background:var(--red);color:#fff;border-color:var(--red)}.demo-explanation{border-radius:var(--radius);margin-bottom:16px;padding:10px 14px;font-size:12px;line-height:1.55}.demo-explanation.correct{background:var(--green-bg);color:#0d5c3c;border-left:2.5px solid var(--green)}.demo-explanation.wrong{background:var(--red-bg);color:var(--red);border-left:2.5px solid var(--red)}.demo-nav{border-top:.5px solid var(--border);justify-content:space-between;align-items:center;padding-top:14px;display:flex}.demo-result-band{background:var(--green-bg);border-radius:var(--radius-lg);border:.5px solid var(--green-light);flex-wrap:wrap;align-items:center;gap:16px;padding:18px 20px;display:flex}.demo-rb-info{flex:1;min-width:140px}.demo-rb-bar{background:#0000001a;border-radius:3px;max-width:160px;height:5px;margin-top:8px;overflow:hidden}.demo-rb-bar-fill{background:var(--green);border-radius:3px;height:5px;transition:width .4s}.demo-cta-band{border-radius:var(--radius-lg);background:#1a1916;border:.5px solid #ffffff14;flex-wrap:wrap;align-items:center;gap:20px;padding:20px 22px;display:flex}.demo-cta-copy{flex:1;min-width:200px}.demo-cta-title{color:#f7f6f2;margin-bottom:4px;font-size:14px;font-weight:600;line-height:1.45}.demo-cta-sub{color:#f7f6f280;font-size:12px;line-height:1.5}.demo-cta-actions{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:12px;display:flex}.demo-cta-btn{border-radius:var(--radius);cursor:pointer;color:#1a1916;white-space:nowrap;background:#f7f6f2;border:none;padding:10px 20px;font-family:Sora,sans-serif;font-size:13px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-block}.demo-cta-btn:hover{background:#fff;transform:scale(1.02)}.demo-cta-reset{color:#f7f6f273;cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:0;font-family:Sora,sans-serif;font-size:12px;text-decoration:underline}.demo-cta-reset:hover{color:#f7f6f2bf}.demo-doc-text{background:var(--surface2);border-left:3px solid var(--blue);border-radius:var(--radius);color:var(--text);white-space:pre-wrap;max-height:240px;margin-bottom:16px;padding:14px 16px;font-size:13px;line-height:1.75;overflow-y:auto}.demo-doc-text::-webkit-scrollbar{width:4px}.demo-doc-text::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}.demo-doc-image{object-fit:contain;border-radius:var(--radius);border:.5px solid var(--border2);width:100%;max-height:300px;margin-bottom:16px}@media (max-width:640px){.demo-ce-layout{flex-direction:column;overflow:visible}.demo-ce-sidebar{border-right:none;border-bottom:.5px solid var(--border2);width:100%;overflow:visible}.demo-ce-main{padding:16px}.demo-result-band,.demo-cta-band{flex-direction:column;align-items:flex-start}.demo-topbar{padding:12px 16px}.demo-co-content{padding:16px}}