:root{--sans:ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--bg:#070b12;--bg-glow:#0d1a2b;--panel:#0d131d;--panel-2:#121a26;--edge:#1e2836;--ink:#e7edf6;--ink-dim:#9fb0c6;--ink-faint:#4f627a;--accent:#4fd1c5;--warn:#f6ad55;--bad:#ff5c8a;--line-active:#ffffff06;--select:#4fd1c52e;--match:#a78bfa33}@media (prefers-color-scheme:light){:root{--bg:#f7f9fc;--bg-glow:#e6eefb;--panel:#fff;--panel-2:#f1f5fa;--edge:#dbe3ee;--ink:#101823;--ink-dim:#5a6b80;--ink-faint:#9aa8ba;--accent:#0f9b8e;--line-active:#0a1a2f07;--select:#0f9b8e26;--match:#7c3aed22}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--sans);color:var(--ink);background:radial-gradient(1100px 620px at 12% -8%, var(--bg-glow), transparent 65%), radial-gradient(900px 560px at 100% 0%, #4fd1c514, transparent 60%), var(--bg);-webkit-font-smoothing:antialiased}.app{grid-template-rows:auto 1fr auto;height:100%;display:grid}.bar{border-bottom:1px solid var(--edge);background:color-mix(in oklab, var(--panel) 78%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);align-items:center;gap:18px;padding:12px 18px;display:flex}.brand{flex:none;align-items:center;gap:11px;display:flex}.mark{background:linear-gradient(140deg, var(--accent), #a78bfa 70%, #ff5c8a);width:26px;height:26px;box-shadow:0 0 0 1px #ffffff1a, 0 6px 18px -8px var(--accent);border-radius:8px}.brand h1{letter-spacing:.16em;margin:0;font-size:15px;font-weight:700}.room{color:var(--ink-faint);letter-spacing:.04em;margin:1px 0 0;font-size:11px}.room-btn{font:inherit;font-family:var(--mono);color:var(--ink-dim);border:none;border-bottom:1px dashed var(--ink-faint);cursor:pointer;background:0 0;padding:0 1px}.room-btn:hover{color:var(--accent);border-color:var(--accent)}.wiring{font-family:var(--mono);letter-spacing:.04em;color:var(--accent);background:color-mix(in oklab, var(--accent) 13%, transparent);border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);white-space:nowrap;border-radius:999px;align-self:center;margin-left:4px;padding:3px 9px;font-size:10.5px;font-weight:700}.version{font-family:var(--mono);color:var(--ink-faint);background:var(--panel-2);border:1px solid var(--edge);white-space:nowrap;border-radius:999px;align-self:center;padding:3px 8px;font-size:10.5px}.wiring[data-kind=relay]{color:var(--warn);background:color-mix(in oklab, var(--warn) 13%, transparent);border-color:color-mix(in oklab, var(--warn) 40%, transparent)}.inspector{z-index:20;background:color-mix(in oklab, var(--panel) 96%, transparent);border:1px solid var(--edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:13px;width:min(370px,100vw - 28px);padding:13px 15px 12px;font-size:12px;animation:.16s ease-out pop;position:absolute;top:14px;right:14px;box-shadow:0 26px 60px -26px #000d}.inspector[hidden]{display:none}.inspector-head{align-items:center;gap:8px;margin-bottom:10px;display:flex}.inspector-head i{background:var(--peer,var(--accent));border-radius:50%;flex:none;width:9px;height:9px}.inspector-head b{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}.inspector-head .alert-btn{color:var(--ink-dim);background:0 0;border-color:#0000}.inspector-head .alert-btn:hover{color:var(--ink);background:var(--panel-2)}.inspector-body{grid-template-columns:auto 1fr;gap:5px 12px;margin:0;display:grid}.inspector-body dt{color:var(--ink-faint);font-size:11px}.inspector-body dd{font-family:var(--mono);color:var(--ink-dim);overflow-wrap:anywhere;margin:0;font-size:11px}.inspector-body dd.good{color:var(--accent)}.inspector-body dd.warn{color:var(--warn)}.inspector-foot{gap:7px;margin-top:11px;display:flex}.inspector-foot .btn{flex:1}.peers{flex-wrap:wrap;flex:1;justify-content:center;gap:6px;min-width:0;display:flex}.peer{max-width:22ch;font:inherit;color:var(--ink-dim);background:color-mix(in oklab, var(--peer) 12%, transparent);border:1px solid color-mix(in oklab, var(--peer) 38%, transparent);white-space:nowrap;cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:3px 9px 3px 7px;font-size:11.5px;font-weight:600;animation:.18s ease-out pop;display:inline-flex;overflow:hidden}.peer span{text-overflow:ellipsis;overflow:hidden}.peer:hover{border-color:var(--peer);color:var(--ink)}.peer.me{color:var(--ink)}.peer:focus-visible{outline:2px solid var(--peer);outline-offset:2px}.peer i{background:var(--peer);width:7px;height:7px;box-shadow:0 0 0 0 color-mix(in oklab, var(--peer) 60%, transparent);border-radius:50%;flex:none}.peer.typing i{animation:1.1s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--peer) 70%, transparent)}to{box-shadow:0 0 0 7px #0000}}@keyframes pop{0%{opacity:0;transform:translateY(-3px)scale(.94)}}.actions{flex:none;gap:7px;display:flex}.btn{font:inherit;color:var(--ink-dim);background:var(--panel-2);border:1px solid var(--edge);cursor:pointer;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;transition:color .12s,border-color .12s,transform 60ms}.btn:hover{color:var(--ink);border-color:var(--ink-faint)}.btn:active{transform:translateY(1px)}.btn.primary{color:#06121a;background:var(--accent);border-color:#0000}.btn.primary:hover{filter:brightness(1.08);color:#06121a}.btn.warn{color:#1a1206;background:var(--warn);border-color:#0000}.btn:focus-visible,.room-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.alert{color:#fff2f6;background:linear-gradient(90deg,#b4123f,#d6265a);border-bottom:1px solid #ff5c8a55;align-items:center;gap:10px;padding:9px 16px;font-size:12.5px;font-weight:600;display:flex}.alert[hidden]{display:none}.alert-mark{background:#ffffff2e;border-radius:50%;flex:none;place-items:center;width:17px;height:17px;font-size:11px;display:grid}.alert #alert-text{flex:1;min-width:0}.alert-btn{font:inherit;color:#fff;cursor:pointer;background:#ffffff26;border:1px solid #ffffff3d;border-radius:7px;padding:4px 10px;font-size:11.5px;font-weight:700}.alert-btn:hover{background:#ffffff3d}.alert-btn.quiet{background:0 0;border-color:#0000;padding:4px 7px}.editor-wrap{min-height:0;position:relative}.editor,.cm-editor{height:100%}.cm-editor.cm-focused{outline:none}.toast{color:var(--ink);background:var(--panel-2);border:1px solid var(--edge);opacity:0;pointer-events:none;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600;transition:opacity .18s,transform .18s;position:absolute;bottom:22px;left:50%;transform:translate(-50%,12px);box-shadow:0 18px 40px -18px #000c}.toast.show{opacity:1;transform:translate(-50%)}.status{font-family:var(--mono);color:var(--ink-faint);border-top:1px solid var(--edge);background:color-mix(in oklab, var(--panel) 78%, transparent);align-items:center;gap:9px;padding:7px 18px;font-size:11px;display:flex}.status .grow{flex:1}.status .sep{background:var(--edge);width:1px;height:11px}.status .quiet{color:var(--ink-faint);text-decoration:none}.status .quiet:hover{color:var(--accent)}.dot{background:var(--warn);border-radius:50%;width:7px;height:7px;transition:background .2s}.dot[data-state=connected],.dot[data-state=synced]{background:var(--accent)}.dot[data-state=disconnected],.dot[data-state=offline]{background:var(--bad)}@media (max-width:860px){.bar{flex-wrap:wrap;gap:10px}.peers{order:3;justify-content:flex-start;width:100%}.actions{margin-left:auto}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}