:root{--bg:#14161a;--panel:#1c1f26;--panel-2:#23272f;--border:#333947;--text:#e6e9ef;--muted:#9aa3b2;--accent:#4f8cff;--accent-hover:#6ba0ff;--danger:#e5534b;--ok:#57ab5a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-size:15px;line-height:1.5}#root{min-height:100vh}h1,h2,h3{margin:0 0 .75rem;font-weight:600}h1{font-size:1.4rem}h2{font-size:1.1rem}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:7px 14px;font-size:14px}button:hover{background:var(--accent-hover)}button:disabled{opacity:.5;cursor:default}button.secondary{background:var(--panel-2);border:1px solid var(--border);color:var(--text)}button.secondary:hover{background:var(--border)}button.danger{border:1px solid var(--border);color:var(--danger);background:0 0}button.danger:hover{border-color:var(--danger)}input,textarea,select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-family:inherit;font-size:14px}input:focus,textarea:focus,select:focus{outline:1px solid var(--accent)}textarea.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.page{max-width:960px;margin:0 auto;padding:24px 16px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;padding:16px}.row{align-items:center;gap:8px;display:flex}.row.wrap{flex-wrap:wrap}.spacer{flex:1}.muted{color:var(--muted);font-size:13px}.error{color:var(--danger);font-size:13px}.list{flex-direction:column;gap:8px;display:flex}.list-item{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex}.topbar{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:10px 16px;display:flex}.topbar .brand{color:var(--text);font-weight:600}.center-screen{justify-content:center;align-items:center;min-height:100vh;display:flex}.center-screen form,.center-screen .panel{width:340px}.room-page{flex-direction:column;height:100vh;display:flex}.room-body{flex:1;min-height:0;display:flex}.editor-wrap{flex:1;min-width:0;min-height:0;overflow:hidden}.snippet-panel{background:var(--panel);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:8px;width:420px;padding:10px 12px;display:flex;overflow-y:auto}.panel-head{background:var(--panel);padding-bottom:4px;position:sticky;top:0}.panel-actions{gap:8px}.panel-handle{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-right:none;border-radius:6px 0 0 6px;padding:6px 10px;font-size:13px;position:absolute;top:52px;right:0}.panel-handle:hover{background:var(--border)}.snippet-list{flex-direction:column;gap:4px;display:flex}.snippet-item{text-align:left;background:var(--panel-2);border:1px solid var(--border);color:var(--text);flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;display:flex}.snippet-item:hover{background:var(--border)}.snippet-item.selected{border-color:var(--accent);background:var(--panel-2)}.snippet-item-title{font-weight:500}.snippet-preview{background:var(--bg);border:1px solid var(--border);white-space:pre;border-radius:6px;max-height:220px;margin:0;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow:auto}.snippet-notes{min-height:0}.markdown{font-size:14px}.markdown>:first-child{margin-top:0}.markdown h1,.markdown h2,.markdown h3{margin:14px 0 6px;font-size:1rem}.markdown p,.markdown ul,.markdown ol{margin:6px 0}.markdown ul,.markdown ol{padding-left:20px}.markdown li{margin:2px 0}.markdown code{background:var(--panel-2);border-radius:4px;padding:1px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}.markdown pre{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;overflow-x:auto}.markdown pre code{background:0 0;padding:0}.markdown blockquote{border-left:2px solid var(--border);color:var(--muted);margin:6px 0;padding-left:10px}.markdown table{border-collapse:collapse}.markdown th,.markdown td{border:1px solid var(--border);padding:4px 8px}.tabs{margin-top:4px}.notes-editor{align-items:stretch;gap:10px;display:flex}.notes-editor textarea{resize:vertical;flex:1;min-height:380px;line-height:1.5}.notes-preview{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;flex:1;min-height:380px;max-height:520px;padding:10px 12px;overflow-y:auto}.editor-host,.editor-host .cm-editor{height:100%}.code-editor-host .cm-editor{border:1px solid var(--border);border-radius:6px;height:380px}.center-fill{justify-content:center;align-items:center;height:100%;display:flex}.chip{border:1px solid var(--border);background:var(--panel-2);border-radius:999px;padding:2px 10px;font-size:13px}.closed-chip{color:var(--danger);border-color:var(--danger)}.chip-me{cursor:pointer}.chip-me:hover{background:var(--border)}.chip-edit{opacity:.5}.chip-me:hover .chip-edit{opacity:1}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.dot.connected{background:var(--ok)}.dot.connecting{background:var(--muted)}.dot.disconnected{background:var(--danger)}.activate-bar{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:8px 12px;display:flex}.room-error{color:var(--danger);background:#3d1f1f;padding:6px 12px;font-size:13px}.run-panel{border-top:1px solid var(--border);background:var(--panel)}.run-output{border-top:1px solid var(--border);white-space:pre-wrap;word-break:break-all;max-height:220px;margin:0;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;overflow:auto}.out-stderr,.out-compile{color:var(--danger)}.out-meta{color:var(--muted)}.replay-controls{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:8px 12px;display:flex}.timeline{flex:1;align-items:center;display:flex;position:relative}.timeline input[type=range]{width:100%}.run-marker{background:var(--ok);cursor:pointer;border-radius:50%;width:8px;height:8px;position:absolute;top:-2px;transform:translate(-50%)}.run-marker.compile_error,.run-marker.runtime_error,.run-marker.timeout,.run-marker.error{background:var(--danger)}