html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}:root{--ex-bg:#f1f3f5;--ex-canvas-grid:#00000017;--ex-ui-bg:#fff;--ex-border:#00000017;--ex-shadow:0 4px 20px #00000014, 0 0 1px #0000000f;--ex-shadow-sm:0 2px 8px #0000000f;--ex-accent:#6965db;--ex-accent-hover:#5b57c9;--ex-accent-soft:#6965db24;--ex-text:#1f2937;--ex-text-muted:#6b7280;--ex-hover:#0000000f;--ex-shape-hover-bg:#fff;--ex-radius-dock:16px;--ex-radius-btn:10px;--ex-radius-panel:14px;--ex-grid-line:#00000012}[data-theme=dark]{--ex-bg:#121212;--ex-canvas-grid:#ffffff0e;--ex-ui-bg:#1e1e1e;--ex-border:#ffffff1a;--ex-shadow:0 4px 28px #0000008c, 0 0 1px #ffffff0f;--ex-shadow-sm:0 2px 12px #0006;--ex-accent:#a5b4fc;--ex-accent-hover:#c4b5fd;--ex-accent-soft:#a5b4fc2e;--ex-text:#e5e7eb;--ex-text-muted:#9ca3af;--ex-hover:#ffffff14;--ex-shape-hover-bg:#ffffff0f;--ex-grid-line:#ffffff0b}*{box-sizing:border-box;margin:0;padding:0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}body{color:var(--ex-text);background:var(--ex-bg);-webkit-font-smoothing:antialiased;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,sans-serif;overflow:hidden}.app-container{width:100vw;height:100vh;position:relative;overflow:hidden}.app-chrome{z-index:50;pointer-events:none;justify-content:space-between;align-items:center;padding:12px 14px 12px 18px;display:flex;position:fixed;top:0;left:0;right:0}.app-chrome__actions{pointer-events:none;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;max-width:min(78vw,760px);display:flex}.app-chrome__actions>*{pointer-events:auto}.collab-status{position:relative}.collab-pill{color:#1f2937;border:1px solid var(--ex-border);cursor:pointer;height:38px;box-shadow:var(--ex-shadow-sm);background:#fff;border-radius:10px;align-items:center;gap:6px;padding:0 12px;font-size:12px;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:inline-flex}[data-theme=dark] .collab-pill{color:#e5e7eb;background:#1e1e1e}.collab-pill:hover{background:var(--ex-hover);color:var(--ex-text)}.collab-pill:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px}.collab-pill__label{white-space:nowrap}.collab-pill__room{color:var(--ex-text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-weight:500;overflow:hidden}.collab-dot{background:var(--ex-text-muted);border-radius:50%;flex-shrink:0;width:8px;height:8px}.collab-dot--connected{background:#22c55e;box-shadow:0 0 0 2px #22c55e2e}.collab-dot--connecting{background:#f59e0b;animation:1.1s ease-in-out infinite collab-pulse}.collab-dot--error{background:#ef4444}@keyframes collab-pulse{0%,to{opacity:1}50%{opacity:.35}}.collab-popover{background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-radius:var(--ex-radius-panel);min-width:260px;box-shadow:var(--ex-shadow);flex-direction:column;gap:10px;padding:14px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.collab-popover__title{color:var(--ex-text);font-size:13px;font-weight:600}.collab-popover__row{align-items:center;gap:6px;font-size:12px;display:flex}.collab-popover__muted{color:var(--ex-text-muted)}.collab-popover__label{color:var(--ex-text-muted);flex-direction:column;gap:4px;font-size:12px;display:flex}.collab-popover__label input{color:var(--ex-text);background:var(--ex-bg);border:1px solid var(--ex-border);border-radius:6px;outline:none;padding:7px 10px;font-size:13px;transition:border-color .12s}.collab-popover__label input:focus-visible{border-color:var(--ex-accent);outline:2px solid var(--ex-accent);outline-offset:1px}.collab-popover__hint{color:var(--ex-text-muted);font-size:11px;line-height:1.4}.collab-popover__error{color:#ef4444;background:#ef444414;border-radius:6px;padding:6px 8px;font-size:12px}.collab-btn{cursor:pointer;border:none;border-radius:6px;padding:8px 12px;font-size:13px;font-weight:500;transition:background .12s,color .12s}.collab-btn:disabled{opacity:.5;cursor:not-allowed}.collab-btn--primary{background:var(--ex-accent);color:#fff}.collab-btn--primary:hover:not(:disabled){background:var(--ex-accent-hover)}.collab-btn--secondary{background:var(--ex-hover);color:var(--ex-text)}.collab-btn--secondary:hover{background:var(--ex-border)}.export-popover{background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-radius:var(--ex-radius-panel);min-width:280px;box-shadow:var(--ex-shadow);z-index:20;flex-direction:column;gap:12px;padding:14px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.export-popover__title{color:var(--ex-text);font-size:13px;font-weight:600}.export-popover__tabs{background:var(--ex-bg);border:1px solid var(--ex-border);border-radius:6px;gap:0;padding:2px;display:flex}.export-popover__tab{color:var(--ex-text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;padding:5px 8px;font-size:12px;font-weight:500;transition:background .12s,color .12s}.export-popover__tab:hover:not(.export-popover__tab--active){color:var(--ex-text)}.export-popover__tab--active{background:var(--ex-ui-bg);color:var(--ex-text);box-shadow:0 1px 2px #00000014}.export-popover__panel{flex-direction:column;gap:10px;display:flex}.export-popover__group{flex-direction:column;gap:5px;display:flex}.export-popover__label{color:var(--ex-text-muted);flex-direction:column;gap:4px;font-size:12px;display:flex}.export-popover__label input[type=number],.export-popover__label input[type=text]{color:var(--ex-text);background:var(--ex-bg);border:1px solid var(--ex-border);border-radius:6px;outline:none;padding:7px 10px;font-size:13px;transition:border-color .12s}.export-popover__label input[type=number]:focus-visible,.export-popover__label input[type=text]:focus-visible{border-color:var(--ex-accent);outline:2px solid var(--ex-accent);outline-offset:1px}.export-popover__radio-row{background:var(--ex-bg);border:1px solid var(--ex-border);border-radius:6px;gap:4px;padding:3px;display:flex}.export-popover__radio{color:var(--ex-text-muted);cursor:pointer;border-radius:4px;flex:1;justify-content:center;align-items:center;gap:4px;padding:4px 6px;font-size:12px;transition:background .12s,color .12s;display:flex}.export-popover__radio:has(input:checked){background:var(--ex-ui-bg);color:var(--ex-text)}.export-popover__radio input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.export-popover__radio:focus-within{outline:2px solid var(--ex-accent);outline-offset:1px}.export-popover__checkbox{color:var(--ex-text);cursor:pointer;align-items:center;gap:8px;font-size:12px;display:flex}.export-popover__checkbox input{accent-color:var(--ex-accent);margin:0}.export-popover__error{color:#ef4444;background:#ef444414;border-radius:6px;padding:6px 8px;font-size:12px}.export-popover__actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.resize-overlay{pointer-events:none;z-index:5;position:absolute;inset:0}.resize-handle{border:1.5px solid var(--ex-accent);pointer-events:auto;background:#fff;border-radius:2px;transition:transform .1s;position:absolute;box-shadow:0 1px 3px #0000002e}.resize-handle:hover{transform:scale(1.15)}[data-theme=dark] .resize-handle{background:#1e1e1e}.resize-handle:focus-visible{outline:2px solid var(--ex-accent);outline-offset:1px}.resize-handle--rotate{z-index:1;border-radius:50%}.resize-stem{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.resize-stem line{stroke:var(--ex-accent);stroke-width:1.5px}.text-editor{z-index:10;border:1.5px dashed var(--ex-accent);color:inherit;resize:none;white-space:pre;pointer-events:auto;background:0 0;border-radius:2px;outline:none;margin:0;padding:0;font-weight:400;line-height:1;position:absolute;overflow:hidden}.text-editor:focus{border-style:solid}.arrow-label-editor{z-index:10;border:1.5px dashed var(--ex-accent);color:inherit;text-align:center;pointer-events:auto;background:#ffffffeb;border-radius:4px;outline:none;margin:0;padding:0;font-weight:400;line-height:1;position:absolute}.arrow-label-editor:focus{border-style:solid}.app-logo{letter-spacing:-.02em;color:var(--ex-text-muted);-webkit-user-select:none;user-select:none;font-size:15px;font-weight:600}.theme-toggle{pointer-events:auto;border:1px solid var(--ex-border);background:var(--ex-ui-bg);width:38px;height:38px;color:var(--ex-text-muted);box-shadow:var(--ex-shadow-sm);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:flex}.documents-toggle{white-space:nowrap;flex-shrink:0;width:auto;min-width:38px;padding:0 12px}.theme-toggle:hover{background:var(--ex-hover);color:var(--ex-text)}.theme-toggle:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px}.theme-toggle:disabled{cursor:not-allowed;opacity:.4;box-shadow:none}.theme-toggle:disabled:hover{background:var(--ex-ui-bg);color:var(--ex-text-muted)}.search-overlay{z-index:5;background:var(--ex-ui-bg);color:var(--ex-text);border-radius:var(--ex-radius-dock,10px);box-shadow:var(--ex-shadow);align-items:center;gap:8px;min-width:320px;max-width:520px;padding:6px 8px 6px 10px;display:inline-flex;position:fixed;top:56px;left:50%;transform:translate(-50%)}.search-overlay__icon{color:var(--ex-text-muted);flex-shrink:0}.search-overlay__input{min-width:0;color:var(--ex-text);background:0 0;border:0;outline:0;flex:auto;padding:4px 0;font-family:inherit;font-size:13px}.search-overlay__input::placeholder{color:var(--ex-text-muted)}.search-overlay__count{color:var(--ex-text-muted);text-align:right;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;min-width:48px;font-size:11px}.search-overlay__close{color:var(--ex-text-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;padding:4px;display:inline-flex}.search-overlay__close:hover{background:var(--ex-hover);color:var(--ex-text)}.search-overlay__close:focus-visible{outline:2px solid var(--ex-accent);outline-offset:1px}.current-style-panel{z-index:4;background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-radius:var(--ex-radius-dock,10px);box-shadow:var(--ex-shadow);align-items:center;gap:6px;max-width:calc(100vw - 320px);padding:6px 8px;display:inline-flex;position:fixed;top:60px;left:50%;transform:translate(-50%)}@media (width<=1100px){.app-chrome{padding:8px 10px}.app-chrome__actions{gap:6px;max-width:calc(100vw - 104px)}.collab-pill__room{display:none}.current-style-panel{scrollbar-width:thin;flex-wrap:wrap;place-content:flex-start;max-width:calc(100vw - 24px);max-height:102px;top:58px;overflow:auto}.side-panel,.library-panel{z-index:240;width:min(320px,100vw - 24px);max-height:calc(100vh - 82px);top:58px;left:auto;right:12px}.app-container[data-library=open][data-side-panel=open] .library-panel{right:12px}}.current-style-panel__label{color:var(--ex-text-muted);white-space:nowrap;padding:0 6px;font-size:12px}.current-style-panel__group{border-right:1px solid var(--ex-border);align-items:center;gap:4px;padding:0 6px;display:inline-flex}.current-style-panel__group:last-child{border-right:none}.current-style-panel .color-palette{grid-template-columns:repeat(5,1fr);gap:3px}.current-style-panel .color-swatch{width:16px;height:16px}.current-style-panel input[type=range]{width:72px;accent-color:var(--ex-accent)}.current-style-panel__group>span{color:var(--ex-text-muted);text-align:right;min-width:28px;font-size:11px}.app-container[data-side-panel=open] .current-style-panel,.app-container[data-library=open] .current-style-panel{scrollbar-width:thin;justify-content:flex-start;width:auto;max-width:none;left:clamp(220px,20vw,380px);right:300px;overflow-x:auto;transform:none}.app-container[data-side-panel=open][data-library=open] .current-style-panel{right:620px}.current-style-panel .segmented__btn{padding:3px 8px;font-size:11px}.undo-redo{align-items:center;gap:6px;display:inline-flex}.toolbar{z-index:200;background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-radius:var(--ex-radius-dock);max-width:calc(100vw - 24px);box-shadow:var(--ex-shadow);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:8px 10px;display:flex;position:fixed}.toolbar.toolbar--vertical{flex-direction:column;justify-content:flex-start;align-items:stretch;width:auto;min-width:152px;max-width:none;max-height:min(92vh,880px);padding:10px 10px 10px 12px;top:50%;bottom:auto;left:12px;overflow:hidden auto;transform:translateY(-50%)}.toolbar.toolbar--vertical .tool-group--tools{flex-direction:column}.toolbar.toolbar--vertical .tool-group--stroke,.toolbar.toolbar--vertical .tool-group--fill{flex-direction:column;align-items:stretch;gap:6px}.toolbar.toolbar--vertical .stroke-width-label,.toolbar.toolbar--vertical .color-label{white-space:normal;flex-direction:column;align-items:stretch;gap:6px}.group-label{color:var(--ex-text-muted);text-transform:uppercase;letter-spacing:.06em;padding:0 6px;font-size:11px;font-weight:600}.color-palette{grid-template-columns:repeat(5,1fr);gap:4px;padding:0 2px;display:grid}.color-swatch{aspect-ratio:1;border:1px solid var(--ex-border);cursor:pointer;background-clip:padding-box;border-radius:6px;width:100%;padding:0;transition:transform .1s,box-shadow .12s,border-color .12s}.color-swatch:hover{transform:scale(1.08)}.color-swatch.active{border-color:var(--ex-accent);box-shadow:0 0 0 2px var(--ex-accent-soft)}.color-swatch:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px}.color-swatch--transparent{background-color:#fff;background-image:linear-gradient(45deg,#d0d0d0 25%,#0000 25%),linear-gradient(-45deg,#d0d0d0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d0d0d0 75%),linear-gradient(-45deg,#0000 75%,#d0d0d0 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:8px 8px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;position:relative}[data-theme=dark] .color-swatch--transparent{background-color:#2a2a2a;background-image:linear-gradient(45deg,#555 25%,#0000 25%),linear-gradient(-45deg,#555 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#555 75%),linear-gradient(-45deg,#0000 75%,#555 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:8px 8px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}.color-swatch--picker{display:block;position:relative;overflow:hidden}.color-swatch--picker input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.fill-summary{color:var(--ex-text-muted);align-items:center;gap:6px;padding:0 6px;font-size:11px;display:flex}.fill-summary__chip{border:1px solid var(--ex-border);border-radius:4px;flex-shrink:0;width:14px;height:14px;display:inline-block}.fill-summary__chip[data-empty=true]{background-color:#0000;background-image:linear-gradient(45deg,#d0d0d0 25%,#0000 25%),linear-gradient(-45deg,#d0d0d0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d0d0d0 75%),linear-gradient(-45deg,#0000 75%,#d0d0d0 75%);background-position:0 0,0 3px,3px -3px,-3px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:6px 6px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}[data-theme=dark] .fill-summary__chip[data-empty=true]{background-color:#0000;background-image:linear-gradient(45deg,#555 25%,#0000 25%),linear-gradient(-45deg,#555 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#555 75%),linear-gradient(-45deg,#0000 75%,#555 75%);background-position:0 0,0 3px,3px -3px,-3px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:6px 6px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}.toolbar.toolbar--vertical .stroke-width-label input[type=range]{width:100%}.toolbar.toolbar--vertical .tool-group--export{flex-direction:row;justify-content:center;gap:4px}.toolbar.toolbar--vertical .separator{width:100%;height:1px;margin:4px 0}.tool-group{align-items:center;gap:2px;display:flex}.tool-button{border-radius:var(--ex-radius-btn);width:40px;height:40px;color:var(--ex-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background .12s,color .12s,transform .1s;display:flex}.tool-button svg{flex-shrink:0;width:26px;height:26px}.tool-button:hover{background:var(--ex-hover);color:var(--ex-text)}.tool-button:active{transform:scale(.96)}.tool-button.active{background:var(--ex-accent-soft);color:var(--ex-accent)}.tool-button:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px}.separator{background:var(--ex-border);flex-shrink:0;width:1px;height:22px;margin:0 4px}.stroke-width-label,.color-label{color:var(--ex-text-muted);white-space:nowrap;align-items:center;gap:8px;padding:0 6px;font-size:12px;display:flex}.stroke-width-label input[type=range]{width:88px;height:4px;accent-color:var(--ex-accent);cursor:pointer}.color-label input[type=color]{border:1px solid var(--ex-border);cursor:pointer;background:var(--ex-ui-bg);border-radius:8px;width:30px;height:30px;padding:2px}.side-panel{z-index:100;background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-radius:var(--ex-radius-panel);width:240px;max-height:min(520px,100vh - 140px);box-shadow:var(--ex-shadow);flex-direction:column;gap:14px;padding:14px 14px 16px;display:flex;position:fixed;top:52px;left:auto;right:16px;overflow-y:auto}.side-panel h4{color:var(--ex-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:11px;font-weight:600}.side-panel-section{border-top:1px solid var(--ex-border);flex-direction:column;gap:6px;padding-top:10px;display:flex}.shape-list ul{flex-direction:column;gap:4px;list-style:none;display:flex}.shape-item{background:var(--ex-bg);cursor:pointer;color:var(--ex-text);border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:13px;transition:border-color .12s,background .12s;display:flex}.shape-item:hover{border-color:var(--ex-border);background:var(--ex-shape-hover-bg)}.shape-item.selected{background:var(--ex-accent-soft);color:var(--ex-accent);border-color:#6965db40}[data-theme=dark] .shape-item.selected{border-color:#a5b4fc59}.shape-item--grouped{padding-left:24px}.shape-item__group-badge{background:var(--ex-accent-soft);width:16px;height:16px;color:var(--ex-accent);letter-spacing:.04em;border-radius:4px;flex:none;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:inline-flex}.shape-type{text-transform:capitalize;flex:auto}.shape-id{opacity:.65;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:11px}.empty-text{color:var(--ex-text-muted);font-size:13px;font-style:italic}.properties-panel{border-top:1px solid var(--ex-border);flex-direction:column;gap:10px;padding-top:4px;display:flex}.property-row{align-items:center;gap:8px;font-size:13px;display:flex}.property-row--segmented{flex-wrap:wrap}.segmented{border:1px solid var(--ex-border);border-radius:6px;display:inline-flex;overflow:hidden}.segmented__btn{appearance:none;border:none;border-right:1px solid var(--ex-border);color:var(--ex-fg);cursor:pointer;background:0 0;padding:4px 10px;font-family:inherit;font-size:12px}.segmented__btn:last-child{border-right:none}.segmented__btn.active{background:var(--ex-accent);color:#fff}.property-row label{min-width:72px;color:var(--ex-text-muted);font-size:12px}.property-row input[type=range]{accent-color:var(--ex-accent);flex:1}.property-row input[type=color]{border:1px solid var(--ex-border);cursor:pointer;border-radius:6px;width:28px;height:28px;padding:0}.property-row input[type=number]{border:1px solid var(--ex-border);background:var(--ex-bg);color:var(--ex-fg);border-radius:4px;flex:1;padding:3px 6px;font-family:inherit;font-size:13px}.property-suffix{color:var(--ex-text-muted);text-align:left;min-width:12px;font-size:12px}.property-reset{border:1px solid var(--ex-border);cursor:pointer;width:24px;height:24px;color:var(--ex-text-muted);background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;display:inline-flex}.property-reset:hover:not(:disabled){color:var(--ex-text);border-color:var(--ex-text-muted)}.property-reset:disabled{opacity:.3;cursor:not-allowed}.property-row--slider{padding:0 0 4px}.property-slider{width:100%;accent-color:var(--ex-accent);flex:100%;margin:0}.property-row input:disabled,.property-row .segmented__btn:disabled{opacity:.4;cursor:not-allowed}.property-row input[type=color]:disabled{filter:grayscale(.85)}.property-row--arrange{flex-wrap:wrap}.arrange-buttons{border:1px solid var(--ex-border);border-radius:6px;display:inline-flex;overflow:hidden}.arrange-buttons .icon-btn{appearance:none;border:none;border-right:1px solid var(--ex-border);color:var(--ex-fg);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:4px 6px;display:inline-flex}.arrange-buttons .icon-btn:last-child{border-right:none}.arrange-buttons .icon-btn:hover:not(:disabled){background:var(--ex-hover,#0000000d)}.arrange-buttons .icon-btn:disabled{opacity:.35;cursor:not-allowed}.canvas-container{z-index:0;background-color:var(--ex-bg);background-image:radial-gradient(var(--ex-canvas-grid) 1px, transparent 1px);background-size:22px 22px;position:absolute;inset:0}.canvas-container canvas{background:0 0;display:block}@media (width<=900px){.app-container[data-side-panel=open] .side-panel{width:220px;max-height:min(60vh,460px);top:52px;left:auto;right:12px}.app-container[data-side-panel=closed] .side-panel{display:none}}.canvas-hint{pointer-events:none;z-index:1;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.canvas-hint__inner{text-align:center;color:var(--ex-text-muted);-webkit-user-select:none;user-select:none;max-width:520px;padding:28px 36px}.canvas-hint__title{color:var(--ex-text);letter-spacing:-.01em;margin-bottom:6px;font-size:22px;font-weight:600}.canvas-hint__sub{margin-bottom:22px;font-size:14px}.canvas-hint__shortcuts{grid-template-columns:repeat(4,auto);justify-content:center;gap:10px 18px;margin-bottom:22px;font-size:13px;list-style:none;display:grid}.canvas-hint__shortcuts li{align-items:center;gap:6px;display:flex}.canvas-hint__shortcuts kbd{min-width:24px;height:22px;color:var(--ex-text);background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-bottom-width:2px;border-radius:4px;justify-content:center;align-items:center;padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:11px;font-weight:600;display:inline-flex}.canvas-hint__footer{color:var(--ex-text-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;font-size:12px;display:flex}.canvas-hint__footer kbd{min-width:20px;height:18px;color:var(--ex-text);background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-bottom-width:2px;border-radius:3px;justify-content:center;align-items:center;padding:0 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:10px;font-weight:600;display:inline-flex}.canvas-hint__sep{opacity:.5}@media (width<=560px){.canvas-hint__shortcuts{grid-template-columns:repeat(2,auto)}}.zoom-indicator{background:var(--ex-ui-bg);border:1px solid var(--ex-border);height:38px;box-shadow:var(--ex-shadow-sm);border-radius:10px;align-items:center;display:inline-flex;overflow:hidden}.zoom-btn{height:100%;color:var(--ex-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0 8px;transition:background .12s,color .12s;display:inline-flex}.zoom-btn:hover{background:var(--ex-hover);color:var(--ex-text)}.zoom-btn:focus-visible{outline:2px solid var(--ex-accent);outline-offset:-2px}.zoom-btn--readout{color:var(--ex-text);border-left:1px solid var(--ex-border);border-right:1px solid var(--ex-border);gap:5px;padding:0 10px;font-size:12px;font-weight:500}.zoom-readout{font-variant-numeric:tabular-nums;text-align:center;min-width:38px}@media (width<=560px){.side-panel{width:min(240px,100vw - 24px);max-height:min(40vh,320px);inset:auto auto 100px 12px}.toolbar.toolbar--vertical{flex-flow:wrap;justify-content:center;align-items:center;min-width:0;max-width:calc(100vw - 16px);max-height:none;padding:6px 8px;inset:auto auto 12px 50%;transform:translate(-50%)}.toolbar.toolbar--vertical .tool-group--tools{flex-flow:wrap;justify-content:center}.toolbar.toolbar--vertical .tool-group--stroke{flex-direction:row;align-items:center}.toolbar.toolbar--vertical .stroke-width-label,.toolbar.toolbar--vertical .color-label{white-space:nowrap;flex-direction:row}.toolbar.toolbar--vertical .stroke-width-label input[type=range]{width:88px}.toolbar.toolbar--vertical .separator{width:1px;height:22px;margin:0 4px}.tool-button{width:38px;height:38px}}.shape-item__handle{cursor:grab;width:14px;height:14px;color:var(--ex-text-muted);opacity:.55;touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.shape-item__handle:hover{opacity:1}.shape-item__handle:active{cursor:grabbing}.shape-item__handle:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px;border-radius:2px}.shape-item.dragging{opacity:.35;background:var(--ex-bg)}.insertion-line{background:var(--ex-accent);pointer-events:none;border-radius:1px;height:2px;margin:1px 4px}.ruler,.ruler__corner{background:var(--ex-ui-bg);border-color:var(--ex-border);pointer-events:none;z-index:4;box-sizing:border-box;position:absolute;overflow:hidden}.ruler__corner{border-right:1px solid var(--ex-border);border-bottom:1px solid var(--ex-border);z-index:5;top:0;left:0}.ruler--top{border-bottom:1px solid var(--ex-border);top:0}.ruler--left{border-right:1px solid var(--ex-border);left:0}.ruler__tick{color:var(--ex-text-muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;line-height:1;position:absolute}.ruler--top .ruler__tick{width:1px;height:100%}.ruler--top .ruler__tick:before{content:"";background:var(--ex-text-muted);width:1px;height:6px;position:absolute;bottom:0;left:0}.ruler--top .ruler__label{white-space:nowrap;position:absolute;top:1px;left:3px}.ruler--left .ruler__tick{width:100%;height:1px}.ruler--left .ruler__tick:before{content:"";background:var(--ex-text-muted);width:6px;height:1px;position:absolute;top:0;right:0}.ruler--left .ruler__label{white-space:nowrap;position:absolute;top:-5px;right:8px}.cursor-readout{z-index:50;font-variant-numeric:tabular-nums;color:var(--ex-text-muted);background:var(--ex-ui-bg);border:1px solid var(--ex-border);pointer-events:none;-webkit-user-select:none;user-select:none;box-shadow:var(--ex-shadow-sm);border-radius:6px;padding:3px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;position:fixed;bottom:10px;left:12px}.context-menu{z-index:1000;background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-radius:var(--ex-radius-panel);min-width:200px;max-width:280px;box-shadow:var(--ex-shadow);color:var(--ex-text);flex-direction:column;gap:0;padding:4px;font-size:13px;display:flex;position:fixed}.context-menu__item{color:var(--ex-text);font:inherit;text-align:left;cursor:pointer;appearance:none;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;width:100%;padding:7px 10px;display:flex}.context-menu__item:hover:not(.context-menu__item--disabled),.context-menu__item:focus-visible{background:var(--ex-hover);outline:none}.context-menu__item--disabled{color:var(--ex-text-muted);cursor:default;background:0 0}.context-menu__item--disabled:focus-visible{background:0 0}.context-menu__item--danger{color:#d6342b}.context-menu__item--danger:hover:not(.context-menu__item--disabled),.context-menu__item--danger:focus-visible{background:#d6342b1f}.context-menu__icon-placeholder{flex-shrink:0;width:14px;height:14px;display:inline-block}.context-menu__label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.context-menu__shortcut{color:var(--ex-text-muted);margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px}.context-menu__separator{background:var(--ex-border);pointer-events:none;height:1px;margin:4px 2px}.remote-cursor{pointer-events:none;z-index:5;will-change:transform;transition:transform 60ms linear;position:absolute;top:0;left:0}.remote-cursor__arrow{filter:drop-shadow(0 1px 1px #0003);display:block}.remote-cursor__label{color:#fff;font-size:11px;font-family:var(--ex-font-ui,system-ui, -apple-system, sans-serif);white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:3px;margin-left:14px;padding:2px 6px;display:inline-block;box-shadow:0 1px 2px #00000040}.collab-popover__identity{align-items:center;gap:6px}.collab-name-input{border:1px solid var(--ex-border);background:var(--ex-ui-bg);min-width:0;color:var(--ex-text);font:inherit;border-radius:4px;flex:1;padding:4px 8px}.collab-name-input:focus{border-color:var(--ex-text);outline:none}.collab-popover__swatches{grid-template-columns:repeat(6,1fr);gap:4px;margin:4px 0 8px;display:grid}.collab-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:4px;width:100%;padding:0;transition:transform 60ms}.collab-swatch:hover{transform:scale(1.08)}.collab-swatch--selected{border-color:var(--ex-text);box-shadow:inset 0 0 0 1px var(--ex-ui-bg)}.collab-popover__peer-count{margin-top:2px}.library-panel{z-index:100;background:var(--ex-ui-bg);border:1px solid var(--ex-border);border-radius:var(--ex-radius-panel);width:240px;max-height:min(520px,100vh - 140px);box-shadow:var(--ex-shadow);flex-direction:column;gap:12px;padding:14px 14px 16px;display:flex;position:fixed;top:52px;right:16px;overflow-y:auto}.app-container[data-library=open][data-side-panel=open] .library-panel{right:264px}.library-panel__header{justify-content:space-between;align-items:center;gap:8px;min-height:28px;display:flex}.library-panel__title{text-transform:uppercase;letter-spacing:.06em;color:var(--ex-text-muted);margin:0;font-size:11px;font-weight:600}.library-panel__title-input{border:1px solid var(--ex-border);background:var(--ex-bg);color:var(--ex-text);border-radius:6px;flex:auto;padding:4px 6px;font-size:13px}.library-panel__error{background:var(--ex-accent-soft);color:var(--ex-accent);border-radius:6px;padding:6px 8px;font-size:12px;line-height:1.35}.library-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.library-card{border:1px solid var(--ex-border);background:var(--ex-bg);cursor:grab;-webkit-user-select:none;user-select:none;border-radius:8px;flex-direction:column;gap:4px;padding:6px;display:flex;position:relative}.library-card:hover{border-color:var(--ex-accent);background:var(--ex-shape-hover-bg)}.library-card:active{cursor:grabbing}.library-card__thumb{aspect-ratio:1;object-fit:contain;background:var(--ex-bg);pointer-events:none;border-radius:4px;width:100%}.library-card__name{color:var(--ex-text);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.library-card__name-input{border:1px solid var(--ex-border);background:var(--ex-bg);color:var(--ex-text);border-radius:4px;padding:2px 4px;font-size:12px}.library-card__delete{background:var(--ex-ui-bg);width:18px;height:18px;color:var(--ex-text-muted);cursor:pointer;opacity:0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;transition:opacity .12s;display:flex;position:absolute;top:4px;right:4px}.library-card:hover .library-card__delete,.library-card__delete:focus-visible{opacity:1}.library-card__delete:hover{background:var(--ex-accent-soft);color:var(--ex-accent)}.library-empty{text-align:center;color:var(--ex-text-muted);padding:24px 8px;font-size:13px;line-height:1.4}.library-card input,.library-card img{user-drag:none;-webkit-user-drag:none}.palette-backdrop{z-index:60;background:#0000002e;justify-content:center;padding-top:88px;display:flex;position:fixed;inset:0}[data-theme=dark] .palette-backdrop{background:#00000073}.palette{background:var(--ex-ui-bg);width:480px;max-width:calc(100vw - 32px);max-height:60vh;color:var(--ex-text);border-radius:var(--ex-radius-dock,10px);box-shadow:var(--ex-shadow);flex-direction:column;display:flex;overflow:hidden}.palette__input-row{border-bottom:1px solid var(--ex-border);align-items:center;gap:8px;padding:8px 12px;display:flex}.palette__icon{color:var(--ex-text-muted);flex-shrink:0}.palette__input{min-width:0;color:var(--ex-text);background:0 0;border:0;outline:0;flex:auto;padding:4px 0;font-family:inherit;font-size:14px}.palette__input::placeholder{color:var(--ex-text-muted)}.palette__hint{color:var(--ex-text-muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;font-size:10px}.palette__results{flex:auto;padding:4px 0 8px;overflow-y:auto}.palette__empty{color:var(--ex-text-muted);text-align:center;padding:16px 12px;font-size:12px}.palette__section{padding:4px 0}.palette__section-header{letter-spacing:.04em;text-transform:uppercase;color:var(--ex-text-muted);padding:6px 12px 4px;font-size:10px;font-weight:600}.palette__row{color:var(--ex-text);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:12px;padding:6px 12px;font-size:13px;display:flex}.palette__row--active,.palette__row:hover{background:var(--ex-hover)}.palette__row-label{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.palette__row-shortcut{color:var(--ex-text-muted);background:var(--ex-bg);border:1px solid var(--ex-border);border-radius:4px;flex-shrink:0;padding:2px 6px;font-family:inherit;font-size:11px}.documents-modal{z-index:100;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.documents-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:default;background:#00000085;border:0;position:absolute;inset:0}.documents-panel{z-index:1;border:1px solid var(--color-border,#343434);background:var(--color-bg,#1f1f1f);border-radius:12px;width:min(360px,100vw - 32px);max-height:calc(100vh - 80px);padding:16px;position:relative;overflow:auto;box-shadow:0 12px 40px #00000047}.documents-panel__header,.documents-panel__create,.documents-panel__item{align-items:center;gap:8px;display:flex}.documents-panel__header{justify-content:space-between;margin-bottom:12px}.documents-panel__header>div{gap:3px;display:grid}.documents-panel__header small{color:var(--color-muted,#aaa);font-size:.78rem}.documents-panel__header button,.documents-panel__item button,.documents-panel__create button{color:inherit;background:var(--color-surface,#2c2c2c);cursor:pointer;border:0;border-radius:6px;padding:6px 8px}.documents-panel__create input{border:1px solid var(--color-border,#444);min-width:0;color:inherit;background:0 0;border-radius:6px;flex:1;padding:7px 8px}.documents-panel__signin{border:1px solid var(--color-border,#444);background:var(--color-surface,#2c2c2c);border-radius:9px;gap:7px;margin-top:12px;padding:14px;display:grid}.documents-panel__signin span{color:var(--color-muted,#aaa);font-size:.82rem}.documents-panel__signin button{color:#fff;background:var(--ex-accent,#7c5cff);cursor:pointer;border:0;border-radius:6px;width:fit-content;margin-top:3px;padding:7px 10px}.documents-panel__list{gap:6px;margin:12px 0 0;padding:0;list-style:none;display:grid}.documents-panel__item{border-radius:8px;justify-content:space-between;padding:7px}.documents-panel__item>button:first-child{background:0 0;flex:1;justify-items:start;display:grid}.documents-panel__item small,.documents-panel__empty{color:var(--color-muted,#aaa)}.documents-panel__error{color:#ff8787;gap:5px;margin-top:10px;font-size:.85rem;display:grid}.documents-panel__error span{color:#ffb4b4;overflow-wrap:anywhere}.documents-panel__error button{color:#ffd8d8;cursor:pointer;background:0 0;border:1px solid #ff878780;border-radius:6px;width:fit-content;padding:5px 8px}@media (width<=600px){.app-chrome{padding:8px}.app-chrome__actions{gap:5px;max-width:calc(100vw - 76px)}.documents-toggle{width:38px;padding:0;font-size:0}.documents-toggle:after{content:"▣";font-size:16px}.documents-modal{align-items:end;padding:12px}.documents-panel{width:100%;max-height:min(72vh,560px)}}