*{box-sizing:border-box;margin:0;padding:0}:root{--foreground:#ededed;--background:#0a0a0a;--surface:#141414;--muted:#888;--border:#262626;--radius:12px;--accent:#6366f1;--accent-hover:#818cf8;--danger:#ef4444;--danger-hover:#f87171}body,html{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);color:var(--foreground);line-height:1.5;-webkit-font-smoothing:antialiased}.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:28px}.header{text-align:center;max-width:600px}.title{font-size:clamp(24px,5vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}.description{font-size:16px;color:var(--muted)}.api-key-box{width:100%;max-width:480px;border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--surface)}.api-key-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.api-key-title{font-size:14px;font-weight:600}.api-key-badge{font-size:12px;font-weight:500;padding:2px 10px;border-radius:6px;background:rgba(239,68,68,.15);color:var(--danger)}.api-key-badge.ok{background:rgba(34,197,94,.15);color:#22c55e}.api-key-input{width:100%;padding:10px 14px;font-size:14px;font-family:monospace;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--foreground);outline:none;transition:border-color .15s ease}.api-key-input:focus{border-color:var(--accent)}.api-key-input::placeholder{color:#555}.api-key-hint{margin-top:10px;font-size:13px;color:var(--muted)}.api-key-hint a{color:var(--accent);text-decoration:none}.api-key-hint a:hover{text-decoration:underline}.stage{display:flex;gap:24px;width:100%;max-width:1100px}.avatar-panel{flex:1 1;display:flex;flex-direction:column;align-items:center;gap:10px}.avatar-label{font-size:14px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.avatar-selector{width:100%;display:flex;flex-direction:column;gap:8px}.selector-dropdown{width:100%;padding:10px 14px;font-size:15px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--foreground);outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.selector-dropdown:focus{border-color:var(--accent)}.custom-id-input{width:100%;padding:10px 14px;font-size:14px;font-family:monospace;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--foreground);outline:none;transition:border-color .15s ease}.custom-id-input:focus{border-color:var(--accent)}.custom-id-input::placeholder{color:#555}.avatar-video-wrapper{position:relative;width:100%;aspect-ratio:4/3;background:#000;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.avatar-poster,.avatar-video{width:100%;height:100%;object-fit:cover}.avatar-poster{position:absolute;inset:0;transition:opacity .4s ease;pointer-events:none}.controls{display:flex;flex-direction:column;align-items:center;gap:16px}.start-btn{padding:14px 36px;font-size:16px;font-weight:500;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;transition:background .15s ease,opacity .15s ease}.start-btn:hover:not(:disabled){background:var(--accent-hover)}.start-btn:disabled{opacity:.4;cursor:not-allowed}.end-btn{padding:10px 28px;font-size:14px;font-weight:500;border:1px solid var(--danger);border-radius:var(--radius);background:transparent;color:var(--danger);cursor:pointer;transition:background .15s ease,color .15s ease}.end-btn:hover{background:var(--danger);color:#fff}.status{font-size:14px;color:var(--muted)}.status.loading{color:var(--accent)}.status.live{color:#22c55e}.status.error{color:var(--danger)}.credit{font-size:13px}.credit,.credit a{color:var(--muted)}.credit a{text-decoration:none}.credit a:hover{color:var(--foreground)}@media (max-width:700px){.stage{flex-direction:column;gap:16px}.page{gap:20px}.api-key-box,.page{padding:16px}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}