:root{--bg:#f7f8fa;--ink:#18212d;--muted:#77808d;--border:#e6e9ef;--accent:#6a55dc;--soft:#f1edff;--green:#39a284}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',system-ui,sans-serif}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #b5a8f0;outline-offset:3px}a{color:inherit;text-decoration:none}.topbar{height:78px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(4%,calc((100% - 1440px)/2));background:#ffffffb8}.brand{display:flex;align-items:center;gap:10px;font:750 23px Manrope,system-ui}.mark,.small-mark{display:inline-flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:italic;font-weight:bold}.mark{width:33px;height:33px;color:white;background:var(--accent);border-radius:10px;font-size:27px}.beta{font:700 9px 'DM Sans';letter-spacing:1px;background:var(--soft);color:var(--accent);padding:5px 7px;border-radius:5px;margin:3px 0 0 4px}nav{display:flex;gap:28px;color:#637082;font-size:13px}nav a:hover{color:var(--accent)}main{max-width:1440px;margin:auto;padding:42px 4% 24px}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:24px}.eyebrow{font-size:10px;font-weight:700;color:#9584bb;letter-spacing:1.7px;margin:0 0 14px}h1{font:700 40px/1.23 Manrope,system-ui;letter-spacing:-1.8px;margin:0 0 12px}.subtitle{margin:0;color:var(--muted);font-size:14px}.model-chip{white-space:nowrap;background:white;border:1px solid var(--border);border-radius:20px;padding:10px 14px;font-size:11px;font-weight:600;margin-bottom:2px}.model-chip i,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px}.model-chip span{color:var(--muted);font-weight:400;margin-left:5px}.workspace{display:grid;grid-template-columns:1.16fr 1fr;gap:22px;align-items:stretch}.panel{border:1px solid var(--border);border-radius:18px;background:white;overflow:hidden;box-shadow:0 6px 24px #25314c03}.panel-heading{height:61px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--border)}.section-label{font-size:10px;letter-spacing:1.2px;font-weight:700;color:#77808d}.status{font-size:10px;background:#f4f5f7;border-radius:6px;padding:5px 8px;color:#7b8390}.status.active{background:#ebf7f1;color:#348e71}.stage{height:318px;background:radial-gradient(ellipse at 50% 45%,#f7f5fc,#f1f2f6);position:relative;display:flex;justify-content:center;align-items:center;margin:18px 18px 0;border-radius:10px;overflow:hidden}.empty{text-align:center}.upload-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0 auto 16px;background:white;box-shadow:0 3px 8px #1b17380b;border:1px solid #e9e6f0;border-radius:11px;color:var(--accent);font-size:26px}.empty h2,.chat-empty h2{font:650 18px Manrope,system-ui;letter-spacing:-.5px;margin:0 0 9px}.empty p,.chat-empty p{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 19px}.primary{border:0;color:white;background:var(--accent);border-radius:8px;padding:11px 15px;font-weight:550;font-size:12px}.primary:hover:enabled{background:#5b48c3}.primary span{margin-left:18px}.empty small{display:block;font-size:10px;color:#969da9;margin-top:13px}.secondary{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:white;color:#566171;font-size:12px}.text-button{border:0;background:none;color:#7a8191;padding:6px 0;font-size:11px}.text-button:hover:enabled{color:var(--accent)}video{height:100%;width:100%;object-fit:contain;background:#171a23}.video-caption{position:absolute;bottom:12px;left:12px;max-width:90%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:white;background:#141923bf;border:1px solid #ffffff25;border-radius:6px;padding:6px 9px;font-size:10px}.preparing{position:absolute;inset:0;background:#f5f4fa;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}.preparing p{font-size:12px;color:var(--muted);margin:0}.spinner{width:24px;height:24px;border:2px solid #ded8f5;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.transport{padding:18px 22px 0}.time-row{display:flex;justify-content:space-between;font-size:11px;font-variant-numeric:tabular-nums;color:#9a9eaa}.time-row span:first-child{color:#3c4654;font-weight:600}.track{height:4px;background:#eeecf5;border-radius:3px;margin-top:10px;overflow:hidden}#progress{background:var(--accent);width:0;height:100%;transition:width .3s linear}.controls{display:flex;align-items:center;gap:9px;margin:18px 0 17px}#replace{margin-left:auto}.stream-note{display:flex;align-items:flex-start;gap:9px;margin:0 22px 18px;padding:12px;background:#faf9fe;border:1px solid #efedf8;border-radius:8px;color:#968bb7}.stream-note p{font-size:10px;line-height:1.65;margin:0;color:#8c86a2}.metrics{display:flex;border-top:1px solid var(--border);padding:18px 22px;gap:25px}.metrics div{flex:1}.metrics span{display:block;font-size:9px;color:#969cac;margin-bottom:7px}.metrics strong{font:650 18px Manrope,system-ui;font-variant-numeric:tabular-nums}.chat-panel{display:flex;flex-direction:column;min-height:640px}.messages{flex:1;min-height:310px;max-height:450px;overflow-y:auto;padding:22px;scroll-behavior:auto}.chat-empty{text-align:center;padding:51px 0 20px}.small-mark{width:36px;height:36px;background:var(--soft);color:var(--accent);border-radius:11px;font-size:28px;margin-bottom:17px}.chat-empty h2{font-size:15px}.suggestions{display:flex;flex-direction:column;gap:7px;margin:23px auto 0;max-width:290px}.suggestions button{background:white;border:1px solid #ecebf3;text-align:left;font-size:11px;padding:10px 12px;border-radius:8px;color:#8b849b}.suggestions button:hover{background:var(--soft);color:var(--accent)}.event{margin:0 0 19px;animation:enter .2s ease-out}.event header{display:flex;align-items:center;gap:8px;font-size:10px;margin-bottom:7px;color:#8991a0}.event header strong{font-weight:600;color:#596274}.event header time{margin-left:auto;font-variant-numeric:tabular-nums;font-size:9px}.event .bubble{font-size:12px;line-height:1.75;padding:12px 14px;background:#f5f6f8;border-radius:0 10px 10px 10px;white-space:pre-wrap;overflow-wrap:anywhere}.event.proactive .bubble{background:#f5f1ff;border:1px solid #ebe4ff}.event .tag{font-size:8px;letter-spacing:.5px;color:var(--accent);background:var(--soft);border-radius:3px;padding:3px 5px}.event.user{margin-left:35px}.event.user .bubble{background:#eeedf3;border-radius:10px 0 10px 10px}.event.user header strong{color:#887f9d}.thinking{font-size:10px;color:#a49bb6;min-height:25px;padding:4px 22px 8px}form{position:relative;margin:0 18px;border:1px solid #e3deef;border-radius:10px;background:#fdfcfe}textarea{resize:none;border:0;background:none;width:100%;padding:13px 52px 13px 13px;font:12px/1.6 'DM Sans',system-ui;color:var(--ink);min-height:76px;outline:none}textarea::placeholder{color:#b0aabd}#send{position:absolute;right:10px;bottom:11px;border:0;border-radius:7px;background:var(--accent);color:white;width:31px;height:31px;font-size:19px}.chat-footnote{text-align:center;color:#a2a7b3;font-size:9px;padding:12px 14px 17px}footer{display:flex;justify-content:space-between;font-size:10px;color:#9ba2af;margin-top:22px}footer b{padding:0 9px;font-weight:400}#notice{background:#fff2e5;color:#8c4a1c;font-size:12px;border:1px solid #f3d9bf;padding:13px;border-radius:8px;margin-bottom:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}[hidden]{display:none!important}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(min-width:1600px){main{padding-left:0;padding-right:0}.stage{height:390px}.chat-panel{min-height:700px}.messages{max-height:510px}}@media(max-width:900px){h1{font-size:32px}.workspace{grid-template-columns:1fr}.intro{align-items:flex-start}.model-chip{margin-top:25px}.chat-panel{min-height:570px}.messages{max-height:450px}.stage{height:350px}}@media(max-width:520px){.topbar{height:64px;padding:0 20px}nav{gap:15px;font-size:11px}nav a:last-child{display:none}main{padding:26px 16px}.intro{display:block}.model-chip{display:inline-block;margin-top:20px}h1{font-size:31px}.subtitle{font-size:12px;line-height:1.7}.eyebrow{font-size:8px;letter-spacing:1px}.stage{height:280px;margin:12px 12px 0}.panel-heading{padding:0 16px}.controls{gap:7px}.metrics{gap:12px}.chat-empty{padding-top:30px}footer{line-height:1.8;gap:25px;font-size:9px}.brand{font-size:21px}}

.connection{padding:16px 20px;margin-bottom:22px}.connection-title{display:flex;gap:16px;align-items:center;margin-bottom:12px}.connection-title #connection-status{font-size:11px;color:var(--muted)}.connection-title #privacy{margin-left:auto}.connection-fields{display:flex;align-items:flex-end;gap:12px;margin:0;border:0;background:none}.connection-fields label{display:block;flex:1;font-size:10px;font-weight:600;color:#747c8c}.connection-fields label:first-child{flex:1.5}.connection-fields input{width:100%;display:block;margin-top:7px;border:1px solid #e3deef;border-radius:7px;padding:10px 12px;font:12px system-ui;color:var(--ink);background:#fcfbfe;height:39px;min-width:0}.connection-fields input:disabled{color:#898394;background:#f5f4f8}.optional{font-size:9px;font-weight:400;color:#aaa3b4;margin-left:5px}.connection-note{margin:10px 0 0;font-size:10px;line-height:1.6;color:#9a93a9}.video-heading-actions{display:flex;align-items:center;gap:12px}#connection-dot{background:#b0a9bc}#connection-dot.online{background:var(--green)}.connection-fields button{height:39px;white-space:nowrap}.intro{margin-bottom:25px}main{padding-top:28px}h1{font-size:35px}#model-name{color:var(--ink)}@media(max-width:700px){.connection-fields{flex-wrap:wrap}.connection-fields label,.connection-fields label:first-child{flex:1 1 100%}.connection-title{gap:8px}.connection-title .section-label{font-size:8px}.connection{padding:14px}.connection-fields button{flex:1}.intro h1{font-size:30px}}

.voice-controls{display:flex;align-items:center;gap:8px;margin-left:auto}.voice-status{font-size:10px;color:#827a96}.voice-controls+.text-button{margin-left:8px}@media(max-width:500px){.voice-status{display:none}}

@media(min-width:701px) and (max-width:1000px){.workspace{grid-template-columns:1fr 1fr;gap:12px}.panel-heading{padding:0 12px;gap:7px}.section-label{font-size:9px;letter-spacing:.6px}.stage{height:230px;margin:12px 12px 0}.transport{padding:14px 12px 0}.controls{gap:6px;flex-wrap:wrap}.controls button{font-size:10px;padding:9px}.stream-note{margin:0 12px 12px;padding:9px}.metrics{padding:15px 12px;gap:12px}.chat-panel{min-height:600px}.messages{padding:14px;max-height:390px}.voice-status{display:none}.event.user{margin-left:14px}.event .bubble{padding:10px;font-size:11px}.event header{gap:4px}.thinking{padding-left:14px;padding-right:14px}}
.stream-active .intro,.stream-active .connection{display:none}.stream-active main{padding-top:20px}