:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--fg:#1f2328;--muted:#656d76;--border:#d0d7de;--accent:#0969da;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0}.page{max-width:40rem;margin:12vh auto 0;padding:0 16px}.page h1{margin:0 0 .75rem;font-size:2rem}.lead{color:var(--muted);margin:0 0 1.5rem;line-height:1.5}button{font:inherit;border:1px solid var(--border);color:var(--fg);cursor:pointer;background:#f6f8fa;border-radius:6px;padding:.45rem .9rem}button:disabled{opacity:.6;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.status{min-height:1.4em;color:var(--muted);margin:.75rem 0 0}.status.error{color:#cf222e}.loading{color:var(--muted)}.editor-page{flex-direction:column;height:100vh;display:flex}.editor-header{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.header-start{flex:auto;align-items:center;gap:.75rem;min-width:0;display:flex}.header-actions{align-items:center;gap:.5rem;display:flex}.brand{color:var(--fg);white-space:nowrap;font-weight:700;text-decoration:none}.connection{color:var(--muted);align-items:center;gap:.4rem;font-size:.875rem;display:flex}.status-dot{background:#8c959f;border-radius:50%;width:.6rem;height:.6rem}.connection[data-state=synced] .status-dot{background:#1a7f37}.connection[data-state=reconnecting] .status-dot{background:#bf8700}.connection[data-state=limited] .status-dot,.connection[data-state=code-invalid] .status-dot,.connection[data-state=rejected] .status-dot{background:#cf222e}.workspace{--split:45%;flex:1;min-width:0;min-height:0;display:grid}.workspace[data-layout=side]{grid-template-columns:var(--split) 6px minmax(0, 1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"code divider preview"}.workspace[data-layout=stacked]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0, 1fr) 6px var(--split);grid-template-areas:"preview""divider""code"}.code-pane{grid-area:code;min-width:0;min-height:0;overflow:auto}.code-pane .cm-editor{height:100%;font-size:13px}.code-pane .cm-editor.cm-focused{outline:none}.divider{background:var(--border);cursor:col-resize;grid-area:divider}.workspace[data-layout=stacked] .divider{cursor:row-resize}.divider:focus-visible{outline:2px solid var(--accent)}.preview-pane{flex-direction:column;grid-area:preview;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.zoom-viewport{cursor:grab;touch-action:none;outline:none;flex:1;position:relative;overflow:hidden}.zoom-viewport:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}.zoom-viewport.dragging{cursor:grabbing}.zoom-controls{border:1px solid var(--border);z-index:2;background:#ffffffeb;border-radius:8px;gap:.25rem;padding:.25rem;display:flex;position:absolute;bottom:.75rem;right:.75rem;box-shadow:0 2px 8px #00000014}.zoom-controls button{padding:.2rem .55rem;font-size:.85rem}.zoom-level{font-variant-numeric:tabular-nums;min-width:4.2rem}.layout-field select{font:inherit;border:1px solid var(--border);border-radius:6px;padding:.15rem .3rem}.participants{color:var(--muted);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.avatars{display:flex}.avatar{border:2px solid var(--bg);background:var(--avatar-color,#6e7781);color:#fff;border-radius:50%;place-items:center;width:1.9rem;height:1.9rem;margin-left:-.35rem;padding:0;font-size:.72rem;font-weight:700;display:inline-grid}.avatar:first-child{margin-left:0}.avatar.self{cursor:pointer;box-shadow:0 0 0 2px var(--avatar-color)}.overlay{z-index:10;background:#1f232873;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{background:var(--bg);border-radius:10px;width:min(26rem,100%);padding:1.5rem;box-shadow:0 12px 32px #00000040}.dialog h2{margin:0 0 .5rem}.dialog input{width:100%;font:inherit;border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem}.field-error{color:#cf222e;min-height:1.2em;margin:.4rem 0;font-size:.875rem}.dialog-actions{justify-content:flex-end;gap:.5rem;display:flex}.preview-canvas{transform-origin:0 0;-webkit-user-select:none;user-select:none;transition:opacity .15s;position:absolute;top:0;left:0}.preview-canvas svg{max-width:none;display:block}.zoom-viewport:not(.dragging) .preview-node-clickable{cursor:pointer}.preview-canvas.stale{opacity:.4;filter:grayscale(.6)}.preview-empty{color:var(--muted);text-align:center;margin:auto;padding:1rem}.preview-error{z-index:1;color:#82071e;background:#ffebe9;border-bottom:1px solid #ff818266;flex:none;padding:.6rem 1rem;font-size:.875rem}.preview-error pre{white-space:pre-wrap;margin:.3rem 0 0;font-size:.8rem}.properties{flex-wrap:wrap;align-items:center;gap:.75rem;min-width:0;font-size:.875rem;display:flex}.doc-name{font:inherit;min-width:12rem;color:var(--fg);background:0 0;border:1px solid #0000;border-radius:6px;padding:.25rem .4rem;font-size:1rem;font-weight:600}.doc-name:hover,.doc-name:focus{border-color:var(--border);background:#fff}.field{color:var(--muted);align-items:center;gap:.3rem;display:inline-flex}.field select{font:inherit;border:1px solid var(--border);border-radius:6px;padding:.15rem .3rem}.retention-hint{color:var(--muted);font-size:.8rem}.toasts{z-index:20;gap:.5rem;display:grid;position:fixed;bottom:16px;right:16px}.toast{color:#fff;background:#24292f;border-radius:8px;padding:.55rem .8rem;font-size:.875rem;box-shadow:0 6px 18px #0003}button.link{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.team-code{margin-top:1.5rem;font-size:.9rem}.team-code-form{gap:.5rem;display:flex}.team-code-input{font:inherit;border:1px solid var(--border);border-radius:6px;flex:1;min-width:0;padding:.4rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.team-code-active{color:#1a7f37;margin:0}.limit-banner{background:#fff8c5;border-bottom:1px solid #d4a72c66;padding:.75rem}.limit-banner p{margin:0 0 .25rem}.limit-banner .team-code{max-width:32rem;margin-top:.25rem}