*{box-sizing:border-box}body{background:#1e1e1e;margin:0;font-family:system-ui,sans-serif}.app{color:#fff;flex-direction:column;height:100vh;display:flex}.topbar{border-bottom:1px solid #333;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 20px;font-size:14px;display:flex}.topbar button,.topbar a{color:#ccc;font:inherit;cursor:pointer;background:#2d2d2d;border:1px solid #444;border-radius:4px;padding:4px 10px;text-decoration:none}.status{background:#98c379;border-radius:50%;width:8px;height:8px}.status.offline{background:#e06c75}.warning{color:#e06c75;font-size:13px}.handle{align-items:center;gap:6px;margin-left:auto;display:flex}.swatch{border-radius:50%;width:12px;height:12px}.handle input{color:#fff;width:160px;font:inherit;background:#2d2d2d;border:1px solid #444;border-radius:4px;padding:4px 8px}.peers{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.peers li{text-overflow:ellipsis;white-space:nowrap;background:#2d2d2d;border-left:4px solid;border-radius:4px;max-width:140px;padding:2px 8px;font-size:12px;overflow:hidden}.editor{flex:1;gap:20px;min-height:0;padding:20px;display:flex}.code-panels{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.panel,.preview-panel{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}h2{color:#ccc;margin:0 0 10px;font-size:1rem}.cm-host{border:1px solid #444;flex:1;min-height:0}.cm-host .cm-editor{height:100%}.cm-host .cm-content{padding-top:1.2em}.cm-host .cm-editor .cm-ySelectionInfo{opacity:1;color:#1e1e1e;pointer-events:none;border-radius:3px 3px 3px 0;padding:0 4px;font-family:system-ui,sans-serif;font-size:11px;line-height:1.3em;top:-1.3em}iframe{background:#fff;border:1px solid #444;flex:1}