:root{--surface:#fff;--border:#e4e4e7;--hover:#f4f4f5;--text:#27272a;--text-strong:#18181b;--text-secondary:#3f3f46;--text-tertiary:#52525b;--text-muted:#71717a;--text-faint:#a1a1aa;--text-disabled:#d4d4d8;--accent:#2563eb;--accent-strong:#1d4ed8;--accent-tint:#dbeafe;--danger:#b91c1c;--danger-surface:#fef2f2;--danger-border:#fecaca;--shadow-pill:0 4px 16px #00000014;--shadow-bar:0 6px 20px #00000026;--shadow-menu:0 8px 28px #0002;--shadow-modal:0 16px 48px #0003;--font-hint:11px;--font-caption:12px;--font-menu:13px;--font-input:14px;--font-title:15px;--chrome-inset:12px;--bottom-row-2:72px}*{box-sizing:border-box;margin:0}html,body,#root{background:var(--surface);height:100%;color:var(--text);font-family:system-ui,sans-serif;overflow:hidden}.capability-screen{text-align:center;place-content:center;gap:.75rem;height:100%;display:grid}.editor-shell{height:100%;position:relative}.editor-canvas{touch-action:none;width:100%;height:100%;display:block}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);transform-origin:bottom;background:var(--text-strong);color:#fafafa;font-size:var(--font-caption);white-space:nowrap;opacity:0;pointer-events:none;z-index:30;border-radius:6px;padding:5px 9px;font-weight:500;transition:opacity 90ms .25s,transform 90ms .25s;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%)scale(.97)}[data-tip]:hover:after{opacity:1;transform:translate(-50%)scale(1)}.context-bar [data-tip]:after,.share-panel [data-tip]:after{transform-origin:top;top:calc(100% + 9px);bottom:auto}.bottom-toolbar{bottom:var(--chrome-inset);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-menu);border-radius:12px;align-items:center;gap:4px;padding:6px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.tool-button{width:38px;height:38px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:9px;place-content:center;display:grid}.tool-button:hover:not(:disabled){background:var(--hover)}.tool-button.active{background:var(--accent);color:#fff}.tool-button:disabled{color:var(--text-disabled);cursor:default}.toolbar-divider{background:var(--border);width:1px;height:20px;margin:0 4px}.shapes-menu{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-menu);border-radius:12px;gap:4px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.share-panel{top:var(--chrome-inset);right:var(--chrome-inset);align-items:center;gap:6px;display:flex;position:absolute}.share-icon-button{border:1px solid var(--border);background:var(--surface);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-pill);border-radius:10px;place-content:center;display:grid}.share-icon-button:hover{background:var(--hover)}.share-icon-button.live{background:var(--accent);border-color:var(--accent);color:#fff}.share-button{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:var(--font-caption);cursor:pointer;box-shadow:var(--shadow-pill);border-radius:9px;padding:6px 12px}.share-button:hover{background:var(--hover)}.share-primary{background:var(--accent);border-color:var(--accent);color:#fff}.share-primary:hover{background:var(--accent-strong)}.share-popover{background:var(--surface);border:1px solid var(--border);width:240px;box-shadow:var(--shadow-menu);font-size:var(--font-caption);color:var(--text-tertiary);border-radius:10px;flex-wrap:wrap;gap:6px;padding:12px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.share-popover p{flex-basis:100%;margin:0 0 2px}.context-menu{z-index:40;background:var(--surface);border:1px solid var(--border);min-width:200px;box-shadow:var(--shadow-menu);border-radius:10px;padding:6px;position:fixed}.context-menu button{width:100%;font-size:var(--font-menu);color:var(--text);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:24px;padding:6px 10px;display:flex}.context-menu button:hover{background:var(--hover)}.context-menu button kbd{font-family:inherit;font-size:var(--font-hint);color:var(--text-muted)}.context-menu .submenu{position:relative}.context-menu .submenu-list{background:var(--surface);border:1px solid var(--border);min-width:130px;box-shadow:var(--shadow-menu);border-radius:10px;padding:6px;display:none;position:absolute;top:-6px;left:calc(100% - 4px)}.context-menu .submenu:hover .submenu-list,.context-menu .submenu:focus-within .submenu-list{display:block}.context-menu hr{border:0;border-top:1px solid var(--border);margin:6px 4px}.subject-markers{pointer-events:none;z-index:5;position:absolute;inset:0;overflow:hidden}.subject-marker{color:#fff;text-align:center;opacity:0;background:#1d7a44;border:2px solid #fff;border-radius:50%;width:22px;height:22px;font-size:15px;font-weight:700;line-height:18px;position:absolute;top:-11px;left:-11px;box-shadow:0 1px 4px #00000059}.subject-marker.exclude{background:#b3261e}.presence-room{align-items:center;display:flex}.presence-avatar{background:var(--surface);border:2px solid;border-radius:50%;place-content:center;width:28px;height:28px;margin-right:-6px;display:grid;overflow:hidden}.presence-avatar img,.presence-initial{object-fit:cover;border-radius:50%;width:100%;height:100%}.presence-initial{color:#fff;font-size:var(--font-caption);place-content:center;font-weight:600;display:grid}.presence-room .presence-avatar:last-child{margin-right:8px}.presence-cursors{pointer-events:none;position:absolute;inset:0;overflow:hidden}.presence-cursor{transition:opacity .12s;position:absolute;top:0;left:0}.presence-cursor-name{color:#fff;font-size:var(--font-hint);white-space:nowrap;border-radius:6px;padding:1px 6px;position:absolute;top:16px;left:10px}.zoom-pill{bottom:var(--chrome-inset);left:var(--chrome-inset);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-pill);font-size:var(--font-caption);border-radius:10px;align-items:center;gap:2px;padding:4px;transition:opacity .24s;display:flex;position:absolute}.zoom-pill.faded{opacity:0}.zoom-pill.faded:hover,.zoom-pill.faded:focus-within{opacity:1}.zoom-pill button{min-width:26px;height:26px;color:var(--text-secondary);cursor:pointer;font-size:var(--font-menu);background:0 0;border:none;border-radius:7px;place-content:center;display:grid}.zoom-pill button:hover{background:var(--hover)}.zoom-pill .zoom-value{font-variant-numeric:tabular-nums;min-width:48px;color:var(--text-tertiary)}.brush-options{bottom:var(--bottom-row-2);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-pill);font-size:var(--font-caption);border-radius:10px;align-items:center;gap:10px;padding:8px 12px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.stroke-palette{grid-template-columns:repeat(4,18px);gap:5px;display:grid}.swatch{cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:inset 0 0 0 1px #00000014}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.fill-picker{border-left:1px solid var(--border);border-right:1px solid var(--border);gap:4px;padding:0 6px;display:flex}.fill-swatch{cursor:pointer;background:0 0;border:none;border-radius:7px;place-content:center;width:26px;height:26px;display:grid}.fill-swatch:hover{background:var(--hover)}.fill-swatch.active{background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent)}.fill-preview{border:1.5px solid;border-radius:4px;width:15px;height:15px;display:block}.fill-preview.none{background:linear-gradient(to top right, transparent 44%, var(--text-disabled) 46%, var(--text-disabled) 54%, transparent 56%)!important}.brush-size-label{color:var(--text-muted);align-items:center;gap:3px;display:flex}.brush-size-label kbd{border:1px solid var(--border);font-family:inherit;font-size:var(--font-hint);border-radius:4px;padding:0 4px}.layer-panel{top:var(--chrome-inset);left:var(--chrome-inset);background:var(--surface);border:1px solid var(--border);width:240px;max-height:calc(100% - 24px);box-shadow:var(--shadow-pill);font-size:var(--font-menu);border-radius:10px;position:absolute;overflow-y:auto}.layer-panel.collapsed{width:auto}.layer-drawer-toggle{width:100%;color:var(--text-tertiary);font-size:var(--font-caption);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:6px;padding:8px 10px;font-weight:600;display:flex}.layer-drawer-toggle:hover{background:var(--hover)}.layer-drawer-chevron{color:var(--text-faint);font-size:14px}.layer-drawer-count{background:var(--hover);color:var(--text-muted);border-radius:8px;margin-left:auto;padding:0 6px;font-weight:500}.layer-panel ul{margin:0;padding:6px;list-style:none}.layer-row{cursor:pointer;border-radius:6px;align-items:center;gap:8px;padding:7px 8px;display:flex}.layer-row:hover{background:var(--hover)}.layer-row.selected{background:var(--accent-tint);box-shadow:inset 2px 0 0 var(--accent)}.layer-kind{color:var(--text-muted)}.layer-name{flex:none}.layer-rename{min-width:60px;font:inherit;border:1px solid #93c5fd;border-radius:4px;flex:1;padding:1px 4px}.layer-row input[type=range]{flex:1;min-width:40px}.layer-visibility{color:var(--text-muted);cursor:pointer;font-size:var(--font-hint);background:0 0;border:none}.notices{bottom:var(--bottom-row-2);right:var(--chrome-inset);flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute}.notice{max-width:min(420px, calc(100vw - 2 * var(--chrome-inset)));overflow-wrap:anywhere;background:var(--danger-surface);border:1px solid var(--danger-border);color:var(--danger);font-size:var(--font-menu);box-shadow:var(--shadow-pill);border-radius:8px;align-items:center;gap:12px;padding:10px 14px;display:flex}.notice button{color:inherit;cursor:pointer;background:0 0;border:none;font-size:15px}.palette-backdrop{z-index:40;background:#0000002e;justify-content:center;align-items:flex-start;padding-top:14vh;display:flex;position:absolute;inset:0}.palette{background:var(--surface);border:1px solid var(--border);width:min(440px,90vw);box-shadow:var(--shadow-modal);border-radius:12px;overflow:hidden}.palette input{width:100%;color:var(--text-strong);font:inherit;font-size:var(--font-title);border:none;border-bottom:1px solid var(--border);background:0 0;outline:none;padding:14px 16px}.palette ul{max-height:40vh;margin:0;padding:6px;list-style:none;overflow-y:auto}.palette li{font-size:var(--font-input);cursor:pointer;border-radius:7px;padding:9px 12px}.palette li.active{background:var(--accent-tint);box-shadow:inset 2px 0 0 var(--accent)}.palette-empty{color:var(--text-muted);cursor:default}.feedback-dialog{background:var(--surface);border:1px solid var(--border);width:min(440px,90vw);box-shadow:var(--shadow-modal);font-size:var(--font-menu);color:var(--text-tertiary);border-radius:12px;flex-direction:column;gap:10px;padding:16px;display:flex}.feedback-dialog h2{font-size:var(--font-title);color:var(--text-strong);margin:0}.feedback-dialog p{margin:0}.feedback-dialog textarea{resize:vertical;font:inherit;font-size:var(--font-input);color:var(--text-strong);border:1px solid var(--border);border-radius:8px;outline:none;padding:10px 12px}.feedback-dialog textarea:focus{border-color:var(--accent)}.feedback-actions{justify-content:flex-end;gap:8px;display:flex}.feedback-actions button{border:1px solid var(--border);background:var(--surface);color:var(--text-strong);font:inherit;font-size:var(--font-menu);cursor:pointer;border-radius:8px;padding:7px 14px}.feedback-actions .feedback-primary{border-color:var(--accent);background:var(--accent);color:#fff}.feedback-actions .feedback-primary:disabled{opacity:.5;cursor:default}.cutout-panel{visibility:hidden;background:var(--surface);border:1px solid var(--border);width:260px;box-shadow:var(--shadow-pill);font-size:var(--font-menu);border-radius:10px;flex-direction:column;gap:10px;padding:14px;display:flex;position:absolute;top:0;left:0}.cutout-hint{font-size:var(--font-caption);color:var(--text-muted);margin:0 0 8px}.cutout-panel h2{font-size:var(--font-menu);font-weight:600}.cutout-panel label{color:var(--text-muted);flex-direction:column;gap:4px;display:flex}.cutout-panel .cutout-keep{flex-direction:row;align-items:center;gap:8px}.cutout-actions{gap:8px;display:flex}.cutout-actions button{font:inherit;cursor:pointer;background:var(--hover);color:var(--text);border:none;border-radius:6px;flex:1;padding:7px 0}.cutout-actions button:first-child{background:var(--accent);color:#fff}.status-pill{top:var(--chrome-inset);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-pill);font-size:var(--font-menu);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.status-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:12px;height:12px;animation:.8s linear infinite status-spin}@keyframes status-spin{to{transform:rotate(360deg)}}.text-overlay{z-index:10;position:absolute;top:0;left:0}.text-overlay .text-entry{box-sizing:content-box;min-width:30px;caret-color:var(--accent);background:0 0;border:none;outline:none;padding:0}.text-format-bar{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-bar);border-radius:9px;gap:2px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 10px);left:0}.text-format-bar button{width:30px;height:30px;color:var(--text);font:inherit;font-weight:700;font-size:var(--font-menu);cursor:pointer;background:0 0;border:none;border-radius:6px}.text-format-bar button:hover{background:var(--hover)}.text-format-bar button.active{background:var(--accent);color:#fff}.text-format-bar input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:6px;align-self:center;width:26px;height:26px;padding:0}.latex-overlay{z-index:10;position:absolute;top:0;left:0}.latex-overlay .latex-preview{pointer-events:none;overflow:visible}.latex-card{background:var(--surface);border:1px solid var(--border);width:300px;box-shadow:var(--shadow-bar);border-radius:10px;margin-top:8px;overflow:hidden}.latex-input-row{align-items:center;gap:8px;padding:7px 8px 7px 10px;display:flex}.latex-glyph{color:var(--text-muted);flex-shrink:0;place-content:center;display:grid}.latex-card .latex-entry{min-width:0;color:var(--text);caret-color:var(--accent);background:0 0;border:none;outline:none;flex:1;padding:0;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}.latex-card .latex-entry::placeholder{color:var(--text-faint)}.latex-controls{border-left:1px solid var(--border);flex-shrink:0;align-items:center;gap:2px;padding-left:8px;display:flex}.latex-controls button{width:26px;height:26px;color:var(--text);font:inherit;font-weight:600;font-size:var(--font-caption);cursor:pointer;background:0 0;border:none;border-radius:6px}.latex-controls button:hover{background:var(--hover)}.latex-controls input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:6px;width:24px;height:24px;margin-left:2px;padding:0}.latex-controls input[type=color]::-webkit-color-swatch-wrapper{padding:4px}.latex-controls input[type=color]::-webkit-color-swatch{border:none;border-radius:50%;box-shadow:inset 0 0 0 1px #00000014}.latex-footer{border-top:1px solid var(--border);font-size:var(--font-hint);color:var(--text-muted);align-items:center;gap:10px;padding:5px 10px;display:flex}.latex-footer kbd{border:1px solid var(--border);font-family:inherit;font-size:var(--font-hint);border-radius:4px;padding:0 4px}.latex-footer-tex{color:var(--text-muted);margin-left:auto}.latex-footer.latex-error{color:var(--danger)}.context-bar{visibility:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-bar);z-index:5;border-radius:9px;gap:2px;padding:4px;display:flex;position:absolute;top:0;left:0}.context-bar button{width:30px;height:30px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;place-content:center;display:grid}.context-bar button:hover{background:var(--hover)}.perf-hud{right:var(--chrome-inset);bottom:var(--chrome-inset);z-index:30;color:#d7dce3;pointer-events:none;white-space:nowrap;background:#14181fd1;border-radius:8px;padding:8px 10px;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute}.perf-hud b{color:#8fd3a6;font-size:13px}.brush-options .dash-toggle{width:26px;height:26px;color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;font-size:14px}.brush-options .dash-toggle:hover{background:var(--hover)}.brush-options .dash-toggle.active{background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-strong)}@media (width<=900px){.bottom-toolbar{max-width:calc(100vw - 2 * var(--chrome-inset));flex-wrap:wrap;justify-content:center;gap:2px;padding:4px}.tool-button{width:34px;height:34px}.layer-panel{width:190px}.brush-options{bottom:calc(var(--chrome-inset) + 96px);max-width:calc(100vw - 2 * var(--chrome-inset));flex-wrap:wrap;justify-content:center}.zoom-pill{display:none}}@media (hover:none){[data-tip]:after{display:none}}@media (prefers-reduced-motion:reduce){[data-tip]:after,.presence-cursor,.zoom-pill{transition-duration:1ms}.status-spinner{animation:none}}