html{--floating-controls-inset:24px;--timeline-height:76px;--timeline-toolbar-gap:20px;height:100%}html,body{max-width:100vw;overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f3fafa;flex-direction:column;align-items:center;min-height:100%;font-family:Arial,Helvetica,sans-serif;display:flex}*{box-sizing:border-box;margin:0;padding:0}.range{--range-accent:#b711c6;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px}.range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--range-accent) 0 var(--range-progress), #11182724 var(--range-progress) 100%);border-radius:999px;height:3px}.range::-webkit-slider-thumb{appearance:none;border:2px solid var(--range-accent);background:#fff;border-radius:50%;width:14px;height:14px;margin-top:-5.5px;box-shadow:0 1px 4px #11182733}.range::-moz-range-track{background:#11182724;border-radius:999px;height:3px}.range::-moz-range-progress{background:var(--range-accent);border-radius:999px;height:3px}.range::-moz-range-thumb{border:2px solid var(--range-accent);background:#fff;border-radius:50%;width:11px;height:11px;box-shadow:0 1px 4px #11182733}.range:focus-visible{outline:none}.range:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline:3px solid #b711c62e}.range:focus-visible::-moz-range-thumb{outline-offset:2px;outline:3px solid #b711c62e}.range:disabled{cursor:not-allowed;opacity:.42}.panel{--shadow-color:0deg 0% 78%;box-shadow:0px .2px .2px hsl(var(--shadow-color) / .38), 0px .3px .2px -.8px hsl(var(--shadow-color) / .33), 0px .7px .6px -1.6px hsl(var(--shadow-color) / .28), 0px 1.7px 1.3px -2.4px hsl(var(--shadow-color) / .23), 0px 3.6px 2.8px -3.2px hsl(var(--shadow-color) / .18), 0px 6.8px 5.4px -4px hsl(var(--shadow-color) / .12), 0px 11.5px 9.1px -4.7px hsl(var(--shadow-color) / .07);background-color:#fff;border-radius:8px;outline:1px solid #0000000d}body:has(.timeline-shell[data-visible=true]) .toolbar{transform:translateY(calc(-1 * (var(--timeline-height) + var(--timeline-toolbar-gap)))) translateX(-50%)}.toolbar{height:54px;bottom:var(--floating-controls-inset);align-items:stretch;gap:6px;padding:6px;list-style-type:none;transition:transform .3s;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toolbar>li:not(.separator){aspect-ratio:1;border-radius:6px;display:flex}.toolbar>li:not(.separator) button{appearance:none;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:100%;display:flex}.toolbar>li:not(.separator) button:disabled{cursor:not-allowed;opacity:.35}.toolbar>li:not(.separator):hover{background-color:#0000000d}.toolbar>li:not(.separator):has(button:disabled):hover{background-color:#0000}.toolbar>li:not(.separator).tool.active{background-color:#b711c6}.toolbar>li:not(.separator).tool.active svg{color:#fff}.toolbar>li:not(.separator).action.active{background-color:#00000014}.toolbar>li.separator{background:#eaeaea;width:1px;height:calc(100% - 16px);margin:8px 16px}.placeholder{fill:#0003;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:48px}.canvas{pointer-events:none;flex-direction:column;display:flex}.canvas svg{pointer-events:auto;touch-action:none;width:100vw;height:100vh}.sketch-drop-overlay{z-index:1000;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#f3fafad1;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.sketch-drop-overlay>div{color:#111827a3;text-align:center;background:#ffffffe6;border:2px dashed #b711c6;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:min(460px,100%);min-height:220px;padding:32px;display:flex}.sketch-drop-overlay strong{color:#700d79;font-size:22px}.sketch-drop-overlay span{font-size:14px}.sketch-load-status{z-index:1001;color:#111827bd;text-align:center;max-width:min(520px,100vw - 32px);padding:11px 16px;font-size:14px;position:fixed;top:24px;left:50%;transform:translate(-50%)}.sketch-load-status[data-tone=success]{color:#067647}.sketch-load-status[data-tone=error]{color:#b42318}.export-preview{background-color:#fff;background-image:linear-gradient(45deg,#f5f5f6 25%,#0000 25%),linear-gradient(-45deg,#f5f5f6 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f5f5f6 75%),linear-gradient(-45deg,#0000 75%,#f5f5f6 75%),none;background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;border:1px solid #11182714;border-radius:10px;justify-content:center;align-items:center;width:100%;max-width:100%;height:180px;max-height:60vh;margin:0 auto;display:flex;overflow:hidden}.export-preview svg{width:100%;height:100%;display:block}.export-control>button{anchor-name:--export-button}.export-hover-card{z-index:100;pointer-events:none;width:min(300px,100vw - 32px);padding:10px;position:absolute;bottom:calc(100% + 24px);left:50%;transform:translate(-50%)}.export-hover-card header{color:#11182794;justify-content:space-between;align-items:center;gap:16px;padding:1px 2px 9px;font-size:12px;font-weight:600;display:flex}.export-hover-card p{color:#b42318;padding:8px 2px 1px;font-size:12px}@supports (position-anchor:--export-button){.export-hover-card{position-anchor:--export-button;inset:auto;bottom:calc(anchor(top) + 24px);left:anchor(center);position:fixed;transform:translate(-50%)}}.selection-surface,.drawing-surface,.eraser-surface{fill:#0000}.eraser-surface{cursor:none}.eraser-cursor{pointer-events:none;fill:#ffffffd1;stroke:#11182773;stroke-width:1px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 3px #11182729)}.selection-marquee{pointer-events:none;fill:#b711c61a;stroke:#b711c6;stroke-width:1px;vector-effect:non-scaling-stroke}.active-stroke,.animated-stroke{pointer-events:none}.selection-layer[data-active=true] .selectable-stroke{stroke:#0000;stroke-width:20px;cursor:grab}.selection-layer[data-active=true] .selectable-stroke:hover{fill:#0b9aec}.selection-layer[data-active=true] .selectable-stroke.selected{stroke:#b711c6;stroke-width:2px}.selection-layer[data-active=true]:has(.selectable-stroke.selected) .selectable-stroke:not(.selected){filter:grayscale();opacity:.25}