:root{--accent: #7c6cd9}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,Segoe UI,system-ui,sans-serif;color:#222}.app{display:flex;flex-direction:column;height:100vh;height:100dvh}.bar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#faf9fd;border-bottom:1px solid #e7e4f0;flex:0 0 auto}.brand{font-size:14px;white-space:nowrap}.spacer{flex:1 1 auto}.peers{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.peer{margin-right:10px}.status{font-size:12px;color:#9aa0a6;white-space:nowrap;min-width:62px;text-align:right}.modes{display:inline-flex;border:1px solid #d7d3e6;border-radius:9px;overflow:hidden}.modes button{border:none;background:#fff;padding:5px 11px;font-size:13px;cursor:pointer;border-left:1px solid #ecebf2;display:inline-flex;align-items:center;gap:5px;color:#4a4a55}.modes button:first-child{border-left:none}.modes button.on{background:var(--accent);color:#fff}.modes .mi{font-size:13px}.name-input{font:inherit;font-size:13px;padding:5px 9px;border:1px solid #d7d3e6;border-radius:8px;width:130px}.name-input:focus{outline:none;border-color:var(--accent)}.bar .share{padding:6px 12px;font-size:13px;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap}.bar .share:hover{filter:brightness(1.05)}.toolbar{display:flex;align-items:center;gap:3px;padding:5px 12px;background:#fff;border-bottom:1px solid #eceaf3;flex:0 0 auto}.tbtn{min-width:30px;height:28px;padding:0 7px;border:1px solid transparent;border-radius:7px;background:transparent;cursor:pointer;font-size:14px;color:#3a3a44;display:inline-flex;align-items:center;justify-content:center}.tbtn:hover{background:#f0eef8;border-color:#e4e0f2}.tsep{width:1px;height:20px;background:#e4e0f2;margin:0 5px}.viewtoggle{display:inline-flex;border:1px solid #d7d3e6;border-radius:8px;overflow:hidden}.viewtoggle button{border:none;background:#fff;padding:4px 12px;font-size:12px;cursor:pointer;color:#4a4a55;border-left:1px solid #ecebf2}.viewtoggle button:first-child{border-left:none}.viewtoggle button.on{background:var(--accent);color:#fff}.panes{display:flex;flex:1 1 auto;min-height:0}.editor-pane,.preview-pane{flex:1;overflow:auto;min-width:0}.editor,.editor .cm-editor{height:100%}.mode-edit .preview-pane,.mode-preview .editor-pane{display:none}.mode-split .editor-pane{border-right:1px solid #eceaf3}.markdown-body{max-width:760px;margin:0 auto;padding:24px 32px;line-height:1.6;word-wrap:break-word}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{line-height:1.25;margin:1.4em 0 .5em}.markdown-body h1{font-size:1.8em}.markdown-body h2{font-size:1.45em;border-bottom:1px solid #eee;padding-bottom:.2em}.markdown-body h3{font-size:1.2em}.markdown-body img{max-width:100%;border-radius:6px}.markdown-body pre{background:#f5f5f5;padding:12px;overflow:auto;border-radius:6px}.markdown-body code{background:#f5f5f5;padding:2px 5px;border-radius:4px;font-size:.92em}.markdown-body pre code{background:none;padding:0}.markdown-body a{color:var(--accent)}.markdown-body mark{background:#fff3a3;padding:0 2px;border-radius:3px}.markdown-body blockquote{margin:1em 0;padding:.2em 1em;border-left:4px solid #d9dee5;color:#555}.markdown-body hr{border:none;border-top:1px solid #e3e6ea;margin:2em 0}.markdown-body table{border-collapse:collapse;margin:1em 0;display:block;overflow-x:auto}.markdown-body th,.markdown-body td{border:1px solid #e3e6ea;padding:6px 12px;text-align:left}.markdown-body th{background:#f4f5f7}.markdown-body tr:nth-child(2n) td{background:#fafbfc}.markdown-body ul,.markdown-body ol{padding-left:1.5em}.markdown-body li{margin:.15em 0}.markdown-body del{color:#999}.markdown-body kbd{background:#eee;border:1px solid #ccc;border-radius:4px;padding:0 5px;font-size:.85em}.markdown-body .contains-task-list{list-style:none;padding-left:.3em}.markdown-body .task-list-item{margin:.25em 0}.markdown-body .task-list-item-checkbox{margin-right:8px;transform:scale(1.15);vertical-align:-1px;cursor:pointer}.markdown-body .task-list-item label{cursor:pointer}.markdown-body .ycp-callout{border:1px solid #e6e6e6;border-left:4px solid var(--cc, #448aff);border-radius:8px;padding:10px 14px;margin:1em 0;background:color-mix(in srgb,var(--cc, #448aff) 7%,#fff)}.markdown-body .ycp-callout-title{font-weight:700;color:var(--cc, #448aff);display:flex;align-items:center;gap:8px}.markdown-body .ycp-callout-ic{font-size:1.05em}.markdown-body .ycp-callout-body{margin-top:4px}.markdown-body .ycp-callout-body>p:first-child{margin-top:0}.markdown-body .ycp-callout-body>p:last-child{margin-bottom:0}@media (max-width: 640px){.bar{flex-wrap:wrap;gap:8px;padding:7px 10px}.brand,.spacer{display:none}.modes{order:1}.modes button{padding:8px 12px;font-size:14px}.bar .share{order:2;margin-left:auto;padding:8px 14px;font-size:14px}.status{order:3;min-width:0}.peers{order:4;flex-basis:100%;max-width:100%;font-size:12px;white-space:normal}.name-input{order:5;flex:1 1 100%;width:100%;font-size:16px;padding:9px 11px}.toolbar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding:6px 10px}.toolbar::-webkit-scrollbar{display:none}.tbtn{flex:0 0 auto;min-width:38px;height:36px;font-size:15px}.tsep{flex:0 0 1px}.toolbar .spacer{display:block;flex:0 0 8px}.viewtoggle{flex:0 0 auto}.viewtoggle button{padding:7px 14px;font-size:13px}.mode-split .panes{flex-direction:column}.mode-split .editor-pane{border-right:none;border-bottom:1px solid #eceaf3}.mode-split .editor-pane,.mode-split .preview-pane{flex:1 1 50%}.markdown-body{padding:16px 16px 40vh}}.landing{max-width:560px;margin:12vh auto;padding:0 20px;text-align:center}.landing h1{font-size:1.7em}.landing p{color:#555;line-height:1.6}.landing button{font:inherit;padding:11px 20px;border:none;border-radius:9px;background:var(--accent);color:#fff;cursor:pointer;font-size:15px}.landing button:hover{filter:brightness(1.05)}.landing button:disabled{opacity:.6}