:root{--bg: #0a0d12;--bg-gradient: radial-gradient(ellipse 1200px 600px at 50% -10%, #16213a 0%, #0a0d12 60%);--panel: rgba(22, 27, 36, .72);--panel-solid: #141923;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #e8ecf2;--muted: #8b96a5;--accent: #5b8def;--accent-2: #34d2c2;--shadow: 0 16px 48px rgba(0, 0, 0, .42);--editor-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--editor-font-size: 15px;--editor-line-height: 1.7;--editor-padding: 28px 32px;--radius: 12px;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);background-image:var(--bg-gradient);background-attachment:fixed;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}#root,.app{height:100vh}.app{display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);flex-wrap:wrap;z-index:10}.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.logo-mark{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 14px #5b8def8c}.logo{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em}.doc-badge{font-size:12px;font-family:var(--editor-font);color:var(--muted);border:1px solid var(--border);background:#ffffff08;border-radius:999px;padding:4px 12px;cursor:default}.btn{background:#ffffff0a;color:var(--text);border:1px solid var(--border-strong);border-radius:8px;font-size:12.5px;font-weight:500;padding:7px 14px;cursor:pointer;transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}.btn:hover{background:#ffffff14;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px #0000004d}.btn:active{transform:translateY(0) scale(.98)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.share-btn.is-copied{border-color:var(--accent-2);color:var(--accent-2)}.presence-bar{display:flex;align-items:center;gap:10px}.avatar-stack{display:flex;align-items:center}.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);border:2px solid var(--panel-solid);margin-left:-8px;animation:pop-in .25s var(--ease);transition:transform .15s var(--ease)}.avatar:first-child{margin-left:0}.avatar:hover{transform:translateY(-2px) scale(1.08);z-index:2}.avatar-self{cursor:pointer;padding:0}@keyframes pop-in{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.presence-name{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:2px 4px;border-radius:6px;transition:color .15s var(--ease)}.presence-name:hover{color:var(--text)}.presence-name-input{background:#00000059;border:1px solid var(--accent);border-radius:6px;color:var(--text);font-size:12.5px;width:110px;padding:4px 8px;outline:none}.status-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;border-radius:999px;padding:5px 12px;border:1px solid var(--border);background:#ffffff08;transition:color .3s var(--ease)}.status-dot{width:8px;height:8px;border-radius:50%;transition:background .3s var(--ease)}.status-online .status-dot{background:#3ddc84;box-shadow:0 0 #3ddc8480;animation:pulse 2.4s infinite}.status-connecting .status-dot{background:#f2c14e;animation:blink 1s infinite}.status-offline .status-dot{background:#ef5b6e}.status-offline{color:#ef9aa6}@keyframes pulse{0%{box-shadow:0 0 #3ddc8473}70%{box-shadow:0 0 0 7px #3ddc8400}to{box-shadow:0 0 #3ddc8400}}@keyframes blink{50%{opacity:.35}}.main{flex:1;display:flex;min-height:0;padding:20px 24px 12px}.editor-shell{position:relative;flex:1;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel-solid);box-shadow:var(--shadow);transition:border-color .2s var(--ease)}.editor-shell:focus-within{border-color:#5b8def73;box-shadow:var(--shadow),0 0 0 3px #5b8def1f}.editor-input,.editor-overlay,.peer-layer{position:absolute;inset:0;font-family:var(--editor-font);font-size:var(--editor-font-size);line-height:var(--editor-line-height);padding:var(--editor-padding);white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}.editor-input{width:100%;height:100%;border:none;resize:none;outline:none;background:transparent;color:var(--text);caret-color:var(--accent-2);z-index:1}.editor-input::placeholder{color:#5a6575}.editor-input::selection{background:#5b8def59}.editor-input::-webkit-scrollbar{width:10px}.editor-input::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:5px;border:2px solid var(--panel-solid)}.editor-input::-webkit-scrollbar-thumb:hover{background:#ffffff38}.editor-overlay{z-index:2;pointer-events:none;overflow:hidden;padding:0}.peer-ghost{color:transparent}.peer-selection{color:transparent;border-radius:2px}.peer-marker{position:relative}.peer-caret{position:absolute;left:-1px;top:.1em;display:inline-block;width:2px;height:1.3em;border-radius:1px;animation:caret-blink 1.1s steps(1) infinite;box-shadow:0 0 6px currentColor}@keyframes caret-blink{50%{opacity:.25}}.peer-label{position:absolute;left:-1px;top:-1.25em;font-size:10px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3);padding:3px 6px;border-radius:4px 4px 4px 0;white-space:nowrap;box-shadow:0 2px 8px #00000059;animation:label-in .2s var(--ease)}@keyframes label-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.statusbar{display:flex;align-items:center;gap:10px;padding:8px 28px 12px;font-size:11.5px;color:var(--muted)}.statusbar-divider{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5}.statusbar-spacer{flex:1}.statusbar-hint{opacity:.75}@media(max-width:720px){.statusbar-hint{display:none}.main{padding:12px}}