:root{--bg0: #0e1412;--bg1: #17201c;--panel: #1c2823;--ink: #e8f0ea;--muted: #8aa396;--line: #2c3d35;--key: #24332c;--key-ink: #d7e5db;--accent: #3dcf8e;--accent-dim: #1f7a52;--warn: #e0b35a;--danger: #e07a6a;font-family:DM Sans,sans-serif;color:var(--ink);background:var(--bg0);color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}body{height:100dvh;background:radial-gradient(900px 400px at 10% -10%,rgba(61,207,142,.12),transparent 55%),linear-gradient(180deg,var(--bg1),var(--bg0) 60%)}button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent-dim);color:#062016}button.ghost{background:transparent}button.tiny{padding:4px 8px;font-size:.8rem}.stage{height:100dvh;display:grid;grid-template-rows:auto 1fr;gap:8px;padding:8px 10px 10px;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;flex-wrap:nowrap;overflow:hidden}.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px;min-width:0}.topbar-right{flex-shrink:0}.brand{font-family:JetBrains Mono,monospace;font-size:1.25rem;font-weight:800;letter-spacing:-.04em}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#1c2823d9;color:var(--muted);font-size:.82rem;white-space:nowrap}.pill strong{color:var(--ink);margin-left:2px}.pill.err{color:var(--danger);border-color:#e07a6a73;max-width:280px;overflow:hidden;text-overflow:ellipsis}.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.dot.on{background:var(--accent);box-shadow:0 0 0 3px #3dcf8e33}.dot.warn{background:var(--warn)}.dot.off{background:var(--danger)}.monitor-pick{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}.monitor-pick select{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:7px 10px;font:inherit;font-size:.85rem;text-transform:none;letter-spacing:0;max-width:220px}.main{display:grid;grid-template-columns:1fr minmax(260px,320px);gap:8px;min-height:0;overflow:hidden}.left-col{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-width:0;min-height:0;overflow:hidden}.player{min-width:0;min-height:0;border:1px solid var(--line);border-radius:12px;background:#050807;overflow:hidden;position:relative}.player-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#050807}.player-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.95rem;padding:24px;text-align:center}.chat-panel{min-height:0;height:100%;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:12px;background:#1c2823d9;overflow:hidden;align-self:stretch}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line);font-weight:700;font-size:.9rem}.chat{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px}.chat-empty{margin:auto 0;text-align:center;color:var(--muted);font-size:.85rem}.bubble{align-self:flex-end;max-width:95%;padding:8px 10px;border-radius:12px 12px 4px;background:#3dcf8e24;border:1px solid rgba(61,207,142,.25)}.bubble.draft{background:#ffffff0a;border-style:dashed;border-color:var(--line)}.bubble-label{font-size:.72rem;color:var(--muted);margin-bottom:4px}.bubble-text{white-space:pre-wrap;word-break:break-word;font-size:.9rem;line-height:1.35}.bubble-time{display:block;margin-top:4px;font-size:.7rem;color:var(--muted);text-align:right}.keyboard-dock{height:clamp(168px,28vh,260px);min-height:168px;border:1px solid var(--line);border-radius:12px;background:#1c2823bf;padding:8px 10px;overflow:hidden;display:flex;align-items:stretch}.board{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;gap:5px}.row{display:flex;width:100%;gap:4px;flex:1 1 0;min-height:0}.key{flex:1 1 0;min-width:0;height:100%;padding:0 2px;display:grid;place-items:center;border-radius:7px;background:var(--key);color:var(--key-ink);border:1px solid #31453c;font-family:JetBrains Mono,monospace;font-size:clamp(.7rem,1.35vw,.95rem);line-height:1;-webkit-user-select:none;user-select:none}.key.wide{flex:1.45 1 0}.key.wider{flex:1.85 1 0}.key.space{flex:6 1 0}.key.active{background:var(--accent);color:#062016;border-color:var(--accent-dim);box-shadow:0 0 0 1px #3dcf8e59}.setup-overlay{position:fixed;inset:0;z-index:40;background:#0000008c;display:grid;place-items:center;padding:16px}.setup-panel{width:min(720px,100%);max-height:min(90dvh,800px);overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg1);padding:16px 18px 18px;box-shadow:0 24px 60px #00000073}.setup-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.setup-head h2{margin:0;font-size:1.15rem}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:14px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.field input{width:min(420px,85vw);border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:12px 14px;font-family:JetBrains Mono,monospace;font-size:.95rem}.field input#room{text-transform:uppercase;letter-spacing:.12em;width:min(220px,70vw)}.field-secret{flex:1 1 280px}.field-secret input{width:100%;max-width:min(560px,92vw);font-size:.82rem}.actions{display:flex;flex-wrap:wrap;gap:8px}.pack{border:1px solid var(--line);border-radius:12px;padding:12px;background:#0003}.pack-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-weight:700}.pack-cmd{display:block;padding:10px;border-radius:8px;background:#3dcf8e14;color:var(--accent);font-family:JetBrains Mono,monospace;font-size:.78rem;word-break:break-all}.pack-note{margin:8px 0 0;color:var(--muted);font-size:.85rem}.pack-note code{color:var(--ink)}@media(max-width:900px){.main{grid-template-columns:1fr;grid-template-rows:1fr minmax(140px,32%)}.left-col{min-height:0}.chat-panel{min-height:140px}.topbar{flex-wrap:wrap}.keyboard-dock{height:clamp(140px,22vh,200px);min-height:140px}}