:root{--bg: #0a0a0c;--bg-2: #0e0e12;--panel: #131318;--panel-2: #17171d;--line: #26262e;--line-bright: #34343f;--text: #ececef;--muted: #8a8a96;--faint: #5a5a64;--accent: #ff3b3b;--accent-dim: #b32a2a;--ok: #4fd1c5;--warn: #ffb020;--radius: 14px;--mono: "IBM Plex Mono", ui-monospace, monospace;--display: "Bricolage Grotesque", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#16161d 0%,transparent 60%),radial-gradient(900px 500px at 0% 110%,#14121a 0%,transparent 55%),var(--bg);color:var(--text);font-family:var(--display);min-height:100vh}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent 0 31px,#ffffff03 31px,#ffffff03 32px),linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.012) 31px 32px);background-size:32px 32px;pointer-events:none;z-index:0}#grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}body>*{position:relative;z-index:2}.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(20,20,26,.6),transparent)}.brand{display:flex;align-items:baseline;gap:12px}.brand-name{font-weight:800;font-size:26px;letter-spacing:-.03em}.brand-sub{font-family:var(--mono);font-size:12px;color:var(--faint)}.rec-dot{width:11px;height:11px;border-radius:50%;background:#3a3a44;align-self:center;margin-right:2px;transition:background .25s,box-shadow .25s}.rec-dot.on{background:var(--accent);box-shadow:0 0 #ff3b3b99;animation:pulse 1.4s infinite}@keyframes pulse{0%{box-shadow:0 0 #ff3b3b8c}70%{box-shadow:0 0 0 10px #ff3b3b00}to{box-shadow:0 0 #ff3b3b00}}.status-cluster{display:flex;gap:10px}.stat-pill{display:flex;flex-direction:column;gap:2px;padding:7px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.stat-label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--faint)}.stat-value{font-family:var(--mono);font-size:13px;color:var(--text)}.stat-pill[data-state=connected] .stat-value,.stat-pill[data-state=generating] .stat-value{color:var(--ok)}.stat-pill[data-state=connecting] .stat-value,.stat-pill[data-state=reconnecting] .stat-value{color:var(--warn)}.stat-pill[data-state=error] .stat-value{color:var(--accent)}.stage{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;padding:26px 28px 8px}.monitor{display:flex;flex-direction:column;gap:10px}.monitor-head{display:flex;align-items:center;gap:12px}.tag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;padding:4px 10px;border:1px solid var(--line-bright);border-radius:6px;color:var(--muted)}.tag.accent{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:600}.tag-meta{font-family:var(--mono);font-size:11px;color:var(--faint)}.screen{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:#000;border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 0 60px #0009}.primary .screen{border-color:var(--line-bright);box-shadow:inset 0 0 60px #0009,0 0 0 1px #ff3b3b14}.screen video{width:100%;height:100%;object-fit:cover;display:block;background:#000}.screen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--faint);background:repeating-linear-gradient(45deg,#0c0c10 0,#0c0c10 12px,#101015 12px,#101015 24px)}.screen-overlay.hidden{display:none}.corner{position:absolute;width:14px;height:14px;border-color:#ffffff40}.corner.tl{top:10px;left:10px;border-top:1.5px solid;border-left:1.5px solid}.corner.tr{top:10px;right:10px;border-top:1.5px solid;border-right:1.5px solid}.corner.bl{bottom:10px;left:10px;border-bottom:1.5px solid;border-left:1.5px solid}.corner.br{bottom:10px;right:10px;border-bottom:1.5px solid;border-right:1.5px solid}.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px 28px}.meter{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:12px 16px;display:flex;flex-direction:column;gap:6px}.meter-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--faint)}.meter-value{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em}.meter.accent .meter-value{color:var(--accent)}.console{margin:8px 28px;padding:22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent),var(--panel);display:flex;flex-direction:column;gap:16px}.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:6px}.field.grow{flex:1 1 320px}.field-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--faint)}.field-label.inline{align-self:center}input[type=text],input[type=password]{width:100%;padding:13px 15px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:var(--mono);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}input::placeholder{color:var(--faint)}input:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px #ff3b3b1a}input:disabled{opacity:.45;cursor:not-allowed}.btn{font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:13px 22px;border-radius:10px;cursor:pointer;border:1px solid var(--line-bright);background:var(--panel-2);color:var(--text);transition:transform .08s,background .15s,border-color .15s,opacity .15s;white-space:nowrap}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-live{background:var(--accent);color:#120505;border-color:var(--accent);font-weight:600;letter-spacing:.1em}.btn-live:hover:not(:disabled){background:#ff5454}.btn-stop{border-color:var(--accent-dim);color:#ff8a8a}.btn-send{background:#1d1d24}.btn-send:hover:not(:disabled){background:#24242d}.btn-ghost{background:transparent}.presets{gap:8px}.chip{font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-bright);background:var(--bg-2);color:var(--muted);cursor:pointer;transition:all .15s}.chip:hover{color:var(--text);border-color:var(--muted)}.chip:active{transform:translateY(1px)}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{display:none}.avatar-block{display:flex;flex-direction:column;gap:6px}.avatar-controls{display:flex;align-items:center;gap:10px}.avatar-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:10px;border:1px dashed var(--line-bright);background:var(--bg-2);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--faint);font-family:var(--mono);font-size:20px;cursor:pointer;transition:border-color .15s}.avatar-thumb:hover{border-color:var(--muted)}.avatar-thumb.has-img{border-style:solid;border-color:var(--ok)}.avatar-thumb img{width:100%;height:100%;object-fit:cover;display:block}.toggle-track{width:42px;height:24px;border-radius:999px;background:#2a2a33;border:1px solid var(--line-bright);position:relative;transition:background .2s}.toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}.toggle input:checked+.toggle-track{background:#4fd1c540;border-color:var(--ok)}.toggle input:checked+.toggle-track .toggle-thumb{transform:translate(18px);background:var(--ok)}.toggle-text{font-family:var(--mono);font-size:13px;color:var(--muted)}.footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 28px 28px;flex-wrap:wrap}.log{font-family:var(--mono);font-size:12.5px;color:var(--muted);border-left:2px solid var(--line-bright);padding-left:12px}.log.err{color:var(--accent);border-color:var(--accent)}.log.ok{color:var(--ok);border-color:var(--ok)}.footer-note{font-family:var(--mono);font-size:10.5px;color:var(--faint);max-width:420px;text-align:right}@media (max-width: 880px){.stage{grid-template-columns:1fr}.meters{grid-template-columns:repeat(2,1fr)}.footer-note{text-align:left}}