:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink-0:#111417;--ink-1:#171b1f;--ink-2:#20262b;--ink-3:#2b3339;--line:#3a444b;--line-soft:#2d353b;--text:#f1eee5;--text-muted:#aeb6b7;--text-dim:#7d898d;--cyan:#65c7d0;--cyan-strong:#8ee0e5;--amber:#e0ad55;--danger:#e38b7e;--ok:#89c79e;--panel:linear-gradient(165deg, #242b30 0%, #1a1f23 100%);--panel-deep:linear-gradient(165deg, #1c2226 0%, #15191c 100%);--shadow:0 14px 38px #00000052;--focus:0 0 0 2px var(--ink-0), 0 0 0 4px var(--cyan);--font-sans:"Avenir Next", "IBM Plex Sans", "Segoe UI", sans-serif;--font-mono:"SFMono-Regular", consolas, "Liberation Mono", monospace;font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:var(--ink-0);color:var(--text);overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{box-shadow:var(--focus);outline:none}.editor-shell,.demo-shell{background:var(--ink-0);grid-template-rows:auto auto minmax(0,1fr) 24px;grid-template-columns:minmax(0,1fr);width:100%;max-width:100vw;height:100svh;min-height:100svh;display:grid;overflow:hidden}.editor-chrome,.demo-header{border-bottom:1px solid var(--line-soft);background:linear-gradient(#252c31,#1c2226);align-items:center;width:100%;min-width:0;min-height:48px;padding:0 14px;display:flex}.editor-brand{align-items:baseline;gap:9px;min-width:185px;display:flex}.editor-brand strong{color:var(--text);letter-spacing:.03em;font-size:.9rem}.editor-brand span{color:var(--text-dim);font:600 .65rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase}.chrome-actions,.editor-actions,.document-actions{align-items:center;gap:6px;min-width:0;margin-left:auto;display:flex}.editor-chrome button,.chrome-actions button,.editor-actions button,.document-actions button,.tool-button,.layer-row button,.layer-tree button,.layer-toolbar button{min-height:32px;color:var(--text-muted);background:0 0;border:1px solid #0000;border-radius:3px;padding:0 9px;font-size:.76rem}.editor-chrome button:hover,.chrome-actions button:hover,.editor-actions button:hover,.document-actions button:hover,.tool-button:hover,.layer-row button:hover,.layer-tree button:hover,.layer-toolbar button:hover{border-color:var(--line);color:var(--text);background:#30383d}.editor-chrome nav[aria-label=Editor\ menu]{flex:none}.editor-chrome nav[aria-label=Editor\ menu]>div>button{color:var(--text-muted)!important;font:.76rem var(--font-sans)!important;background:0 0!important;border:1px solid #0000!important;border-radius:3px!important;padding:7px 10px!important}.editor-chrome nav[aria-label=Editor\ menu]>div>button:hover,.editor-chrome nav[aria-label=Editor\ menu]>div>button[aria-expanded=true]{border-color:var(--line)!important;color:var(--text)!important;background:#30383d!important}.editor-chrome nav[aria-label=Editor\ menu] [role=menu]{border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;background:#1b2125!important;border-radius:4px!important}.editor-chrome nav[aria-label=Editor\ menu] [role=menuitem]{color:var(--text-muted)!important;font:.74rem var(--font-sans)!important;background:0 0!important}.editor-chrome nav[aria-label=Editor\ menu] [role=menuitem]:hover:not(:disabled){color:var(--text)!important;background:#30383d!important}.editor-chrome nav[aria-label=Editor\ menu] kbd{color:var(--text-dim)!important}.editor-chrome button[aria-pressed=true],.tool-button[aria-pressed=true]{color:var(--cyan-strong);background:#20383b;border-color:#426d72}.status-strip,.editor-status{border-bottom:1px solid var(--line-soft);width:100%;min-width:0;min-height:25px;color:var(--text-dim);font:.68rem var(--font-mono);background:#15191c;align-items:center;gap:17px;padding:0 14px;display:flex}.status-strip strong,.editor-status strong{color:var(--text-muted);font-weight:500}.status-strip output,.editor-status output,.status-value{color:var(--amber)}.status-strip .order{margin-left:auto}.editor-main{grid-template-columns:48px minmax(0,1fr) minmax(290px,330px);width:100%;min-width:0;min-height:0;display:grid}.tool-rail{border-right:1px solid var(--line-soft);background:var(--panel-deep);flex-direction:column;align-items:center;gap:5px;padding:8px 5px;display:flex}.tool-rail-toggle,.tool-button{width:36px;height:36px;color:var(--text-dim);flex:none;padding:0;font-size:.72rem;position:relative}.tool-rail-toggle{background:0 0;border-color:#0000}.tool-rail-toggle svg{width:16px;height:16px}.tool-current{opacity:0;max-height:0;transition:max-height .18s,opacity .14s;display:grid;overflow:hidden}.tool-list{opacity:1;flex-direction:column;flex:auto;align-items:center;gap:5px;min-height:0;max-height:1000px;transition:max-height .22s,opacity .16s;display:flex;overflow:hidden auto}.tool-rail--collapsed .tool-current{opacity:1;max-height:52px}.tool-rail--collapsed .tool-list{opacity:0;pointer-events:none;flex:none;max-height:0}[data-tooltip]:after{z-index:20;border:1px solid var(--line);color:var(--text);content:attr(data-tooltip);font:.68rem var(--font-sans);opacity:0;pointer-events:none;white-space:nowrap;background:#0f1417;border-radius:3px;padding:5px 7px;line-height:1;transition:opacity .12s,transform .12s;position:absolute;top:50%;left:calc(100% + 9px);transform:translate(4px,-50%);box-shadow:0 5px 16px #00000059}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{opacity:1;transform:translateY(-50%)}.tool-button .tool-glyph{stroke-width:1.8px;width:18px;height:18px}.workspace,.canvas-workspace{background-color:#30363a;background-image:linear-gradient(45deg,#373e42 25%,#0000 25%),linear-gradient(-45deg,#373e42 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#373e42 75%),linear-gradient(-45deg,#0000 75%,#373e42 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;min-width:0;min-height:0;position:relative;overflow:hidden}.workspace-viewport{touch-action:none;min-width:0;min-height:0;position:absolute;inset:0;overflow:hidden}.canvas-stage-move{cursor:default}.canvas-stage-brush,.canvas-stage-mask{cursor:crosshair}.selection-box{border:1px solid var(--cyan-strong);pointer-events:none;transform-origin:50%;position:absolute;inset:0}.mask-keyboard-cursor{z-index:5;pointer-events:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #111,0 0 12px #66e5decc}[class~=tool-button--active],[class~=dock-tab--active]{color:var(--cyan-strong);background:#20383b;border-color:#426d72}.dock-tab{min-height:30px;color:var(--text-dim);background:0 0;border:0;border-bottom:1px solid #0000;border-radius:0;font-size:.7rem}.dock-tab:hover{color:var(--text)}.editor-panel-tabs{flex:1;min-height:0}.editor-panel-tabs>div[role=tablist]{background:#171c20;border-bottom-color:var(--line-soft)!important}.editor-panel-tabs>div[role=tablist] button{color:var(--text-dim)!important;font:.7rem var(--font-sans)!important;border-bottom-color:#0000!important}.editor-panel-tabs>div[role=tablist] button[aria-selected=true]{border-bottom-color:var(--cyan)!important;color:var(--cyan-strong)!important}.editor-panel-tabs>div[role=tabpanel]{overflow:auto}.property-control textarea,.property-control input[type=text]{border:1px solid var(--line);min-width:0;color:var(--text);background:#14191c;border-radius:3px;padding:6px 7px}.closed-document{height:100%;color:var(--text-muted);align-content:center;place-items:center;gap:14px;display:grid}.closed-document button{border:1px solid var(--line);min-height:34px;color:var(--text);background:var(--ink-2);border-radius:3px;padding:0 12px}.dock-mobile-open{display:block}[class~=layer-row--group]{color:var(--text);background:#ffffff0a}.layer-indicators{color:var(--text-dim);align-items:center;gap:4px;font-size:.68rem;display:inline-flex}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.workspace:after,.canvas-workspace:after{pointer-events:none;content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px #00000040}.canvas-viewport,.composition-frame{place-items:center;padding:clamp(20px,5vw,64px);display:grid;position:absolute;inset:0;overflow:auto}.canvas-stage{transform-origin:50%;will-change:transform;flex:none;position:relative;box-shadow:0 16px 36px #0000006b}.geometry-ruler{z-index:1;pointer-events:none;opacity:.55;position:absolute}.geometry-ruler--top{border-top:1px solid var(--cyan-strong);background:repeating-linear-gradient(to right, transparent 0 9px, var(--cyan-strong) 9px 10px);height:12px;top:-16px;left:0;right:0}.geometry-ruler--left{border-left:1px solid var(--cyan-strong);background:repeating-linear-gradient(to bottom, transparent 0 9px, var(--cyan-strong) 9px 10px);width:12px;top:0;bottom:0;left:-16px}.smart-guide{z-index:4;pointer-events:none;background:#ff5c8a;position:absolute;box-shadow:0 0 0 1px #ff5c8a52}.smart-guide--vertical{width:1px;top:0;bottom:0}.smart-guide--horizontal{height:1px;left:0;right:0}.canvas-stage canvas,.composition-frame canvas{image-rendering:auto;max-width:none;display:block}.canvas-overlay,.canvas-stage-overlay{pointer-events:none;position:absolute;inset:0}.canvas-overlay>*,.canvas-stage-overlay>*{pointer-events:auto}.resize-handle{z-index:2;border:2px solid var(--cyan-strong);background:var(--ink-1);width:12px;height:12px;position:absolute}.rotate-handle{z-index:3;border:2px solid var(--cyan-strong);background:var(--ink-1);cursor:grab;border-radius:50%;width:14px;height:14px;padding:0;position:absolute;top:-32px;left:calc(50% - 7px)}.rotate-handle:after{background:var(--cyan-strong);content:"";width:1px;height:18px;position:absolute;top:12px;left:5px}.canvas-stage-mask{cursor:crosshair}[class~=resize-handle--nw]{cursor:nwse-resize;top:-6px;left:-6px}[class~=resize-handle--n]{cursor:ns-resize;top:-6px;left:calc(50% - 6px)}[class~=resize-handle--ne]{cursor:nesw-resize;top:-6px;right:-6px}[class~=resize-handle--e]{cursor:ew-resize;top:calc(50% - 6px);right:-6px}[class~=resize-handle--sw]{cursor:nesw-resize;bottom:-6px;left:-6px}[class~=resize-handle--s]{cursor:ns-resize;bottom:-6px;left:calc(50% - 6px)}[class~=resize-handle--se]{cursor:nwse-resize;bottom:-6px;right:-6px}[class~=resize-handle--w]{cursor:ew-resize;top:calc(50% - 6px);left:-6px}.zoom-control,.zoom-value{color:var(--text-muted);font:.7rem var(--font-mono)}.zoom-control{z-index:3;border:1px solid var(--line);background:#14181be6;align-items:center;gap:6px;padding:4px 6px;display:flex;position:absolute;bottom:12px;right:14px}.zoom-control input[type=range]{width:88px;accent-color:var(--cyan)}.loading-note{z-index:3;color:var(--amber);font:.75rem var(--font-mono);white-space:nowrap;margin:0;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.dock{border-left:1px solid var(--line-soft);background:var(--panel-deep);flex-direction:column;min-width:0;min-height:0;display:flex}[class~=dock--properties]{flex:none}[class~=dock--layers]{flex:auto;min-height:0}.dock-section,.layer-panel{border-bottom:1px solid var(--line-soft);min-width:0;padding:12px}[class~=dock--layers] .dock-section,.layer-panel{overflow:auto}.section-heading{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.section-heading h2,.dock-title{color:var(--text);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.8rem;font-weight:650}.layer-toolbar{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.layer-toolbar button{border-color:var(--line-soft);background:#1b2125;min-height:28px;padding-inline:7px;font-size:.66rem}.layer-toolbar button:disabled,.layer-tree button:disabled{opacity:.38;cursor:not-allowed}.eyebrow{color:var(--amber);letter-spacing:.14em;text-transform:uppercase;margin:0 0 4px;font-size:.62rem;font-weight:700}h1{color:var(--text);letter-spacing:.01em;margin:0;font-size:1.05rem;font-weight:650}h2{color:var(--text);margin:0;font-size:.9rem;font-weight:650}.lede{color:var(--text-muted);margin:3px 0 0;font-size:.75rem}.layer-list{gap:3px;margin:0;padding:0;list-style:none;display:grid}.layer-tree{flex-direction:column;gap:3px;max-height:min(42vh,460px);display:flex;overflow-y:auto}.layer-tree [role=treeitem]{color:var(--text-muted);border:1px solid #0000;border-radius:3px;outline:none;position:relative}.layer-tree [role=treeitem]:hover{border-color:var(--line);background:#ffffff0f}.layer-tree [role=treeitem][aria-selected=true]{color:var(--text);background:#20383b;border-color:#4b8b91}.layer-tree [role=treeitem]:focus-visible{box-shadow:0 0 0 2px #73d0d861}.layer-tree [role=treeitem]>span[aria-hidden=true]{z-index:4;pointer-events:none;position:absolute}.layer-tree [role=treeitem]>span[aria-hidden=true][data-visible=true]{background:var(--cyan-strong);opacity:1;height:2px;inset-inline:0}.layer-tree [data-slot=item]{background:0 0;border:0;flex-wrap:nowrap;align-items:center;gap:7px;width:100%;min-height:42px;padding:4px 6px;display:flex}.layer-tree [data-slot=item]>button:first-child{flex:0 0 22px;place-items:center;width:22px;min-height:28px;padding:0;display:grid}.layer-tree [data-slot=item-media]{flex:none;justify-content:center;align-items:center;display:flex}.layer-tree [data-slot=item-content]{flex:auto;min-width:0;overflow:hidden}.layer-tree [data-slot=item-content]>span{text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;display:block;overflow:hidden}.layer-tree [data-slot=item-actions]{align-items:center;gap:2px;display:flex}.layer-tree [data-slot=item-actions] button{min-width:24px;min-height:26px;font:.62rem var(--font-mono);padding:0 4px}.layer-kind{border:1px solid var(--line);width:26px;height:26px;color:var(--text-muted);font:.58rem var(--font-mono);background:#273035;place-items:center;display:grid}.layer-kind-group{color:#e4c47f;background:#3b3321;border-color:#907238}.layer-kind-adjustment{color:var(--cyan-strong);background:#20383b;border-color:#4b8b91;border-radius:50%}.layer-shortcuts{color:var(--text-dim);font:.58rem var(--font-mono);margin:7px 0 0}.layer-row{min-height:42px;color:var(--text-muted);background:#ffffff06;border:1px solid #0000;border-radius:3px;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:7px;padding:4px 6px;display:grid}.layer-row:hover{border-color:var(--line);background:#ffffff0f}.layer-row[aria-selected=true],.layer-row.is-selected{color:var(--text);background:#20383b;border-color:#4b8b91}.layer-row[draggable=true]{cursor:grab}.layer-row[draggable=true]:active{cursor:grabbing}.layer-row[data-depth="1"]{padding-left:19px}.layer-row[data-depth="2"]{padding-left:32px}.layer-number{color:var(--text-dim);font:.64rem var(--font-mono);text-align:center}.layer-title{align-items:center;gap:7px;min-width:0;display:flex}.layer-title strong,.layer-name{color:inherit;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:550;overflow:hidden}.layer-thumb,.layer-thumbnail{border:1px solid var(--line);object-fit:cover;background:#454b4d;flex:0 0 26px;width:26px;height:26px}.layer-controls{align-items:center;gap:5px;display:flex}.layer-controls label,.property-control{color:var(--text-dim);gap:4px;font-size:.64rem;display:grid}.layer-controls select,.property-control select,.property-control input[type=text],.property-control input[type=number]{border:1px solid var(--line);min-height:28px;color:var(--text);background:#161b1e;border-radius:2px;padding:0 6px;font-size:.72rem}.layer-controls button{min-width:30px;min-height:30px;padding:0 6px}.layer-controls output,.property-control output{color:var(--amber);font:.65rem var(--font-mono)}.opacity-control{min-width:92px}.layer-controls input[type=range],.property-control input[type=range]{width:100%;accent-color:var(--cyan)}.visibility-control{align-items:center;min-height:30px;gap:5px!important;display:flex!important}.visibility-control input,.layer-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--cyan)}.property-grid{grid-template-columns:1fr 1fr;gap:9px;display:grid}.property-grid input,.property-grid select{width:100%;min-width:0}.property-grid .property-control:first-child,[class~=property-control--wide]{grid-column:1/-1}.property-control span{justify-content:space-between;display:flex}.dock-actions{flex-wrap:wrap;gap:5px;display:flex}.dock-actions button{border:1px solid var(--line);min-height:32px;color:var(--text-muted);background:#20262a;border-radius:3px;padding:0 8px;font-size:.7rem}.dock-actions button:hover{border-color:var(--cyan);color:var(--text)}.failure-panel{border:1px solid var(--danger);color:#f0b5a9;background:#73312a6b;border-radius:3px;flex-wrap:wrap;gap:7px;margin:8px 12px;padding:9px 11px;font-size:.75rem;display:flex}.failure-panel strong{color:#ffd1c7;font:.65rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.editor-message{border:1px solid var(--amber);color:#f4d18c;background:#64481e52;border-radius:3px;margin:8px 12px;padding:8px 10px;font-size:.74rem}.alert,[role=alert]{line-height:1.35}.editor-status{border-top:1px solid var(--line-soft);border-bottom:0;grid-row:4;justify-content:space-between}@media (width<=900px){.editor-main{grid-template-columns:44px minmax(0,1fr) 290px}.layer-controls{grid-template-columns:1fr 1fr}.layer-controls .opacity-control,.layer-controls .visibility-control{grid-column:1/-1}}@media (width<=700px){body{overflow:auto}.editor-shell,.demo-shell{grid-template-rows:auto auto auto 24px;height:auto;min-height:100svh;overflow:visible}.editor-chrome,.demo-header{min-height:48px;padding-right:max(10px, env(safe-area-inset-right));padding-left:max(10px, env(safe-area-inset-left));flex-wrap:wrap}.editor-brand{min-width:0}.editor-brand span{display:none}.menu-strip{order:3;width:100%;display:flex;overflow-x:auto}.menu-strip button{flex:none}.document-actions{display:none}.chrome-actions,.editor-actions{flex:1 1 0;margin-left:8px;overflow-x:auto}.status-strip,.editor-status{white-space:nowrap;overflow-x:auto}.editor-main{grid-template-columns:calc(62px + env(safe-area-inset-left)) minmax(0, 1fr);grid-template-rows:minmax(320px,52svh) auto;width:100%;min-width:0;min-height:0;display:grid}.tool-rail{padding:6px 5px 6px max(5px, env(safe-area-inset-left));border-right:1px solid var(--line-soft);overscroll-behavior:contain;scrollbar-width:thin;border-bottom:0;flex-direction:column;grid-area:1/1;justify-content:flex-start;align-items:flex-end;overflow:visible}.tool-button{flex:0 0 52px;justify-content:center;align-items:center;width:52px;height:52px;line-height:1;display:flex}.tool-rail-toggle{width:52px;height:44px}.tool-current,.tool-list{width:52px}.tool-list{overscroll-behavior:contain;scrollbar-width:thin;overflow:hidden auto}.tool-button .tool-glyph{width:22px;height:22px}[data-tooltip]:after{display:none}.workspace,.canvas-workspace{grid-area:1/2;min-height:320px}.canvas-viewport,.composition-frame{padding:18px}.dock{min-height:0;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line-soft);border-left:0;grid-area:2/1/auto/-1;display:block;overflow:visible}[class~=dock--properties],[class~=dock--layers]{min-height:auto}[class~=dock--layers] .dock-section,.layer-panel{max-height:none;overflow:visible}.layer-list{max-height:42vh;overflow-y:auto}.layer-tree{max-height:34vh}.layer-row{min-height:46px}.composition-frame{position:absolute}.demo-shell{padding:0;display:block}.demo-header{margin:0}.demo-header .lede{display:none}.demo-shell>.status-strip{margin:0}.demo-shell>.composition-frame{width:100%;min-height:320px;padding:18px;position:relative;inset:auto}.demo-shell>.layer-panel{border-radius:0;width:100%;margin:0}.demo-shell>.layer-panel .layer-controls{grid-template-columns:1fr 1fr}}@media (width<=700px) and (orientation:landscape){.editor-chrome,.demo-header{min-height:40px;padding-right:max(8px, env(safe-area-inset-right));padding-left:max(8px, env(safe-area-inset-left));flex-wrap:nowrap}.menu-strip{order:initial;width:auto}.editor-chrome button,.editor-actions button,.menu-strip button{min-height:28px;padding-inline:6px;font-size:.66rem}.editor-main{grid-template-rows:minmax(0,1fr);grid-template-columns:42px minmax(0,1fr) minmax(250px,34vw);min-height:320px}.tool-rail{padding-left:max(3px, env(safe-area-inset-left));border-right:1px solid var(--line-soft);border-bottom:0;flex-direction:column;padding-top:5px;padding-bottom:5px;padding-right:3px;overflow:hidden auto}.workspace,.canvas-workspace{min-height:320px}.dock{min-height:320px;padding-right:env(safe-area-inset-right);border-top:0;border-left:1px solid var(--line-soft);padding-bottom:0;overflow:hidden auto}.layer-tree{max-height:180px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}