:root{--bg:#fafafa;--panel:#fff;--border:#e6e6e6;--text:#1e1e1e;--muted:#6b6b6b;--hover:#f1f3f5;--active:#e7f5ff;--active-border:#4dabf7;--shadow:0 4px 16px #00000014, 0 1px 3px #0000000a;--radius:10px}*{box-sizing:border-box}html,body,#root{background:var(--bg);width:100%;height:100%;color:var(--text);-webkit-font-smoothing:antialiased;touch-action:none;overscroll-behavior:none;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Sans,Yu Gothic UI,sans-serif;font-size:13px;overflow:hidden}.stage{position:fixed;inset:0;overflow:hidden}.board{cursor:crosshair;background-color:var(--bg);background-image:radial-gradient(circle,#d0d0d0 1px,#0000 1px);background-size:24px 24px;width:100%;height:100%;display:block;position:absolute;inset:0}.board.tool-eraser{cursor:cell}.board.tool-move{cursor:grab}.board.tool-move:active{cursor:grabbing}.board.drag-over{outline:3px dashed var(--active-border);outline-offset:-8px}.cursors{pointer-events:none;z-index:5;position:absolute;inset:0}.cursor{flex-direction:column;align-items:flex-start;gap:2px;display:flex;position:absolute;transform:translate(-2px,-2px)}.cursor-pointer{clip-path:polygon(0 0,100% 50%,45% 55%,60% 100%);filter:drop-shadow(0 1px 1px #0003);background:currentColor;width:14px;height:14px}.cursor-name{color:#fff;white-space:nowrap;background:currentColor;border-radius:6px;margin-left:12px;padding:3px 6px;font-size:11px;font-weight:600;line-height:1}.toolbar{top:max(16px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);z-index:10;-webkit-user-select:none;user-select:none;border-radius:12px;min-width:220px;transition:min-width .2s;position:fixed}.toolbar.minimized{min-width:0}.toolbar.minimized .toolbar-body,.toolbar.minimized .divider{display:none}.toolbar-header{border-bottom:1px solid var(--border);align-items:center;gap:4px;padding:6px;display:flex}.toolbar.minimized .toolbar-header{border-bottom:none}.tools{gap:2px;display:flex}.divider{background:var(--border);width:1px;height:20px;margin:0 4px}.tool-btn,.icon-btn{cursor:pointer;width:32px;height:32px;color:var(--text);background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:background .12s,border-color .12s;display:inline-flex}.tool-btn:hover,.icon-btn:hover{background:var(--hover)}.tool-btn.active{background:var(--active);border-color:var(--active-border);color:#1864ab}.icon-btn{color:var(--muted);margin-left:auto}.toolbar-body{flex-direction:column;gap:12px;padding:10px 12px 12px;display:flex}.row{flex-direction:column;gap:6px;display:flex}.label{color:var(--muted);letter-spacing:.02em;font-size:11px}.palette{flex-wrap:wrap;gap:6px;display:flex}.swatch{background:var(--c);cursor:pointer;border:1px solid #0000001a;border-radius:6px;width:22px;height:22px;padding:0;transition:transform .1s;position:relative}.swatch:hover{transform:scale(1.08)}.swatch.active{outline:2px solid var(--active-border);outline-offset:1px}.swatch-picker{color:var(--muted);background:#fff;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.swatch-picker input[type=color]{opacity:0;cursor:pointer;border:none;padding:0;position:absolute;inset:0}.width-options{gap:4px;display:flex}.width-btn{border:1px solid var(--border);background:var(--panel);cursor:pointer;border-radius:6px;flex:1;justify-content:center;align-items:center;height:28px;padding:0 6px;transition:all .12s;display:flex}.width-btn span{background:var(--text);border-radius:999px;width:100%;display:block}.width-btn:hover{background:var(--hover)}.width-btn.active{border-color:var(--active-border);background:var(--active)}.text-btn{border:1px solid var(--border);cursor:pointer;color:var(--text);background:0 0;border-radius:6px;padding:8px 10px;font-family:inherit;font-size:12px;transition:background .12s}.text-btn:hover{background:var(--hover)}.peers{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);z-index:10;border-radius:12px;flex-direction:column;gap:4px;max-width:200px;padding:8px 12px;font-size:12px;display:flex;position:fixed}.peer-row{align-items:center;gap:6px;display:flex}.peer-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.connection-badge{bottom:max(16px, env(safe-area-inset-bottom));right:max(16px, env(safe-area-inset-right));background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--muted);z-index:10;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;display:flex;position:fixed}.connection-dot{border-radius:50%;width:8px;height:8px}.connection-dot.connected{background:#2f9e44}.connection-dot.disconnected{background:#e03131}.name-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;background:#fafafad9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.name-card{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;flex-direction:column;gap:12px;width:min(360px,90vw);padding:24px;display:flex}.name-card h1{margin:0;font-size:15px;font-weight:600}.name-card p{color:var(--muted);margin:0;font-size:12px;line-height:1.5}.name-card input{font:inherit;border:1px solid var(--border);background:var(--panel);border-radius:6px;outline:none;padding:8px 10px}.name-card input:focus{border-color:var(--active-border)}.name-card button{background:var(--text);color:#fff;cursor:pointer;border:0;border-radius:6px;padding:9px 12px;font-family:inherit;font-size:12px;font-weight:600}.name-card button:disabled{opacity:.4;cursor:not-allowed}