*{box-sizing:border-box;margin:0}html,body,#root{color:#27272a;background:#fff;height:100%;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}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);transform-origin:bottom;color:#fafafa;white-space:nowrap;opacity:0;pointer-events:none;z-index:30;background:#18181b;border-radius:6px;padding:5px 9px;font-size:11.5px;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{background:#fff;border:1px solid #e4e4e7;border-radius:12px;align-items:center;gap:4px;padding:6px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0002}.tool-button{color:#3f3f46;cursor:pointer;background:0 0;border:none;border-radius:9px;place-content:center;width:38px;height:38px;display:grid}.tool-button:hover:not(:disabled){background:#f4f4f5}.tool-button.active{color:#fff;background:#2563eb}.tool-button:disabled{color:#d4d4d8;cursor:default}.toolbar-divider{background:#e4e4e7;width:1px;height:20px;margin:0 4px}.shapes-menu{background:#fff;border:1px solid #e4e4e7;border-radius:12px;gap:4px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0002}.share-panel{align-items:center;gap:6px;display:flex;position:absolute;top:12px;right:12px}.share-icon-button{color:#3f3f46;cursor:pointer;background:#fff;border:1px solid #e4e4e7;border-radius:10px;place-content:center;width:34px;height:34px;display:grid;box-shadow:0 4px 16px #00000012}.share-icon-button:hover{background:#f4f4f5}.share-icon-button.live{color:#fff;background:#2563eb;border-color:#2563eb}.share-button{color:#3f3f46;cursor:pointer;background:#fff;border:1px solid #e4e4e7;border-radius:9px;padding:6px 12px;font-size:12px;box-shadow:0 4px 16px #00000012}.share-button:hover{background:#f4f4f5}.share-primary{color:#fff;background:#2563eb;border-color:#2563eb}.share-primary:hover{background:#1d4ed8}.share-popover{color:#52525b;background:#fff;border:1px solid #e4e4e7;border-radius:10px;flex-wrap:wrap;gap:6px;width:240px;padding:12px;font-size:12px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 28px #0002}.share-popover p{flex-basis:100%;margin:0 0 2px}.context-menu{z-index:40;background:#fff;border:1px solid #e2e4e9;border-radius:10px;min-width:200px;padding:6px;position:fixed;box-shadow:0 8px 28px #0f12182e}.context-menu button{color:#1f2329;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:6px 10px;font-size:13px;display:flex}.context-menu button:hover{background:#eef1f5}.context-menu button kbd{color:#8a919c;font-family:inherit;font-size:11px}.context-menu hr{border:0;border-top:1px solid #ecedf1;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:#fff;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;place-content:center;font-size:12px;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;white-space:nowrap;border-radius:6px;padding:1px 6px;font-size:11px;position:absolute;top:16px;left:10px}.zoom-pill{background:#fff;border:1px solid #e4e4e7;border-radius:10px;align-items:center;gap:2px;padding:4px;font-size:12px;transition:opacity .24s;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 4px 16px #00000018}.zoom-pill.faded{opacity:0}.zoom-pill.faded:hover{opacity:1}.zoom-pill button{color:#3f3f46;cursor:pointer;background:0 0;border:none;border-radius:7px;place-content:center;min-width:26px;height:26px;font-size:13px;display:grid}.zoom-pill button:hover{background:#f4f4f5}.zoom-pill .zoom-value{font-variant-numeric:tabular-nums;color:#52525b;min-width:48px}.brush-options{background:#fff;border:1px solid #e4e4e7;border-radius:10px;align-items:center;gap:10px;padding:8px 12px;font-size:12px;display:flex;position:absolute;bottom:72px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000018}.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-offset:2px;outline:2px solid #2563eb}.fill-picker{border-left:1px solid #e4e4e7;border-right:1px solid #e4e4e7;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:#f4f4f5}.fill-swatch.active{background:#eef2ff}.fill-preview{border:1.5px solid;border-radius:4px;width:15px;height:15px;display:block}.fill-preview.none{background:linear-gradient(to top right,#0000 44%,#d4d4d8 46% 54%,#0000 56%)!important}.brush-size-label{color:#71717a;align-items:center;gap:3px;display:flex}.brush-size-label kbd{border:1px solid #e4e4e7;border-radius:4px;padding:0 4px;font-size:10px}.layer-panel{background:#fff;border:1px solid #e4e4e7;border-radius:10px;width:240px;max-height:calc(100% - 24px);font-size:13px;position:absolute;top:12px;left:12px;overflow-y:auto;box-shadow:0 4px 16px #00000014}.layer-panel.collapsed{width:auto}.layer-drawer-toggle{color:#52525b;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:6px;width:100%;padding:8px 10px;font-size:12px;font-weight:600;display:flex}.layer-drawer-toggle:hover{background:#f4f4f5}.layer-drawer-chevron{color:#a1a1aa;font-size:14px}.layer-drawer-count{color:#71717a;background:#f4f4f5;border-radius:8px;margin-left:auto;padding:0 6px;font-weight:500}.layer-panel.empty p{color:#a1a1aa;margin:14px}.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:#f4f4f5}.layer-row.selected{background:#dbeafe}.layer-kind{color:#a1a1aa}.layer-name{flex:none}.layer-row input[type=range]{flex:1;min-width:40px}.layer-visibility{color:#a1a1aa;cursor:pointer;background:0 0;border:none;font-size:11px}.notices{flex-direction:column;gap:8px;display:flex;position:absolute;bottom:76px;right:16px}.notice{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex;box-shadow:0 4px 16px #00000014}.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:#fff;border:1px solid #e4e4e7;border-radius:12px;width:min(440px,90vw);overflow:hidden;box-shadow:0 16px 48px #0003}.palette input{color:#18181b;width:100%;font:inherit;background:0 0;border:none;border-bottom:1px solid #e4e4e7;outline:none;padding:14px 16px;font-size:15px}.palette ul{max-height:40vh;margin:0;padding:6px;list-style:none;overflow-y:auto}.palette li{cursor:pointer;border-radius:7px;padding:9px 12px;font-size:14px}.palette li.active{background:#dbeafe}.palette-empty{color:#a1a1aa;cursor:default}.cutout-panel{background:#fff;border:1px solid #e4e4e7;border-radius:10px;flex-direction:column;gap:10px;width:260px;padding:14px;font-size:13px;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 4px 16px #00000018}.cutout-hint{color:#6b7280;margin:0 0 8px;font-size:12px}.cutout-panel h2{font-size:13px;font-weight:600}.cutout-panel label{color:#71717a;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;color:#27272a;background:#f4f4f5;border:none;border-radius:6px;flex:1;padding:7px 0}.cutout-actions button:first-child{color:#fff;background:#2563eb}.status-pill{background:#fff;border:1px solid #e4e4e7;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000014}.status-spinner{border:2px solid #e4e4e7;border-top-color:#2563eb;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{caret-color:#2563eb;background:0 0;border:none;outline:none;width:24ch;min-width:30px;padding:0}.text-format-bar{background:#fff;border:1px solid #e4e4e7;border-radius:9px;gap:2px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 10px);left:0;box-shadow:0 6px 20px #00000026}.text-format-bar button{color:#27272a;width:30px;height:30px;font:inherit;cursor:pointer;background:0 0;border:none;border-radius:6px;font-size:13px;font-weight:700}.text-format-bar button:hover{background:#f4f4f5}.text-format-bar button.active{color:#fff;background:#2563eb}.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}.context-bar{visibility:hidden;z-index:5;background:#fff;border:1px solid #e4e4e7;border-radius:9px;gap:2px;padding:4px;display:flex;position:absolute;top:0;left:0;box-shadow:0 6px 20px #00000026}.context-bar button{color:#27272a;font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:6px 10px;font-size:12.5px;font-weight:500}.context-bar button:hover{background:#f4f4f5}.context-bar button.danger:hover{color:#b91c1c;background:#fee2e2}.perf-hud{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;bottom:12px;right:12px}.perf-hud b{color:#8fd3a6;font-size:13px}.brush-options .dash-toggle{color:#52525b;cursor:pointer;background:0 0;border:none;border-radius:6px;width:26px;height:26px;font-size:14px}.brush-options .dash-toggle:hover{background:#f1f3f5}.brush-options .dash-toggle.active{color:#255199;background:#eef2ff}@media (width<=700px){.bottom-toolbar{scrollbar-width:none;gap:2px;max-width:calc(100vw - 16px);padding:4px;overflow-x:auto}.tool-button{width:34px;height:34px}.layer-panel{width:190px}.brush-options{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 16px);bottom:64px}.zoom-pill{bottom:64px}}@media (hover:none){[data-tip]:after{display:none}}