*,*:before,*:after{box-sizing:border-box}:root,[data-theme=dark]{color-scheme:dark;--bg: #0f1219;--surface: #1a1f2e;--surface-elevated: #131926;--surface-sunken: #0d111a;--surface-panel: #0b1018;--surface-muted: #111722;--surface-hover: #1a2740;--border: #2a3348;--text: #e8ecf4;--text-bright: #dbe6ff;--text-on-primary: #ffffff;--text-on-accent: #0a0e14;--muted: #8b95a8;--primary: #5b8def;--primary-hover: #7aa3f5;--primary-strong: #7aa3ff;--primary-deep: #4f7fe8;--primary-soft-02: rgba(91, 141, 239, .08);--primary-soft-04: rgba(91, 141, 239, .1);--primary-soft-06: rgba(91, 141, 239, .12);--primary-soft-08: rgba(91, 141, 239, .14);--primary-soft-10: rgba(91, 141, 239, .16);--primary-soft-12: rgba(91, 141, 239, .18);--primary-soft-14: rgba(91, 141, 239, .24);--primary-soft-16: rgba(91, 141, 239, .25);--primary-soft-20: rgba(91, 141, 239, .34);--primary-soft-35: rgba(91, 141, 239, .35);--primary-soft-38: rgba(91, 141, 239, .38);--primary-soft-50: rgba(91, 141, 239, .5);--primary-soft-55: rgba(91, 141, 239, .55);--primary-soft-72: rgba(91, 141, 239, .72);--primary-soft-80: rgba(91, 141, 239, .8);--primary-soft-85: rgba(91, 141, 239, .85);--primary-soft-90: rgba(91, 141, 239, .9);--primary-soft-95: rgba(91, 141, 239, .95);--accent: #3dd6a3;--accent-hover: #5ae0b8;--danger: #e55353;--danger-hover: #ef6b6b;--danger-soft: rgba(255, 158, 166, .12);--danger-text: #ff9ea6;--danger-btn-bg: #6e3a44;--danger-btn-fg: #ffb0b6;--danger-btn-bg-hover: #8a4652;--danger-btn-fg-hover: #ffc4c9;--danger-ring: rgba(255, 120, 120, .75);--danger-line: rgba(255, 120, 120, .7);--danger-line-strong: rgba(255, 90, 90, 1);--info-btn-bg: #3d5f9e;--info-btn-bg-hover: #4d73b8;--info-btn-fg: #dbe6ff;--info-btn-fg-hover: #edf3ff;--overlay: rgba(0, 0, 0, .65);--overlay-chrome: rgba(8, 10, 15, .4);--shadow: 0 18px 48px rgba(0, 0, 0, .35);--shadow-md: 0 16px 48px rgba(0, 0, 0, .45);--shadow-sm: 0 8px 24px rgba(0, 0, 0, .35);--shadow-xs: 0 4px 16px rgba(0, 0, 0, .28);--shadow-handle: 0 1px 4px rgba(0, 0, 0, .4);--chrome-glass: rgba(26, 31, 46, .92);--chrome-frost-bg: color-mix(in srgb, var(--surface-panel) 62%, transparent);--chrome-frost-blur: blur(6px);--chrome-frost-border: color-mix(in srgb, var(--border) 55%, transparent);--btn-secondary-bg: #354056;--ghost-08: rgba(255, 255, 255, .08);--ghost-05: rgba(255, 255, 255, .05);--ghost-03: rgba(255, 255, 255, .03);--workspace-bg: #080a0f;--workspace-grid: rgba(255, 255, 255, .04);--slot-label: #dbe6ff;--slot-fill: #ffffff;--slot-dash: rgba(91, 141, 239, .55);--add-btn-border: rgba(36, 48, 71, .18);--add-btn-border-hover: rgba(36, 48, 71, .35);--add-btn-bg: rgba(255, 255, 255, .55);--add-btn-bg-hover: rgba(255, 255, 255, .85);--add-btn-fg: rgba(36, 48, 71, .35);--add-btn-fg-hover: rgba(36, 48, 71, .78);--add-btn-accent-border: rgba(61, 111, 214, .82);--add-btn-accent-bg: rgba(61, 111, 214, .16);--add-btn-accent-fg: #3d6fd6;--snap-guide: #ff6b9d;--snap-guide-glow: rgba(255, 107, 157, .6);--empty-tip-border: rgba(91, 141, 239, .5);--empty-tip-bg: rgba(91, 141, 239, .16);--empty-tip-fg: #dbe6ff;--marquee-border: rgba(158, 194, 255, .95);--marquee-fill: rgba(91, 141, 239, .12);--ruler-track-bg: transparent;--ruler-label: rgba(255, 255, 255, .26);--ruler-coordinate: rgba(255, 255, 255, .38);--ruler-baseline: rgba(158, 194, 255, .55);--ruler-tick-major: rgba(158, 194, 255, .88);--ruler-tick-minor: rgba(158, 194, 255, .48);--ruler-selected-hover: #1a2740;--ruler-selected-bg: #2f4b80;--ruler-control-ring: rgba(12, 18, 28, .9);--ruler-append-fg: #9ec2ff;--slot-editor-unit-grid-color: rgba(26, 34, 51, .06);--slot-editor-canvas-fill: #ffffff;--slot-editor-line-color: rgba(91, 141, 239, .38);--slot-editor-selected-line-color: #5b8def;--slot-editor-slot-border-color: rgba(26, 34, 51, .14);--slot-track-highlight: rgba(91, 141, 239, .16);--slot-bg: transparent;--slot-fg: #243047;--slot-meta-fg: rgba(26, 34, 51, .28);--scissor-line: color-mix(in srgb, var(--slot-fg) 26%, transparent);--scissor-line-pending: color-mix(in srgb, var(--slot-fg) 62%, transparent);--scissor-line-strong: var(--slot-fg);--scissor-target-ring: color-mix(in srgb, var(--slot-fg) 40%, transparent);--scissor-veil: color-mix(in srgb, #ffffff 58%, transparent);--asset-chip: #9ec2ff;--scrollbar-size: 8px;--scrollbar-radius: 999px;--scrollbar-track: transparent;--scrollbar-thumb: rgba(139, 149, 168, .28);--scrollbar-thumb-hover: rgba(91, 141, 239, .55);--scrollbar-thumb-active: rgba(91, 141, 239, .72)}[data-theme=light]{color-scheme:light;--bg: #e8eaef;--surface: #f4f5f8;--surface-elevated: #ffffff;--surface-sunken: #eceef3;--surface-panel: #e4e7ee;--surface-muted: #e9ebf1;--surface-hover: #dce3f2;--border: #c9d0dc;--text: #1a2233;--text-bright: #243047;--text-on-primary: #ffffff;--text-on-accent: #0a0e14;--muted: #5f6b7d;--primary: #3d6fd6;--primary-hover: #2f5fc0;--primary-strong: #4a7ae0;--primary-deep: #2f5fc0;--primary-soft-02: rgba(61, 111, 214, .08);--primary-soft-04: rgba(61, 111, 214, .1);--primary-soft-06: rgba(61, 111, 214, .12);--primary-soft-08: rgba(61, 111, 214, .14);--primary-soft-10: rgba(61, 111, 214, .16);--primary-soft-12: rgba(61, 111, 214, .18);--primary-soft-14: rgba(61, 111, 214, .22);--primary-soft-16: rgba(61, 111, 214, .24);--primary-soft-20: rgba(61, 111, 214, .3);--primary-soft-35: rgba(61, 111, 214, .32);--primary-soft-38: rgba(61, 111, 214, .36);--primary-soft-50: rgba(61, 111, 214, .45);--primary-soft-55: rgba(61, 111, 214, .5);--primary-soft-72: rgba(61, 111, 214, .65);--primary-soft-80: rgba(61, 111, 214, .75);--primary-soft-85: rgba(61, 111, 214, .82);--primary-soft-90: rgba(61, 111, 214, .88);--primary-soft-95: rgba(61, 111, 214, .92);--accent: #1fa97a;--accent-hover: #178f66;--danger: #d64545;--danger-hover: #c23535;--danger-soft: rgba(214, 69, 69, .12);--danger-text: #b4232f;--danger-btn-bg: #f0d0d4;--danger-btn-fg: #9b2c38;--danger-btn-bg-hover: #e8b8be;--danger-btn-fg-hover: #7f1f2a;--danger-ring: rgba(214, 69, 69, .7);--danger-line: rgba(214, 69, 69, .65);--danger-line-strong: rgba(214, 69, 69, .95);--info-btn-bg: #6b8fd4;--info-btn-bg-hover: #5a7ec4;--info-btn-fg: #ffffff;--info-btn-fg-hover: #ffffff;--overlay: rgba(20, 28, 40, .45);--overlay-chrome: rgba(244, 245, 248, .45);--shadow: 0 18px 48px rgba(30, 40, 60, .16);--shadow-md: 0 16px 40px rgba(30, 40, 60, .18);--shadow-sm: 0 8px 24px rgba(30, 40, 60, .12);--shadow-xs: 0 4px 14px rgba(30, 40, 60, .1);--shadow-handle: 0 1px 3px rgba(30, 40, 60, .2);--chrome-glass: rgba(244, 245, 248, .94);--chrome-frost-bg: color-mix(in srgb, var(--surface-panel) 62%, transparent);--chrome-frost-blur: blur(6px);--chrome-frost-border: color-mix(in srgb, var(--border) 55%, transparent);--btn-secondary-bg: #d5dbe6;--ghost-08: rgba(26, 34, 51, .08);--ghost-05: rgba(26, 34, 51, .05);--ghost-03: rgba(26, 34, 51, .03);--workspace-bg: #d6dae3;--workspace-grid: rgba(26, 34, 51, .08);--slot-label: #243047;--slot-fill: #ffffff;--slot-dash: rgba(61, 111, 214, .55);--add-btn-border: rgba(36, 48, 71, .18);--add-btn-border-hover: rgba(36, 48, 71, .35);--add-btn-bg: rgba(255, 255, 255, .55);--add-btn-bg-hover: rgba(255, 255, 255, .85);--add-btn-fg: rgba(36, 48, 71, .35);--add-btn-fg-hover: rgba(36, 48, 71, .78);--add-btn-accent-border: rgba(61, 111, 214, .82);--add-btn-accent-bg: rgba(61, 111, 214, .16);--add-btn-accent-fg: #3d6fd6;--snap-guide: #e84b8a;--snap-guide-glow: rgba(232, 75, 138, .45);--empty-tip-border: rgba(61, 111, 214, .45);--empty-tip-bg: rgba(61, 111, 214, .12);--empty-tip-fg: #243047;--marquee-border: rgba(61, 111, 214, .9);--marquee-fill: rgba(61, 111, 214, .12);--ruler-track-bg: transparent;--ruler-label: rgba(26, 34, 51, .4);--ruler-coordinate: rgba(26, 34, 51, .5);--ruler-baseline: rgba(61, 111, 214, .55);--ruler-tick-major: rgba(36, 48, 71, .72);--ruler-tick-minor: rgba(36, 48, 71, .38);--ruler-selected-hover: #c9d6ef;--ruler-selected-bg: #9eb6e0;--ruler-control-ring: rgba(255, 255, 255, .9);--ruler-append-fg: #3d6fd6;--slot-editor-unit-grid-color: rgba(26, 34, 51, .07);--slot-editor-canvas-fill: #ffffff;--slot-editor-line-color: rgba(61, 111, 214, .38);--slot-editor-selected-line-color: #3d6fd6;--slot-editor-slot-border-color: rgba(26, 34, 51, .14);--slot-track-highlight: rgba(61, 111, 214, .14);--slot-bg: transparent;--slot-fg: #243047;--slot-meta-fg: rgba(26, 34, 51, .26);--scissor-line: color-mix(in srgb, var(--slot-fg) 26%, transparent);--scissor-line-pending: color-mix(in srgb, var(--slot-fg) 62%, transparent);--scissor-line-strong: var(--slot-fg);--scissor-target-ring: color-mix(in srgb, var(--slot-fg) 40%, transparent);--scissor-veil: color-mix(in srgb, #ffffff 58%, transparent);--asset-chip: #3d6fd6;--scrollbar-size: 8px;--scrollbar-radius: 999px;--scrollbar-track: transparent;--scrollbar-thumb: rgba(95, 107, 125, .3);--scrollbar-thumb-hover: rgba(61, 111, 214, .55);--scrollbar-thumb-active: rgba(61, 111, 214, .72)}html,body,#root{height:100%;margin:0;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:SF Pro Text,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}.app-shell input,.app-shell textarea,.app-shell select,.app-shell [contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}.seo-crawlable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}*::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}*::-webkit-scrollbar-corner{background:transparent}*::-webkit-scrollbar-track{background:var(--scrollbar-track);margin:2px}*::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);background-clip:padding-box;border:2px solid transparent;border-radius:var(--scrollbar-radius)}*::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box;border:2px solid transparent}*::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active);background-clip:padding-box;border:2px solid transparent}[hidden],html[data-im-canvas-template="0"] [data-chrome="toolbar.merge"],html[data-im-canvas-template="0"] [data-chrome="toolbar.scissor"]{display:none!important}.app-shell{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.app-main{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}.side-panel{--side-panel-width: 280px;flex:0 0 auto;width:0;min-width:0;max-width:none;display:flex;flex-direction:column;padding:0;border:none;border-color:transparent;background:var(--surface-panel);overflow:hidden;opacity:0;pointer-events:none;transition:width .22s ease,opacity .18s ease,border-color .22s ease}.side-panel-inner{box-sizing:border-box;width:var(--side-panel-width);min-width:var(--side-panel-width);height:100%;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px;overflow:auto}.side-panel.open{width:var(--side-panel-width);opacity:1;pointer-events:auto}.side-panel.side-panel-placeholder{transition:none;opacity:1;pointer-events:none}.project-panel.side-panel{--side-panel-width: min(360px, 34vw)}.project-panel.side-panel.open{border-right:1px solid var(--border)}.asset-panel.side-panel{--side-panel-width: min(280px, 28vw)}.asset-panel.side-panel.open{border-right:1px solid var(--border)}.template-panel.side-panel{--side-panel-width: min(500px, 46vw)}.mobile-bottom-nav,.shell-panel-backdrop{display:none}.app-shell[data-layout=phone]{padding-bottom:env(safe-area-inset-bottom,0)}html[data-layout=phone] .toolbar [data-chrome="toolbar.projects"],html[data-layout=phone] .toolbar [data-chrome="toolbar.assets"],html[data-layout=phone] .toolbar [data-chrome="toolbar.templates"],html[data-layout=phone] .toolbar [data-chrome="toolbar.shortcuts"],html[data-layout=phone] .toolbar [data-chrome="toolbar.scissor"],html[data-layout=tablet] .toolbar [data-chrome="toolbar.scissor"],html[data-layout=phone] .toolbar .toolbar-divider,.app-shell[data-layout=phone] .toolbar [data-chrome="toolbar.projects"],.app-shell[data-layout=phone] .toolbar [data-chrome="toolbar.assets"],.app-shell[data-layout=phone] .toolbar [data-chrome="toolbar.templates"],.app-shell[data-layout=phone] .toolbar [data-chrome="toolbar.shortcuts"],.app-shell[data-layout=phone] .toolbar [data-chrome="toolbar.scissor"],.app-shell[data-layout=tablet] .toolbar [data-chrome="toolbar.scissor"],.app-shell[data-layout=phone] .toolbar .toolbar-divider{display:none!important}html[data-layout=phone] .workspace,html[data-layout=tablet] .workspace,.app-shell[data-layout=phone] .workspace,.app-shell[data-layout=tablet] .workspace{border:none;border-radius:0}html[data-layout=phone] .mobile-bottom-nav,.app-shell[data-layout=phone] .mobile-bottom-nav{display:flex;flex:0 0 auto;align-items:stretch;justify-content:center;gap:4px;padding:2px 8px calc(2px + env(safe-area-inset-bottom,0));border-top:1px solid var(--border);background:var(--surface-panel);z-index:50}.mobile-bottom-nav-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:56px;min-width:56px;max-width:56px;min-height:36px;padding:2px 0;border:none;border-radius:8px;background:transparent;color:var(--muted);font-size:9px;line-height:1.15;cursor:pointer;text-align:center}.mobile-bottom-nav-btn svg{width:18px;height:18px;flex-shrink:0}.mobile-bottom-nav-btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-shell[data-layout=phone] .mobile-bottom-nav-btn.active,.app-shell[data-layout=phone] .mobile-bottom-nav-btn.accent{color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent)}@media (orientation: landscape){.app-shell{flex-direction:row;padding-bottom:0}.app-shell .toolbar{flex-direction:column;flex:0 0 auto;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:calc(52px + env(safe-area-inset-left,0));min-width:calc(52px + env(safe-area-inset-left,0));max-width:calc(64px + env(safe-area-inset-left,0));height:100%;min-height:0;padding:max(8px,env(safe-area-inset-top,0)) 4px max(8px,env(safe-area-inset-bottom,0));padding-left:calc(4px + env(safe-area-inset-left,0));gap:6px;border-bottom:none;border-right:1px solid var(--border);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.app-shell .toolbar-spacer{flex:1 1 auto;width:100%;min-width:0;min-height:8px}.app-shell .toolbar-divider{width:22px;height:1px;flex-shrink:0}.app-shell .toolbar .btn-icon{width:40px;height:40px;min-width:40px;padding:0;flex-shrink:0}.app-shell .app-main{flex:1 1 auto;min-width:0;min-height:0;height:100%}.app-shell .shell-panel-backdrop{flex:0 0 0;width:0;height:0;margin:0;padding:0;border:none;overflow:visible}.app-shell[data-layout=phone] .mobile-bottom-nav{flex-direction:column;flex:0 0 auto;align-items:center;justify-content:center;width:calc(56px + env(safe-area-inset-right,0));min-width:calc(56px + env(safe-area-inset-right,0));max-width:calc(72px + env(safe-area-inset-right,0));height:100%;min-height:0;gap:4px;padding:max(8px,env(safe-area-inset-top,0)) 4px max(8px,env(safe-area-inset-bottom,0));padding-right:calc(4px + env(safe-area-inset-right,0));border-top:none;border-left:1px solid var(--border);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.app-shell[data-layout=phone] .mobile-bottom-nav-btn{width:48px;min-width:48px;max-width:48px;min-height:44px;padding:4px 0;flex-shrink:0}.app-shell .workspace-frame>.toolbar-export-cluster{position:absolute;top:8px;right:8px;z-index:70;display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 16px);padding:6px 8px 6px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-panel);box-shadow:0 4px 16px color-mix(in srgb,var(--text) 12%,transparent)}.app-shell .workspace-frame>.toolbar-export-cluster .toolbar-export-options{display:inline-flex;align-items:center;gap:10px;min-width:0}.app-shell .workspace-frame>.toolbar-export-cluster .export-label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.app-shell .workspace-frame>.toolbar-export-cluster .export-label input[type=range]{width:88px;min-width:64px}.app-shell .workspace-frame>[data-chrome="toolbar.export"]{position:absolute;top:8px;right:8px;z-index:70}.app-shell .workspace-frame>.toolbar-export-cluster [data-chrome="toolbar.export"]{position:static}.app-shell .toolbar [data-chrome="toolbar.export"]{position:fixed;top:max(8px,env(safe-area-inset-top,0));right:max(8px,env(safe-area-inset-right,0));z-index:70}.app-shell[data-layout=phone] .toolbar [data-chrome="toolbar.export"]{right:calc(64px + env(safe-area-inset-right,0))}.app-shell .toolbar-export-settings{display:inline-flex;position:relative;align-items:center;flex-shrink:0}html[data-layout=desktop] .toolbar-export-settings-toggle,.app-shell[data-layout=desktop] .toolbar-export-settings-toggle{display:inline-flex}html[data-layout=desktop] .toolbar-export-settings-menu,.app-shell[data-layout=desktop] .toolbar-export-settings-menu{display:none;position:fixed;z-index:1200;flex-direction:column;align-items:stretch;gap:12px;min-width:220px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-panel);box-shadow:0 8px 28px color-mix(in srgb,var(--text) 18%,transparent)}html[data-layout=desktop] .toolbar-export-settings-menu.open,.app-shell[data-layout=desktop] .toolbar-export-settings-menu.open{display:flex}html[data-layout=desktop] .toolbar-settings-prefs,.app-shell[data-layout=desktop] .toolbar-settings-prefs{display:flex;align-items:center;justify-content:flex-start;gap:8px}html[data-layout=desktop] .toolbar-settings-divider,.app-shell[data-layout=desktop] .toolbar-settings-divider{display:none}}.app-shell[data-layout=phone] .shell-panel-backdrop:not([hidden]){display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;background:var(--overlay-chrome)}.app-shell[data-layout=phone] .side-panel{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:60;width:100%;max-width:100vw;height:min(88dvh,calc(100% - 48px));max-height:min(88dvh,calc(100% - 48px));--side-panel-width: 100%;opacity:1;pointer-events:none;transform:translate3d(0,110%,0);border:none;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px color-mix(in srgb,#000 22%,transparent);overflow:hidden;transition:transform .28s cubic-bezier(.2,.9,.2,1)}.app-shell[data-layout=phone] .project-panel.side-panel,.app-shell[data-layout=phone] .asset-panel.side-panel,.app-shell[data-layout=phone] .template-panel.side-panel{left:0;right:0;--side-panel-width: 100%}.app-shell[data-layout=phone] .side-panel.open{width:100%;opacity:1;pointer-events:auto;transform:translateZ(0);border:none;box-shadow:0 -8px 32px color-mix(in srgb,#000 22%,transparent)}.app-shell[data-layout=phone] .project-panel.side-panel.open,.app-shell[data-layout=phone] .asset-panel.side-panel.open,.app-shell[data-layout=phone] .template-panel.side-panel.open{border:none}.app-shell[data-layout=phone] .side-panel.sheet-dragging{transition:none}.app-shell[data-layout=phone] .side-panel-inner{width:100%;min-width:0;max-width:none;height:100%;padding-top:8px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0));overflow:auto}.sheet-drag-handle{display:none}.app-shell[data-layout=phone] .sheet-drag-handle{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:100%;min-height:28px;margin:0 0 4px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.app-shell[data-layout=phone] .sheet-drag-handle:before{content:"";width:40px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 55%,transparent)}.app-shell[data-layout=phone] .sheet-drag-handle:active{cursor:grabbing}@media (orientation: landscape){.app-shell[data-layout=phone] .side-panel{height:min(92dvh,100%);max-height:min(92dvh,100%)}}.app-shell[data-layout=tablet] .template-panel.side-panel{--side-panel-width: min(420px, 48vw)}.app-shell[data-layout=tablet] .project-panel.side-panel{--side-panel-width: min(320px, 36vw)}.app-shell[data-layout=tablet] .asset-panel.side-panel{--side-panel-width: min(280px, 32vw)}@media (orientation: portrait){html[data-layout=phone] .workspace-hint,html[data-layout=tablet] .workspace-hint{left:8px;top:8px;bottom:auto;right:auto;max-width:min(70vw,280px);padding:4px 8px;border-radius:8px;border:none;background:var(--chrome-frost-bg);-webkit-backdrop-filter:var(--chrome-frost-blur);backdrop-filter:var(--chrome-frost-blur);font-size:11px;line-height:1.35;color:var(--muted);pointer-events:none;z-index:18}html[data-layout=phone] .workspace-layer-scale,html[data-layout=tablet] .workspace-layer-scale{left:8px;right:8px;top:8px;bottom:auto;max-width:none;width:auto;padding:4px 8px;border-radius:8px;border:none;background:var(--chrome-frost-bg);-webkit-backdrop-filter:var(--chrome-frost-blur);backdrop-filter:var(--chrome-frost-blur);font-size:11px;line-height:1.35;color:var(--muted);z-index:18}html[data-layout=phone] .workspace-layer-scale-value,html[data-layout=tablet] .workspace-layer-scale-value{min-width:2.75em}html[data-layout=phone] .workspace-bottom-controls,html[data-layout=tablet] .workspace-bottom-controls{right:6px;bottom:6px;left:auto;gap:4px;max-width:calc(100% - 12px);flex-wrap:nowrap;align-items:center}html[data-layout=phone] .gap-control,html[data-layout=tablet] .gap-control{gap:4px;padding:2px 6px;border-radius:8px;font-size:11px}html[data-layout=phone] .gap-control input[type=range],html[data-layout=tablet] .gap-control input[type=range]{width:56px;height:18px}html[data-layout=phone] .gap-control-value,html[data-layout=tablet] .gap-control-value{min-width:2em;font-size:11px}html[data-layout=phone] .viewport-controls,html[data-layout=tablet] .viewport-controls{gap:2px;padding:2px;border-radius:8px}html[data-layout=phone] .viewport-btn,html[data-layout=tablet] .viewport-btn{min-width:26px;min-height:26px;padding:2px 6px;font-size:12px;line-height:1.2}html[data-layout=phone] .viewport-percent,html[data-layout=tablet] .viewport-percent{min-width:40px;padding-left:4px;padding-right:4px;font-size:11px}}@media (orientation: landscape){.workspace-bottom-controls{top:auto;right:8px;bottom:8px;left:auto;flex-direction:row;align-items:stretch;gap:8px;padding:0;max-width:calc(100% - 16px);border:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}.app-shell[data-layout=phone] .workspace-bottom-controls,.app-shell[data-layout=tablet] .workspace-bottom-controls,html[data-layout=phone] .workspace-bottom-controls,html[data-layout=tablet] .workspace-bottom-controls{right:6px;bottom:6px;gap:4px;max-width:calc(100% - 12px)}html[data-layout=phone] .workspace-bottom-controls,.app-shell[data-layout=phone] .workspace-bottom-controls{flex-direction:column;align-items:flex-end;gap:6px}html[data-layout=phone] .gap-control,.app-shell[data-layout=phone] .gap-control{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 3px 6px;font-size:10px}html[data-layout=phone] .gap-control-label,.app-shell[data-layout=phone] .gap-control-label{display:none}html[data-layout=phone] .gap-control-icon,.app-shell[data-layout=phone] .gap-control-icon{display:inline-flex}html[data-layout=phone] .gap-control-icon svg,.app-shell[data-layout=phone] .gap-control-icon svg{width:12px;height:12px}html[data-layout=phone] .gap-control input[type=range],.app-shell[data-layout=phone] .gap-control input[type=range]{width:16px;height:56px;writing-mode:vertical-lr;direction:rtl}html[data-layout=phone] .gap-control-value,.app-shell[data-layout=phone] .gap-control-value{min-width:1.25em;font-size:10px;text-align:center}html[data-layout=phone] .gap-control-unit,.app-shell[data-layout=phone] .gap-control-unit{display:none}}html[data-layout=phone] .slot-add-image-btn,html[data-layout=tablet] .slot-add-image-btn,html[data-pointer-coarse="1"] .slot-add-image-btn,html[data-layout=phone] .asset-card-delete,html[data-layout=tablet] .asset-card-delete,html[data-pointer-coarse="1"] .asset-card-delete,html[data-layout=phone] .project-card-tools,html[data-layout=tablet] .project-card-tools,html[data-pointer-coarse="1"] .project-card-tools{opacity:1}html[data-layout=phone] .resize-handle,html[data-layout=tablet] .resize-handle,html[data-pointer-coarse="1"] .resize-handle{width:22px;height:22px;right:-4px;bottom:-4px}html[data-layout=phone] .layer.selected .resize-handle:after,html[data-layout=tablet] .layer.selected .resize-handle:after,html[data-pointer-coarse="1"] .layer.selected .resize-handle:after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px}html[data-layout=phone] .slot-editor-boundary-hit-col,html[data-layout=tablet] .slot-editor-boundary-hit-col,html[data-pointer-coarse="1"] .slot-editor-boundary-hit-col{width:24px}html[data-layout=phone] .slot-editor-boundary-hit-row,html[data-layout=tablet] .slot-editor-boundary-hit-row,html[data-pointer-coarse="1"] .slot-editor-boundary-hit-row{height:24px}html[data-layout=phone] .template-ruler-boundary-zone-col,html[data-layout=tablet] .template-ruler-boundary-zone-col,html[data-pointer-coarse="1"] .template-ruler-boundary-zone-col{width:calc(20px * var(--ruler-ui-scale, 1))}html[data-layout=phone] .template-ruler-boundary-zone-row,html[data-layout=tablet] .template-ruler-boundary-zone-row,html[data-pointer-coarse="1"] .template-ruler-boundary-zone-row{height:calc(20px * var(--ruler-ui-scale, 1))}html[data-layout=phone] .slot-selection-menu,html[data-layout=tablet] .slot-selection-menu,html[data-pointer-coarse="1"] .slot-selection-menu{--slot-selection-menu-btn-size: 32px}html[data-layout=phone] .slot-selection-insert-floating .slot-selection-menu,html[data-layout=tablet] .slot-selection-insert-floating .slot-selection-menu,html[data-pointer-coarse="1"] .slot-selection-insert-floating .slot-selection-menu{--slot-selection-menu-btn-size: 28px}html[data-layout=phone] .slot-selection-menu,html[data-layout=tablet] .slot-selection-menu{background:var(--chrome-frost-bg);-webkit-backdrop-filter:var(--chrome-frost-blur);backdrop-filter:var(--chrome-frost-blur)}html[data-layout=phone] .gap-control,html[data-layout=tablet] .gap-control,html[data-layout=phone] .viewport-controls,html[data-layout=tablet] .viewport-controls{border-color:var(--chrome-frost-border);background:var(--chrome-frost-bg);-webkit-backdrop-filter:var(--chrome-frost-blur);backdrop-filter:var(--chrome-frost-blur)}html[data-layout=phone] .toolbar,html[data-layout=tablet] .toolbar,.app-shell[data-layout=phone] .toolbar,.app-shell[data-layout=tablet] .toolbar,html[data-layout=phone] .mobile-bottom-nav,.app-shell[data-layout=phone] .mobile-bottom-nav{background:var(--chrome-frost-bg);border-color:var(--chrome-frost-border)}html[data-layout=phone] .app-shell,.app-shell[data-layout=phone]{position:relative;padding-bottom:0}html[data-layout=phone] .toolbar,.app-shell[data-layout=phone] .toolbar{position:absolute;top:0;right:0;left:0;z-index:50;-webkit-backdrop-filter:var(--chrome-frost-blur);backdrop-filter:var(--chrome-frost-blur)}html[data-layout=phone] .mobile-bottom-nav,.app-shell[data-layout=phone] .mobile-bottom-nav{position:absolute;right:0;bottom:0;left:0;-webkit-backdrop-filter:var(--chrome-frost-blur);backdrop-filter:var(--chrome-frost-blur)}html[data-layout=phone] .workspace-frame{background-color:var(--workspace-bg)}html[data-layout=phone] .workspace,.app-shell[data-layout=phone] .workspace{position:absolute;inset:var(--chrome-inset-top, 0px) var(--chrome-inset-right, 0px) var(--chrome-inset-bottom, 0px) var(--chrome-inset-left, 0px);width:auto;height:auto;overflow:visible}html[data-layout=phone] .empty-tip{left:calc(50% + (var(--chrome-inset-left, 0px) - var(--chrome-inset-right, 0px)) / 2);top:calc(50% + (var(--chrome-inset-top, 0px) - var(--chrome-inset-bottom, 0px)) / 2)}@media (orientation: landscape){html[data-layout=phone] .toolbar,.app-shell[data-layout=phone] .toolbar{top:0;right:auto;bottom:0;left:0}html[data-layout=phone] .mobile-bottom-nav,.app-shell[data-layout=phone] .mobile-bottom-nav{top:0;right:0;bottom:0;left:auto}html[data-layout=phone] .toolbar [data-chrome="toolbar.export"],.app-shell[data-layout=phone] .toolbar [data-chrome="toolbar.export"]{visibility:hidden}html[data-layout=phone] .workspace-frame>[data-chrome="toolbar.export"],.app-shell[data-layout=phone] .workspace-frame>[data-chrome="toolbar.export"]{right:calc(var(--chrome-inset-right, 0px) + 8px);visibility:visible}}.template-panel.side-panel.open{border-left:1px solid var(--border)}.template-panel .side-panel-inner{overflow:hidden}.workspace-restore{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3000;display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;background:var(--overlay-chrome);color:var(--muted);font-size:13px;box-sizing:border-box}.workspace-restore.is-open{animation:workspace-restore-in .22s ease-out}.workspace-restore.is-leaving{animation:workspace-restore-out .18s ease-in forwards;pointer-events:none}.workspace-restore.is-open .workspace-restore-panel{animation:workspace-restore-panel-in .22s ease-out}.workspace-restore.is-leaving .workspace-restore-panel{animation:workspace-restore-panel-out .18s ease-in forwards}.workspace-restore-panel{width:min(260px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}.workspace-restore-title{margin:0;font-size:13px;font-weight:600;color:var(--text)}.workspace-restore-bar{position:relative;height:5px;border-radius:999px;overflow:hidden;background:var(--ghost-08)}.workspace-restore-bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary-deep),var(--primary));transition:width .18s ease}.workspace-restore-bar-fill.is-indeterminate{position:absolute;inset:0 auto 0 0;width:36%;transition:none;animation:workspace-restore-indeterminate 1.15s ease-in-out infinite}@keyframes workspace-restore-in{0%{opacity:0}to{opacity:1}}@keyframes workspace-restore-out{0%{opacity:1}to{opacity:0}}@keyframes workspace-restore-panel-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes workspace-restore-panel-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes workspace-restore-indeterminate{0%{transform:translate(-120%)}to{transform:translate(380%)}}.workspace-restore-detail{margin:0;font-size:11px;color:var(--muted);line-height:1.4;word-break:break-word}html[data-im-needs-restore="1"] [data-chrome="emptyTip.root"]{display:none!important}.export-progress-toast{position:fixed;top:16px;right:16px;z-index:1200;width:min(320px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface-elevated);box-shadow:var(--shadow);pointer-events:none;animation:export-progress-toast-in .22s ease-out}.export-progress-toast.is-error{border-color:color-mix(in srgb,var(--danger, #e85d5d) 45%,var(--border))}.export-progress-toast-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.export-progress-toast-title{margin:0;font-size:13px;font-weight:600;color:var(--text);line-height:1.3}.export-progress-toast-percent{flex-shrink:0;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}.export-progress-toast-bar{position:relative;height:6px;border-radius:999px;overflow:hidden;background:var(--ghost-08)}.export-progress-toast-bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary-deep),var(--primary));transition:width .18s ease}.export-progress-toast-detail{margin:0;font-size:12px;color:var(--muted);line-height:1.4;word-break:break-word}@keyframes export-progress-toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.toolbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}.toolbar-spacer{flex:1;min-width:8px}.toolbar-divider{width:1px;height:24px;background:var(--border)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;font-size:14px;font-weight:500;color:var(--text);background:var(--border);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--btn-secondary-bg)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--text-on-primary)}.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}.btn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--text-on-primary)}.btn.danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.btn-icon{padding:8px;min-width:36px;min-height:36px}.btn-icon svg{width:18px;height:18px;flex-shrink:0}.btn-icon svg[hidden]{display:none}.btn-icon svg:not([hidden]){display:block}.tooltip-wrap{display:inline-flex;max-width:100%}.btn-icon.ghost{padding:4px;min-width:24px;min-height:24px;color:var(--muted);background:transparent;border:none;border-radius:6px}.btn-icon.ghost svg{width:16px;height:16px}.btn-icon.ghost:hover{color:var(--text);background:var(--surface-hover)}.btn-icon.primary svg{color:var(--text-on-primary)}.btn-icon.accent svg{color:var(--text-on-accent)}.tooltip-trigger-wrap{display:inline-flex}.tooltip-content{z-index:4000;display:flex;align-items:center;max-width:280px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface-elevated);color:var(--text);font-size:12px;line-height:1.4;box-shadow:var(--shadow-sm);animation:tooltip-fade-in .15s ease}.tooltip-floating{position:fixed;pointer-events:none}.tooltip-arrow-el{position:absolute;left:50%;width:8px;height:8px;background:var(--surface-elevated);border:1px solid var(--border);pointer-events:none}.tooltip-side-bottom .tooltip-arrow-el{top:-4px;transform:translate(-50%) rotate(45deg);border-right:none;border-bottom:none}.tooltip-side-top .tooltip-arrow-el{bottom:-4px;transform:translate(-50%) rotate(45deg);border-left:none;border-top:none}.tooltip-side-left .tooltip-arrow-el{left:auto;right:-4px;top:50%;transform:translateY(-50%) rotate(45deg);border-left:none;border-bottom:none}.tooltip-side-right .tooltip-arrow-el{left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);border-right:none;border-top:none}.tooltip-text{display:inline-flex;align-items:center;gap:8px}.tooltip-kbd{display:inline-flex;align-items:center;padding:2px 6px;border-radius:5px;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text-bright);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;white-space:nowrap}.tooltip-arrow{fill:var(--surface-elevated)}@keyframes tooltip-fade-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.toolbar-export-settings,.toolbar-export-settings-menu,.toolbar-settings-prefs{display:contents}.toolbar-export-settings-toggle,.toolbar-settings-divider{display:none}.toolbar-export-options{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}html[data-layout=phone] .toolbar-export-settings,html[data-layout=tablet] .toolbar-export-settings,.app-shell[data-layout=phone] .toolbar-export-settings,.app-shell[data-layout=tablet] .toolbar-export-settings{display:inline-flex;position:relative;align-items:center;flex-shrink:0}html[data-layout=phone] .toolbar-export-settings-toggle,html[data-layout=tablet] .toolbar-export-settings-toggle,.app-shell[data-layout=phone] .toolbar-export-settings-toggle,.app-shell[data-layout=tablet] .toolbar-export-settings-toggle{display:inline-flex}html[data-layout=phone] .toolbar-export-settings-menu,html[data-layout=tablet] .toolbar-export-settings-menu,.app-shell[data-layout=phone] .toolbar-export-settings-menu,.app-shell[data-layout=tablet] .toolbar-export-settings-menu,body>.toolbar-export-settings-menu{display:none;position:fixed;z-index:1200;flex-direction:column;align-items:stretch;gap:12px;min-width:220px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-panel);box-shadow:0 8px 28px color-mix(in srgb,var(--text) 18%,transparent)}html[data-layout=phone] .toolbar-export-settings-menu.open,html[data-layout=tablet] .toolbar-export-settings-menu.open,.app-shell[data-layout=phone] .toolbar-export-settings-menu.open,.app-shell[data-layout=tablet] .toolbar-export-settings-menu.open,body>.toolbar-export-settings-menu.open{display:flex}html[data-layout=phone] .toolbar-settings-prefs,html[data-layout=tablet] .toolbar-settings-prefs,.app-shell[data-layout=phone] .toolbar-settings-prefs,.app-shell[data-layout=tablet] .toolbar-settings-prefs,body>.toolbar-export-settings-menu .toolbar-settings-prefs{display:flex;align-items:center;justify-content:flex-start;gap:8px}html[data-layout=phone] .toolbar-settings-divider,html[data-layout=tablet] .toolbar-settings-divider,.app-shell[data-layout=phone] .toolbar-settings-divider,.app-shell[data-layout=tablet] .toolbar-settings-divider,body>.toolbar-export-settings-menu .toolbar-settings-divider{display:block;height:1px;margin:0;background:var(--border)}html[data-layout=phone] .toolbar-export-settings-menu .toolbar-export-options,html[data-layout=tablet] .toolbar-export-settings-menu .toolbar-export-options,.app-shell[data-layout=phone] .toolbar-export-settings-menu .toolbar-export-options,.app-shell[data-layout=tablet] .toolbar-export-settings-menu .toolbar-export-options,body>.toolbar-export-settings-menu .toolbar-export-options{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}html[data-layout=phone] .toolbar-export-settings-menu .export-label,html[data-layout=tablet] .toolbar-export-settings-menu .export-label,.app-shell[data-layout=phone] .toolbar-export-settings-menu .export-label,.app-shell[data-layout=tablet] .toolbar-export-settings-menu .export-label,body>.toolbar-export-settings-menu .export-label{display:flex;width:100%;justify-content:space-between;gap:10px}html[data-layout=phone] .toolbar-export-settings-menu .export-label input[type=range],html[data-layout=tablet] .toolbar-export-settings-menu .export-label input[type=range],.app-shell[data-layout=phone] .toolbar-export-settings-menu .export-label input[type=range],.app-shell[data-layout=tablet] .toolbar-export-settings-menu .export-label input[type=range],body>.toolbar-export-settings-menu .export-label input[type=range]{flex:1 1 auto;min-width:0}.export-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.export-label select,.export-label input[type=range]{accent-color:var(--primary)}.export-label select{padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text)}.workspace-wrap{flex:1 1 0;min-width:0;min-height:0;padding:0;overflow:hidden}.workspace-frame{position:relative;width:100%;height:100%}#workspace-island{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:auto;height:auto}.workspace{position:relative;width:100%;height:100%;border:1px solid var(--border);background-color:var(--workspace-bg);background-image:linear-gradient(var(--workspace-grid) 1px,transparent 1px),linear-gradient(90deg,var(--workspace-grid) 1px,transparent 1px);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;isolation:isolate;cursor:grab}.workspace-shell{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;cursor:default;transition:opacity .28s ease-out}.workspace-frame:has(#workspace-island>*) .workspace-shell{opacity:0}#workspace-island>.workspace{animation:workspace-surface-in .32s ease-out}@keyframes workspace-surface-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.workspace-shell{transition:none}#workspace-island>.workspace{animation:none}}.workspace.pan-ready{cursor:grab}.workspace.panning{cursor:grabbing}.workspace.pan-ready .layer,.workspace.panning .layer{cursor:inherit}.workspace-space-pan-mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;background:transparent;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.workspace-space-pan-mask.panning{cursor:grabbing}.viewport-canvas{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 0;will-change:transform;overflow:visible;pointer-events:none}.workspace.is-pinch-zooming .viewport-canvas{visibility:hidden;pointer-events:none}.workspace.is-pinch-zooming .viewport-world-scaled{will-change:auto}.pinch-viewport-proxy{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none;transform-origin:0 0;will-change:transform;overflow:visible}.pinch-viewport-proxy canvas{display:block;position:absolute}.viewport-controls{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:10px;border:1px solid var(--border);background:var(--chrome-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-shrink:0}.viewport-btn{min-width:32px;padding:6px 10px;font-size:13px}.viewport-percent{min-width:56px;font-variant-numeric:tabular-nums}.workspace-bottom-controls{position:absolute;right:12px;bottom:12px;z-index:20;display:inline-flex;align-items:stretch;gap:8px;max-width:calc(100% - 24px);flex-wrap:nowrap;pointer-events:auto}.workspace-hint{position:absolute;left:12px;bottom:12px;z-index:20;margin:0;max-width:min(420px,calc(100% - 180px));padding:6px 12px;border-radius:10px;border:1px solid var(--border);background:var(--chrome-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;line-height:1.4;color:var(--muted);pointer-events:none;-webkit-user-select:none;user-select:none}.workspace-layer-scale{position:absolute;left:12px;right:12px;bottom:12px;z-index:20;display:flex;align-items:center;gap:8px;width:auto;max-width:none;margin:0;padding:6px 12px;border-radius:10px;border:1px solid var(--border);background:var(--chrome-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;line-height:1.4;color:var(--muted);pointer-events:auto;-webkit-user-select:none;user-select:none;white-space:nowrap;box-sizing:border-box}.workspace-layer-scale input[type=range]{flex:1 1 auto;width:auto;min-width:0;accent-color:var(--primary);cursor:pointer;touch-action:none}.workspace-layer-scale-value{flex:0 0 auto;min-width:3.25em;font-variant-numeric:tabular-nums;color:var(--text);text-align:right}.gap-control{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:10px;border:1px solid var(--border);background:var(--chrome-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;color:var(--muted);flex-shrink:0;white-space:nowrap}.gap-control-label{display:inline}.gap-control-icon{display:none;align-items:center;justify-content:center;line-height:0;color:var(--muted)}.gap-control input[type=range]{width:88px;height:auto;margin:0;writing-mode:horizontal-tb;direction:ltr;accent-color:var(--primary);cursor:pointer;touch-action:none}.gap-control-value{min-width:2.5em;font-variant-numeric:tabular-nums;color:var(--text);text-align:right;line-height:1.2}.gap-control-unit{display:inline}.workspace.drag-over{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft-35) inset}.workspace-grid{display:none}.snap-guides{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10000}.snap-guide{position:absolute;background:var(--snap-guide);box-shadow:0 0 4px var(--snap-guide-glow)}.snap-guide-v{width:1px}.snap-guide-h{height:1px}.layers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.empty-tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:min(420px,90%);pointer-events:none;z-index:4}.empty-tip-add{pointer-events:auto;cursor:pointer}.empty-tip-title{margin:0;font-size:15px;color:var(--muted);line-height:1.45;pointer-events:none}.empty-tip-sub{margin:0;font-size:13px;color:color-mix(in srgb,var(--muted) 72%,transparent);line-height:1.4;pointer-events:none}.empty-tip-link{display:inline;margin:0 2px;padding:0;border:none;background:none;color:var(--primary);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;pointer-events:auto}.empty-tip-link:hover,.empty-tip-link:focus-visible{color:var(--text-bright);outline:none}.drop-tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 14px;border-radius:8px;border:1px solid var(--primary-soft-50);background:var(--primary-soft-10);color:var(--text-bright);pointer-events:none}.layer{position:absolute;transform-origin:top left;cursor:grab;touch-action:none;outline:none;pointer-events:auto;overflow:visible;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.layer.selected{outline:3px solid var(--primary);outline-offset:1px;box-shadow:0 0 0 1px color-mix(in srgb,#fff 92%,transparent),0 0 0 4px color-mix(in srgb,var(--primary) 55%,transparent)}.layer img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.canvas-slots,.layers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.canvas-slot{position:absolute;box-sizing:border-box;overflow:hidden;border:2px dashed var(--primary-soft-55);background:var(--primary-soft-02);pointer-events:auto}.free-slot{position:absolute;overflow:hidden;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border));background:var(--slot-fill, #fff);pointer-events:auto}.free-slot.selected{border-color:var(--slot-editor-selected-line-color, var(--primary));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent)}.free-slot-layer{position:absolute}.canvas-slot.empty{container-type:size}.canvas-slot.filled{border-style:solid;background:var(--slot-fill)}.canvas-slot .layer{position:absolute;cursor:grab}.canvas-slot-label{position:absolute;top:4px;left:6px;z-index:2;font-size:11px;font-weight:700;color:var(--text-bright);pointer-events:none}.slot-add-image-btn{position:absolute;left:50%;top:50%;z-index:2;width:clamp(10px,62cqmin,40px);height:clamp(10px,62cqmin,40px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:0;border:1px dashed var(--add-btn-border);border-radius:50%;background:var(--add-btn-bg);color:var(--add-btn-fg);opacity:.35;cursor:pointer;transform:translate(-50%,-50%);box-sizing:border-box;transition:opacity .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease}.canvas-slot.empty:hover .slot-add-image-btn,.slot-editor-slot:hover .slot-add-image-btn{opacity:1;border-color:var(--add-btn-border-hover);background:var(--add-btn-bg-hover);color:var(--add-btn-fg-hover)}.canvas-slot.empty:hover .slot-add-image-btn:hover,.canvas-slot.empty:hover .slot-add-image-btn:focus-visible,.slot-editor-slot:hover .slot-add-image-btn:hover,.slot-editor-slot:hover .slot-add-image-btn:focus-visible{border-color:var(--add-btn-accent-border);background:var(--add-btn-accent-bg);color:var(--add-btn-accent-fg)}.workspace.layer-move-active .slot-add-image-btn,.canvas-template-editor.layer-drag-active .slot-add-image-btn{pointer-events:none!important;opacity:.35;border-color:var(--add-btn-border);background:var(--add-btn-bg);color:var(--add-btn-fg);cursor:default}.workspace.layer-move-active .canvas-slot.empty:hover .slot-add-image-btn,.workspace.layer-move-active .slot-editor-slot:hover .slot-add-image-btn,.canvas-template-editor.layer-drag-active .slot-editor-slot:hover .slot-add-image-btn,.workspace.layer-move-active .canvas-slot.empty:hover .slot-add-image-btn:hover,.workspace.layer-move-active .slot-editor-slot:hover .slot-add-image-btn:hover,.canvas-template-editor.layer-drag-active .slot-editor-slot:hover .slot-add-image-btn:hover{opacity:.35;border-color:var(--add-btn-border);background:var(--add-btn-bg);color:var(--add-btn-fg)}.slot-add-image-btn-icon{width:50%;height:50%;aspect-ratio:1;min-width:6px;min-height:6px;max-width:20px;max-height:20px}.resize-handle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:var(--primary);border:2px solid var(--text-on-primary);border-radius:2px;cursor:nwse-resize;box-shadow:var(--shadow-handle);display:none}.layer.selected .resize-handle{display:block}.canvas-slot .resize-handle,.canvas-template-layer .resize-handle{right:4px;bottom:4px;z-index:3}.layer-drag-ghost{position:absolute;z-index:1;opacity:.72;pointer-events:none;will-change:transform;isolation:isolate;overflow:hidden;background:var(--text-on-accent);box-shadow:var(--shadow-xs)}.layer-drag-ghost-image{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.canvas-template-editor.layer-drag-active .slot-editor-slot{pointer-events:none}.canvas-template-editor.layer-drag-active .slot-editor-slot-meta{z-index:6}.canvas-template-editor.layer-drag-active .slot-editor-grid-line{z-index:8}.canvas-template-editor.layer-drag-active .slot-editor-slot-border-dim{z-index:9}.canvas-template-editor.layer-drag-active .slot-editor-marquee{z-index:10}.layer.dragging{cursor:grabbing;will-change:transform;backface-visibility:hidden}.layer.drag-preview{contain:strict;isolation:isolate}.layer.dragging .resize-handle{display:none!important}.canvas-template-layer.dragging img{pointer-events:none;-webkit-user-select:none;user-select:none}.shortcuts-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px}.alert-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2500;background:var(--overlay);animation:alert-overlay-fade-in .15s ease}.alert-dialog-content{position:fixed;left:50%;top:50%;z-index:2501;width:min(420px,92vw);transform:translate(-50%,-50%);padding:20px;border-radius:12px;border:1px solid var(--border);background:var(--surface-elevated);box-shadow:var(--shadow-md);animation:alert-content-fade-in .15s ease}dialog.alert-dialog-content{margin:0}dialog.alert-dialog-content::backdrop{background:var(--overlay);animation:alert-overlay-fade-in .15s ease}.alert-dialog-title{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--text)}.alert-dialog-description{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--muted)}.alert-dialog-actions{display:flex;justify-content:flex-end;gap:8px}.export-preview-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--overlay);animation:alert-overlay-fade-in .15s ease;-webkit-user-select:none;user-select:none}.export-preview-panel{width:min(720px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;gap:12px;padding:16px;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface-elevated);box-shadow:var(--shadow-md);-webkit-user-select:none;user-select:none}.export-preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.export-preview-close-icon{flex:0 0 auto;width:34px;height:34px;padding:0;font-size:24px;line-height:1}.export-preview-hint{margin:0;flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--text);-webkit-user-select:none;user-select:none}.export-preview-image-wrap{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;border-radius:8px;background:var(--workspace-bg);-webkit-user-select:none;user-select:none}.export-preview-image{display:block;max-width:100%;max-height:min(70dvh,920px);object-fit:contain;pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:default}@keyframes alert-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert-content-fade-in{0%{opacity:0;transform:translate(-50%,calc(-50% + 6px))}to{opacity:1;transform:translate(-50%,-50%)}}.shortcuts-modal{width:min(640px,96vw);max-height:88vh;overflow:auto;background:var(--surface-elevated);border:1px solid var(--border);border-radius:12px;padding:14px}.shortcuts-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.shortcuts-modal-header h3{margin:0}.shortcuts-groups{display:grid;gap:14px}.shortcuts-group h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}.shortcuts-group ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.shortcuts-group li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;background:var(--ghost-03);font-size:14px}.shortcuts-group kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text-bright);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:nowrap}.layout-template-modal{width:min(560px,96vw)}.layout-template-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;font-size:13px;color:var(--muted)}.layout-template-warning{margin:0 0 12px;padding:8px 10px;border-radius:8px;background:var(--danger-soft);color:var(--danger-text);font-size:13px}.template-layout-schematic{position:relative;aspect-ratio:1 / 1;background:var(--surface-muted);overflow:hidden;box-sizing:border-box;border-radius:6px}.template-layout-schematic-slot{position:absolute;box-sizing:border-box;background:var(--primary-soft-20);border-radius:1px}.template-card-preview{margin:0}.layout-template-name{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px;color:var(--muted)}.layout-template-name input{width:100%;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text);border-radius:8px;padding:8px 10px}.layout-template-actions{display:flex;justify-content:flex-end;gap:8px}.app-main{display:flex;flex:1;min-height:0;position:relative}.btn.active{border-color:var(--primary-soft-80);background:var(--primary-soft-10)}.project-panel-backdrop{display:none}.project-panel,.asset-panel{height:100%}.asset-panel-header,.project-panel-header,.template-panel-header{gap:8px}.asset-panel-header .btn-icon.ghost,.project-panel-header .btn-icon.ghost,.template-panel-header .btn-icon.ghost{margin-top:2px;flex-shrink:0}.asset-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.asset-panel-header h2{margin:0;font-size:18px}.asset-panel-header p{margin:4px 0 0;font-size:12px;color:var(--muted)}.asset-panel-empty{margin:0;color:var(--muted);font-size:13px}.asset-card-list{display:flex;flex-direction:column;gap:10px}.asset-card{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-sunken);color:inherit;text-align:left;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.asset-card:active{cursor:grabbing}.asset-card.browse-only,html[data-layout=phone] .asset-card,html[data-layout=tablet] .asset-card{cursor:default;touch-action:pan-y}.asset-card.browse-only:active,html[data-layout=phone] .asset-card:active,html[data-layout=tablet] .asset-card:active{cursor:default}.asset-card.active{border-color:var(--primary-soft-80);box-shadow:0 0 0 1px var(--primary-soft-16)}.asset-card-thumb{display:block;width:100%;aspect-ratio:4 / 3;height:auto;border-radius:8px;object-fit:cover;background:var(--surface-muted)}.asset-card-thumb-empty{display:block}.asset-card-media{position:relative}.asset-card-delete{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.asset-card:hover .asset-card-delete,.asset-card:focus-within .asset-card-delete,.asset-card.active .asset-card-delete{opacity:1}.asset-card-delete:hover,.asset-card-delete:focus-visible{background:color-mix(in srgb,#c23b3b 18%,var(--surface));color:#c23b3b;outline:none}.asset-card-body{display:flex;align-items:baseline;gap:8px;min-width:0}.asset-card-title{flex:1 1 auto;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-card-size{flex:0 0 auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.project-panel-header{display:flex;align-items:flex-start;justify-content:space-between}.project-panel-header h2{margin:0;font-size:18px}.project-panel-header p{margin:4px 0 0;font-size:12px;color:var(--muted)}.project-panel-actions{display:flex;gap:8px}.project-panel-actions .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;font-size:13px}.project-sort-control{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}.project-sort-control select{border:1px solid var(--border);background:var(--surface-sunken);color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px}.project-panel-empty{margin:0;color:var(--muted);font-size:13px}.project-card-list{display:flex;flex-direction:column;gap:10px}.project-card{display:flex;align-items:stretch;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-sunken);cursor:pointer;outline:none}.project-card:focus-visible{border-color:var(--primary-soft-80);box-shadow:0 0 0 1px var(--primary-soft-16)}.project-card.active{border-color:var(--primary-soft-80);box-shadow:0 0 0 1px var(--primary-soft-16)}.project-card-media{flex:0 0 auto;width:96px;height:72px;border-radius:8px;overflow:hidden;background:var(--surface-muted)}.project-card-thumb{display:block;width:100%;height:100%;object-fit:contain;background:var(--surface-muted)}.project-card-thumb-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted);font-size:12px}.project-card-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}.project-card-title{font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card-meta{font-size:11px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card-rename-input{width:100%;border:1px solid var(--border);background:var(--text-on-accent);color:var(--text);border-radius:8px;padding:4px 8px;font-size:14px}.project-card-tools{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:0 0 auto;opacity:0;transition:opacity .12s ease}.project-card:hover .project-card-tools,.project-card:focus-within .project-card-tools,.project-card.active .project-card-tools{opacity:1}.project-card-tool{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);cursor:pointer}.project-card-tool:hover:not(:disabled),.project-card-tool:focus-visible:not(:disabled){background:color-mix(in srgb,var(--primary) 14%,var(--surface));outline:none}.project-card-tool:disabled{opacity:.4;cursor:not-allowed}.project-card-tool[aria-label^=删除]:hover:not(:disabled),.project-card-tool[aria-label^=删除]:focus-visible:not(:disabled){background:color-mix(in srgb,#c23b3b 18%,var(--surface));color:#c23b3b}.template-panel-backdrop{display:none}.template-panel{height:100%;min-height:0}.template-panel-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.template-panel-header{display:flex;align-items:flex-start;justify-content:space-between}.template-panel-header h3{margin:0;font-size:18px}.template-panel-subtitle{margin:4px 0 0;font-size:12px;color:var(--ruler-append-fg)}.template-panel-error{margin:0;padding:8px 10px;border-radius:8px;background:var(--danger-soft);color:var(--danger-text);font-size:13px}.template-panel-save-btn{width:100%}.template-panel-empty{margin:0;color:var(--muted);font-size:13px}.template-panel-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:8px}.template-filter-chips{display:flex;flex-wrap:wrap;gap:6px}.template-filter-chip{border:1px solid var(--border);background:var(--surface-sunken);color:var(--muted);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer}.template-filter-chip.active{border-color:var(--primary-soft-80);color:var(--text-bright);background:var(--primary-soft-08)}.template-card-list{display:flex;flex-direction:column;gap:8px}.template-card{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:10px;overflow:visible;background:var(--surface-sunken);cursor:pointer}.template-card .template-layout-schematic{width:52px;height:52px;flex-shrink:0}.template-card-body{flex:1;min-width:0;padding:0}.template-card-title{margin:0 0 2px;font-size:13px}.template-card-meta{margin:0 0 6px;font-size:11px;color:var(--muted)}.template-card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.template-card-actions .btn{padding:4px 8px;font-size:12px}.template-card-menu-wrap{position:relative;margin-left:auto}.template-card-menu{position:absolute;right:0;top:calc(100% + 4px);min-width:120px;border:1px solid var(--border);border-radius:8px;background:var(--surface-panel);box-shadow:var(--shadow-sm);z-index:2}.template-card-menu-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--text);padding:8px 10px;font-size:13px;cursor:pointer}.template-card-menu-item:hover{background:var(--ghost-05)}.template-card-menu-item.danger{color:var(--danger-text)}.template-card-rename{width:100%;margin-bottom:4px;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text);border-radius:8px;padding:6px 8px}.template-save-view{display:flex;flex-direction:column;gap:12px;flex:1}.template-card.compact{width:fit-content;max-width:100%}.template-card.compact .template-card-body{padding:0;flex:0 0 auto;width:auto}.template-card.compact .template-card-title{font-size:12px;white-space:nowrap}.template-card.compact .template-card-meta{margin-bottom:4px;font-size:10px;white-space:nowrap}.template-card.compact .template-layout-schematic{width:48px;height:48px}.template-panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.template-section{display:flex;flex-direction:column;gap:8px}.template-section-title{margin:0;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.template-card-grid{display:flex;flex-wrap:wrap;gap:8px}.template-card-grid .template-card-actions .btn:not(.btn-icon){padding:3px 7px;font-size:11px}.template-custom-section{align-items:flex-start}.template-custom-panel{display:flex;flex-direction:row;align-items:center;gap:12px;width:fit-content;max-width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-sunken)}.template-custom-preview{width:128px;height:128px;flex-shrink:0;border-radius:8px;box-shadow:inset 0 0 0 1px var(--primary-soft-06)}.template-custom-controls{display:flex;flex-direction:column;justify-content:space-between;gap:4px;width:132px;height:128px;flex-shrink:0}.template-custom-range{display:flex;flex-direction:column;gap:2px}.template-custom-range-head{display:flex;align-items:center;justify-content:space-between;gap:6px;line-height:1.2}.template-custom-range-label{font-size:11px;color:var(--muted)}.template-custom-range input[type=range]{width:100%;margin:0;height:16px}.template-custom-range-value{color:var(--text);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.template-custom-meta{margin:0;font-size:10px;line-height:1.2;color:var(--muted)}.template-custom-apply{width:100%;padding:4px 8px;font-size:11px;line-height:1.2}.template-editor-stage{--template-ruler-size: 24px;--viewport-zoom: 1;--ruler-ui-scale: calc(1/max(var(--viewport-zoom), .001)) ;--unit-grid-line-width: calc(1px / var(--viewport-zoom, 1));display:grid;grid-template-columns:var(--template-ruler-size) max-content var(--template-ruler-size);grid-template-rows:var(--template-ruler-size) max-content var(--template-ruler-size);gap:0;flex-shrink:0;overflow:visible;background:transparent}.template-ruler-corner{width:var(--template-ruler-size);height:var(--template-ruler-size);background:transparent;pointer-events:none}.template-ruler-corner-tl{grid-column:1;grid-row:1}.template-ruler-corner-tr{grid-column:3;grid-row:1}.template-ruler-corner-bl{grid-column:1;grid-row:3}.template-ruler-corner-br{grid-column:3;grid-row:3}.template-ruler{position:relative;border:none;overflow:visible;background:transparent;cursor:grab}.workspace.panning .template-ruler{cursor:grabbing}.template-ruler-col{grid-column:2;grid-row:1}.template-ruler-row{grid-column:1;grid-row:2}.template-ruler-rail{pointer-events:auto;overflow:hidden;cursor:grab}.template-ruler-mirror.template-ruler-rail{overflow:visible}.workspace.panning .template-ruler-rail{cursor:grabbing}.template-ruler-rail-col{grid-column:2;grid-row:3}.template-ruler-rail-row{grid-column:3;grid-row:2}.template-editor-meta{margin:0;font-size:12px;color:var(--muted)}.template-editor-canvas-wrap{grid-column:2;grid-row:2;overflow:visible;justify-self:start;align-self:start}.template-ruler-baseline{position:absolute;z-index:1;pointer-events:none;background:var(--ruler-baseline)}.template-ruler-baseline-col{left:0;right:0;bottom:0;height:1px;transform:scaleY(var(--ruler-ui-scale, 1));transform-origin:center bottom}.template-ruler-baseline-row{top:0;bottom:0;right:0;width:1px;transform:scaleX(var(--ruler-ui-scale, 1));transform-origin:right center}.template-ruler-rail-col .template-ruler-baseline-col{top:0;bottom:auto;transform-origin:center top}.template-ruler-rail-row .template-ruler-baseline-row{left:0;right:auto;transform-origin:left center}.template-ruler-mark{position:absolute;z-index:1;pointer-events:none;background:var(--ruler-tick-minor);--ruler-tick-minor-len: calc(9px * var(--ruler-ui-scale, 1));--ruler-tick-major-len: calc(16px * var(--ruler-ui-scale, 1))}.template-ruler-mark-col{bottom:0;width:1px;height:var(--ruler-tick-minor-len);transform:translate(-50%) scaleX(var(--ruler-ui-scale, 1));transform-origin:center bottom}.template-ruler-mark-col.major{height:var(--ruler-tick-major-len);background:var(--ruler-tick-major)}.template-ruler-mark-row{right:0;height:1px;width:var(--ruler-tick-minor-len);transform:translateY(-50%) scaleY(var(--ruler-ui-scale, 1));transform-origin:right center}.template-ruler-mark-row.major{width:var(--ruler-tick-major-len);background:var(--ruler-tick-major)}.template-ruler-rail-col .template-ruler-mark-col{top:0;bottom:auto;transform-origin:center top}.template-ruler-rail-row .template-ruler-mark-row{left:0;right:auto;transform-origin:left center}.template-ruler-coordinate{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:9px;line-height:1;color:var(--ruler-coordinate);pointer-events:none;-webkit-user-select:none;user-select:none}.template-ruler-coordinate-col{bottom:13px;transform:translate(-50%) scale(var(--ruler-ui-scale))}.template-ruler-coordinate-row{right:13px;transform:translateY(-50%) scale(var(--ruler-ui-scale))}.template-ruler-segment-label{position:absolute;z-index:2;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:9px;font-weight:500;line-height:1;color:var(--ruler-label);pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.template-ruler-segment-label-col{top:50%;transform:translate(-50%,-50%) scale(var(--ruler-ui-scale))}.template-ruler-segment-label-row{left:50%;transform:translate(-50%,-50%) scale(var(--ruler-ui-scale))}.template-ruler-boundary-zone{position:absolute;z-index:3;touch-action:none;background:color-mix(in srgb,var(--primary) 8%,transparent);border-radius:4px}.template-ruler-boundary-zone-col{top:0;bottom:0;width:calc(20px * var(--ruler-ui-scale, 1));transform:translate(-50%);cursor:ew-resize;transition:left .16s ease}.template-ruler-boundary-zone-row{left:0;right:0;height:calc(20px * var(--ruler-ui-scale, 1));transform:translateY(-50%);cursor:ns-resize;transition:top .16s ease}.template-ruler-boundary-zone.dragging{transition:none}.template-ruler.is-dragging .template-ruler-boundary-zone,.template-editor-stage:has(.template-ruler-boundary-zone.dragging) .template-ruler-boundary-zone{transition:none}.template-ruler.is-dragging .template-ruler-boundary-zone-col,.template-ruler.is-dragging .template-ruler-boundary-zone-row{transition:none}.template-ruler-boundary-zone.outer{z-index:4}.template-ruler-boundary-zone.snapping.snap-transition{transition:left .18s ease,top .18s ease}.template-ruler-boundary-zone.local-seam-snap.active:before{background:var(--slot-editor-selected-line-color, var(--primary-soft-95));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent)}html[data-layout=phone] .template-ruler-boundary-zone.local-seam-snap.active:before,html[data-layout=tablet] .template-ruler-boundary-zone.local-seam-snap.active:before,html[data-pointer-coarse="1"] .template-ruler-boundary-zone.local-seam-snap.active:before{background:transparent;box-shadow:none}.template-ruler.is-dragging{-webkit-user-select:none;user-select:none}.template-ruler-boundary-zone.active:before{content:"";position:absolute;background:var(--primary-soft-12);pointer-events:none}.template-ruler-boundary-zone-col.active:before{top:0;bottom:0;left:50%;width:1px;transform:translate(-50%)}.template-ruler-boundary-zone-row.active:before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}.template-ruler-boundary-zone.armed:before{content:"";position:absolute;background:var(--primary);box-shadow:0 0 6px var(--primary-soft-55);pointer-events:none}.template-ruler-boundary-zone-col.armed:before{top:0;bottom:0;left:50%;width:2px;transform:translate(-50%)}.template-ruler-boundary-zone-row.armed:before{left:0;right:0;top:50%;height:2px;transform:translateY(-50%)}.template-ruler-control{position:absolute;pointer-events:none;opacity:0;background:var(--primary);box-shadow:0 0 0 1px var(--ruler-control-ring),0 0 0 2px var(--primary-soft-35);transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease,opacity .12s ease}.template-ruler-control-col{bottom:2px;left:50%;width:7px;height:16px;border-radius:3px;transform:translate(-50%) scale(var(--ruler-ui-scale))}.template-ruler-control-row{top:50%;right:2px;width:16px;height:7px;border-radius:3px;transform:translateY(-50%) scale(var(--ruler-ui-scale))}.template-ruler-boundary-zone.active .template-ruler-control,.template-ruler-boundary-zone.dragging .template-ruler-control{opacity:1;background:var(--primary-strong);box-shadow:0 0 0 1px var(--ruler-control-ring),0 0 6px var(--primary-soft-55)}.template-ruler-control-col:hover,.template-ruler-control-col.dragging{transform:translate(-50%) scale(var(--ruler-ui-scale),calc(var(--ruler-ui-scale) * 1.08))}.template-ruler-control-row:hover,.template-ruler-control-row.dragging{transform:translateY(-50%) scale(calc(var(--ruler-ui-scale) * 1.08),var(--ruler-ui-scale))}.template-ruler-mirror .template-ruler-control-col{top:2px;bottom:auto}.template-ruler-mirror .template-ruler-control-row{left:2px;right:auto}.template-ruler-mirror .template-ruler-control-col:hover,.template-ruler-mirror .template-ruler-control-col.dragging{transform:translate(-50%) scale(var(--ruler-ui-scale),calc(var(--ruler-ui-scale) * 1.08))}.template-ruler-mirror .template-ruler-control-row:hover,.template-ruler-mirror .template-ruler-control-row.dragging{transform:translateY(-50%) scale(calc(var(--ruler-ui-scale) * 1.08),var(--ruler-ui-scale))}html[data-layout=phone] .template-ruler-control,html[data-layout=tablet] .template-ruler-control,html[data-pointer-coarse="1"] .template-ruler-control{display:none}html[data-layout=tablet],html[data-pointer-coarse="1"]:not([data-layout=phone]){--ruler-boundary-extend: 38px}html[data-layout=phone] .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-col{top:calc(-30px * var(--ruler-ui-scale, 1));bottom:0}html[data-layout=tablet] .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-col,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-col{top:0;bottom:0}html[data-layout=phone] .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-row{left:calc(-30px * var(--ruler-ui-scale, 1));right:0}html[data-layout=tablet] .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-row,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-row{left:0;right:0}html[data-layout=phone] .template-ruler-mirror .template-ruler-boundary-zone-col{top:0;bottom:calc(-30px * var(--ruler-ui-scale, 1))}html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-col,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-col{top:0;bottom:0}html[data-layout=phone] .template-ruler-mirror .template-ruler-boundary-zone-row{left:0;right:calc(-30px * var(--ruler-ui-scale, 1))}html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-row,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-row{left:0;right:0}html[data-layout=phone] .template-ruler-boundary-zone-col:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translate(-50%);background:transparent;pointer-events:none}html[data-layout=phone] .template-ruler-boundary-zone-row:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:transparent;pointer-events:none}html[data-layout=tablet] .template-ruler-boundary-zone-col:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-boundary-zone-col:before{content:"";position:absolute;left:50%;width:1px;transform:translate(-50%) scaleX(var(--ruler-ui-scale, 1));transform-origin:center bottom;background:transparent;pointer-events:none}html[data-layout=tablet] .template-ruler-boundary-zone-row:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-boundary-zone-row:before{content:"";position:absolute;top:50%;height:1px;transform:translateY(-50%) scaleY(var(--ruler-ui-scale, 1));transform-origin:right center;background:transparent;pointer-events:none}html[data-layout=tablet] .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-col:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-col:before{top:auto;bottom:0;height:calc(var(--ruler-boundary-extend) * var(--ruler-ui-scale, 1));transform-origin:center bottom}html[data-layout=tablet] .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-row:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler:not(.template-ruler-mirror) .template-ruler-boundary-zone-row:before{left:auto;right:0;width:calc(var(--ruler-boundary-extend) * var(--ruler-ui-scale, 1));transform-origin:right center}html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-col:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-col:before{top:0;bottom:auto;height:calc(var(--ruler-boundary-extend) * var(--ruler-ui-scale, 1));transform-origin:center top}html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-row:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-row:before{left:0;right:auto;width:calc(var(--ruler-boundary-extend) * var(--ruler-ui-scale, 1));transform-origin:left center}html[data-layout=phone] .template-ruler-boundary-zone.active:before,html[data-layout=tablet] .template-ruler-boundary-zone.active:before,html[data-pointer-coarse="1"] .template-ruler-boundary-zone.active:before,html[data-layout=phone] .template-ruler-boundary-zone.dragging:before,html[data-layout=tablet] .template-ruler-boundary-zone.dragging:before,html[data-pointer-coarse="1"] .template-ruler-boundary-zone.dragging:before{background:transparent}html[data-layout=phone] .template-ruler-boundary-zone-col.active:before,html[data-layout=phone] .template-ruler-boundary-zone-col.dragging:before{width:2px}html[data-layout=tablet] .template-ruler-boundary-zone-col.active:before,html[data-layout=tablet] .template-ruler-boundary-zone-col.dragging:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-boundary-zone-col.active:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-boundary-zone-col.dragging:before{width:1px;top:auto;bottom:0;height:calc(var(--ruler-boundary-extend) * var(--ruler-ui-scale, 1))}html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-col.active:before,html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-col.dragging:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-col.active:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-col.dragging:before{top:0;bottom:auto}html[data-layout=phone] .template-ruler-boundary-zone-row.active:before,html[data-layout=phone] .template-ruler-boundary-zone-row.dragging:before{height:2px}html[data-layout=tablet] .template-ruler-boundary-zone-row.active:before,html[data-layout=tablet] .template-ruler-boundary-zone-row.dragging:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-boundary-zone-row.active:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-boundary-zone-row.dragging:before{height:1px;left:auto;right:0;width:calc(var(--ruler-boundary-extend) * var(--ruler-ui-scale, 1))}html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-row.active:before,html[data-layout=tablet] .template-ruler-mirror .template-ruler-boundary-zone-row.dragging:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-row.active:before,html[data-pointer-coarse="1"]:not([data-layout=phone]) .template-ruler-mirror .template-ruler-boundary-zone-row.dragging:before{left:0;right:auto}html[data-layout=phone] .template-ruler-boundary-zone.armed:before,html[data-layout=tablet] .template-ruler-boundary-zone.armed:before,html[data-pointer-coarse="1"] .template-ruler-boundary-zone.armed:before{background:var(--primary)}html[data-layout=phone] .template-ruler-boundary-zone-col.armed:before,html[data-layout=tablet] .template-ruler-boundary-zone-col.armed:before,html[data-pointer-coarse="1"] .template-ruler-boundary-zone-col.armed:before{width:3px}html[data-layout=phone] .template-ruler-boundary-zone-row.armed:before,html[data-layout=tablet] .template-ruler-boundary-zone-row.armed:before,html[data-pointer-coarse="1"] .template-ruler-boundary-zone-row.armed:before{height:3px}.template-ruler-append-zone{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;color:var(--ruler-append-fg);cursor:pointer}.template-ruler-append-zone-col{top:0;bottom:0;width:22px;transform:translate(-50%)}.template-ruler-append-zone-row{left:0;right:0;height:22px;transform:translateY(-50%)}.template-ruler-append-icon{width:14px;height:14px;opacity:0;transform:scale(calc(.85 * var(--ruler-ui-scale)));transition:opacity .14s ease,transform .14s ease}.template-ruler-append-zone:hover .template-ruler-append-icon,.template-ruler-append-zone.active .template-ruler-append-icon{opacity:1;transform:scale(var(--ruler-ui-scale))}.template-ruler-append-zone:hover,.template-ruler-append-zone.active{background:var(--primary-soft-10)}.template-ruler-segment-select{position:absolute;z-index:2;border:0;padding:0;margin:0;background:transparent;cursor:pointer;outline:none}.template-ruler-segment-select:focus,.template-ruler-segment-select:focus-visible{outline:none}.template-ruler-segment-select-col{top:0;bottom:0}.template-ruler-segment-select-row{left:0;right:0}.template-ruler-segment-select:hover{background:var(--ruler-selected-hover)}.template-ruler-segment-select.selected{background:var(--ruler-selected-bg)}.template-ruler-delete-zone{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:var(--danger-btn-bg);color:var(--danger-btn-fg);cursor:pointer;border-radius:4px;outline:none}.template-ruler-delete-zone-col{top:50%;width:20px;height:20px;transform:translate(-50%,-50%) scale(var(--ruler-ui-scale))}.template-ruler-delete-zone-row{left:50%;width:20px;height:20px;transform:translate(-50%,-50%) scale(var(--ruler-ui-scale))}.template-ruler-delete-icon{width:12px;height:12px}.template-ruler-delete-zone:hover:not(.disabled){background:var(--danger-btn-bg-hover);color:var(--danger-btn-fg-hover)}.template-ruler-delete-zone.disabled{opacity:.4;cursor:not-allowed}.template-ruler-insert-zone{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:var(--info-btn-bg);color:var(--text-bright);cursor:pointer;border-radius:4px;outline:none}.template-ruler-insert-zone:focus,.template-ruler-insert-zone:focus-visible,.template-ruler-delete-zone:focus,.template-ruler-delete-zone:focus-visible,.template-ruler-append-zone:focus,.template-ruler-append-zone:focus-visible{outline:none}.template-ruler-insert-zone-before-col,.template-ruler-insert-zone-after-col{top:4px;width:18px;height:18px;transform:translate(-50%) scale(var(--ruler-ui-scale))}.template-ruler-insert-zone-before-row,.template-ruler-insert-zone-after-row{left:4px;width:18px;height:18px;transform:translateY(-50%) scale(var(--ruler-ui-scale))}.template-ruler-insert-icon{width:12px;height:12px}.template-ruler-insert-zone:hover:not(.disabled){background:var(--info-btn-bg-hover);color:var(--info-btn-fg-hover)}.template-ruler-insert-zone.disabled{opacity:.4;cursor:not-allowed}.slot-editor-canvas{position:relative;box-sizing:border-box;border:none;background:var(--slot-editor-canvas-fill);overflow:visible;touch-action:none}.template-grid-size{display:grid;grid-template-columns:1fr 1fr;gap:8px}.template-grid-size label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.template-grid-size input[type=number]{border:1px solid var(--border);background:var(--surface-sunken);color:var(--text);border-radius:8px;padding:6px 8px}.template-split-n{display:flex;align-items:flex-end}.template-split-n label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:56px}.template-split-n input[type=number]{border:1px solid var(--border);background:var(--surface-sunken);color:var(--text);border-radius:8px;padding:6px 8px;width:100%}.template-merge-options{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.slot-editor-grid-line{position:absolute;background:var(--slot-editor-line-color, var(--primary-soft-38));pointer-events:none;z-index:3}.slot-editor-grid-line-active{z-index:5;background:var(--primary-soft-95)}.slot-editor-grid-line-active.dragging{transition:none}.slot-editor-grid-line-active.snapping.snap-transition{transition:left .18s ease,top .18s ease,right .18s ease,bottom .18s ease}.slot-editor-grid-line-active.local-seam-snap{background:var(--slot-editor-selected-line-color, var(--primary-soft-95));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent)}.slot-editor-boundary-hit.local-seam-snap.active:before{background:var(--slot-editor-selected-line-color, var(--primary-soft-95))}.slot-editor-grid-line-snap-host{z-index:6;background:var(--slot-editor-selected-line-color, var(--primary-soft-95));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 45%,transparent);pointer-events:none}.slot-editor-grid-line-v{top:0;bottom:0;width:1px;transform:translate(-50%) scaleX(calc(1 / var(--viewport-zoom, 1)));transform-origin:center center}.slot-editor-grid-line-h{left:0;right:0;height:1px;transform:translateY(-50%) scaleY(calc(1 / var(--viewport-zoom, 1)));transform-origin:center center}.slot-editor-slot-border-dim{--hairline-inv-zoom: calc(1 / var(--viewport-zoom, 1))}.slot-editor-hairline-h{height:1px!important;transform:translateY(-50%) scaleY(var(--hairline-inv-zoom));transform-origin:center center}.slot-editor-hairline-v{width:1px!important;transform:translate(-50%) scaleX(var(--hairline-inv-zoom));transform-origin:center center}.slot-editor-slot{position:absolute;box-sizing:border-box;border:none;background:var(--slot-bg);color:var(--slot-fg);cursor:pointer;padding:0;z-index:2;overflow:hidden;container-type:size;outline:none}.slot-editor-slot:focus,.slot-editor-slot:focus-visible{outline:none}.slot-editor-slot.selected .slot-editor-slot-content{outline:calc(2px / var(--viewport-zoom, 1)) solid var(--slot-editor-selected-line-color, var(--primary))}.slot-editor-slot-meta{position:absolute;right:calc(5px * var(--ruler-ui-scale, 1));bottom:calc(3px * var(--ruler-ui-scale, 1));font-size:calc(8px * var(--ruler-ui-scale, 1));font-weight:500;line-height:1;letter-spacing:.02em;color:var(--slot-meta-fg, rgba(26, 34, 51, .28));pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slot-editor-track-highlight{position:absolute;pointer-events:none;z-index:3;background:var(--primary-soft-10)}.slot-editor-slot-border-dim{position:absolute;background:var(--slot-editor-slot-border-color, var(--workspace-grid));pointer-events:none;z-index:3}.slot-editor-boundary-hit{position:absolute;z-index:12;touch-action:none;pointer-events:auto}.slot-editor-boundary-hit-col{top:0;bottom:0;width:10px;transform:translate(-50%);cursor:ew-resize}.slot-editor-boundary-hit-row{left:0;right:0;height:10px;transform:translateY(-50%);cursor:ns-resize}.slot-editor-boundary-hit-col.segmented{bottom:auto}.slot-editor-boundary-hit-row.segmented{right:auto}.slot-editor-grid-line-v.segmented{bottom:auto}.slot-editor-grid-line-h.segmented{right:auto}.slot-editor-boundary-hit.active:before{content:"";position:absolute;background:var(--primary-soft-95);pointer-events:none}.slot-editor-boundary-hit-col.active:before{top:0;bottom:0;left:50%;width:1px;transform:translate(-50%) scaleX(calc(1 / var(--viewport-zoom, 1)));transform-origin:center center}.slot-editor-boundary-hit-row.active:before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%) scaleY(calc(1 / var(--viewport-zoom, 1)));transform-origin:center center}.slot-editor-boundary-hit.armed:before{content:"";position:absolute;background:var(--primary);box-shadow:0 0 6px var(--primary-soft-55);pointer-events:none}.slot-editor-boundary-hit-col.armed:before{top:0;bottom:0;left:50%;width:2px;transform:translate(-50%) scaleX(calc(1 / var(--viewport-zoom, 1)));transform-origin:center center}.slot-editor-boundary-hit-row.armed:before{left:0;right:0;top:50%;height:2px;transform:translateY(-50%) scaleY(calc(1 / var(--viewport-zoom, 1)));transform-origin:center center}html[data-layout=phone] .slot-editor-boundary-hit-col.armed:before,html[data-layout=tablet] .slot-editor-boundary-hit-col.armed:before,html[data-pointer-coarse="1"] .slot-editor-boundary-hit-col.armed:before{width:3px}html[data-layout=phone] .slot-editor-boundary-hit-row.armed:before,html[data-layout=tablet] .slot-editor-boundary-hit-row.armed:before,html[data-pointer-coarse="1"] .slot-editor-boundary-hit-row.armed:before{height:3px}.slot-editor-boundary-hit.dragging{transition:none}.slot-editor-canvas.scissor-mode .slot-editor-boundary-hit,.canvas-template-editor.layer-drag-active .slot-editor-boundary-hit,.workspace.layer-move-active .slot-editor-boundary-hit{pointer-events:none}.slot-editor-marquee{position:absolute;box-sizing:border-box;border:1px solid var(--marquee-border);background:var(--primary-soft-06);pointer-events:none;z-index:5}.slot-editor-canvas.multi-select{cursor:default}.slot-editor-canvas.scissor-mode{cursor:crosshair}.slot-editor-canvas.scissor-mode .slot-editor-slot{pointer-events:none}.slot-editor-canvas.scissor-mode .slot-editor-slot.scissor-target{box-shadow:inset 0 0 0 1px var(--scissor-target-ring)}.slot-editor-canvas.scissor-mode .slot-editor-slot-content,.slot-editor-canvas.scissor-mode .slot-editor-slot-content *{pointer-events:none}.slot-editor-scissor-lines{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;--hairline-inv-zoom: calc(1 / var(--viewport-zoom, 1))}.slot-editor-scissor-veil{position:absolute;z-index:0;background:var(--scissor-veil);pointer-events:none}.slot-editor-scissor-line{position:absolute;z-index:1;box-sizing:border-box;pointer-events:auto;cursor:crosshair}.slot-editor-scissor-line-visual{position:absolute;background:var(--scissor-line);pointer-events:none}.slot-editor-scissor-line.pending .slot-editor-scissor-line-visual{background:var(--scissor-line-pending)}.slot-editor-scissor-intersection{position:absolute;z-index:2;pointer-events:auto;cursor:crosshair}.slot-editor-scissor-cross-arm{position:absolute;background:var(--scissor-line-strong);pointer-events:none}.slot-editor-slot-label{position:absolute;top:4px;left:6px;font-size:12px;font-weight:700}.slot-editor-slot-resize{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:3px;border:1px solid var(--primary-soft-90);background:var(--primary);cursor:nwse-resize}.slot-editor-slot-content{position:absolute;overflow:hidden;pointer-events:none;container-type:size}.slot-editor-slot-content .canvas-template-layer,.slot-editor-slot-content .slot-add-image-btn{pointer-events:auto}.canvas-template-editor{position:absolute;z-index:3;pointer-events:auto;overflow:visible}.canvas-template-editor.start-outer-snap-transition{transition:left .18s ease,top .18s ease}.canvas-template-zoom-wrap{position:absolute;left:0;top:0;z-index:3;pointer-events:none}.workspace.canvas-template-active .layers{z-index:5}.layer-drag-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none}.layer.dragging{opacity:.72}.workspace.canvas-template-active .layer.dragging{z-index:2000!important}.slot-editor-slot.drop-hover{background:var(--primary-soft-14);box-shadow:inset 0 0 0 2px var(--marquee-border)}.canvas-template-editor.layer-drag-active .slot-editor-slot.drop-hover{z-index:7}.canvas-template-zoom-wrap .canvas-template-editor,.canvas-template-grid-stage{pointer-events:auto}.canvas-template-layer{position:absolute}.canvas-template-layer img{width:100%;height:100%;object-fit:cover;pointer-events:none}.workspace.canvas-template-active .canvas-slots{display:none}.slot-selection-menu-anchor-point{position:absolute;width:0;height:0;pointer-events:none}.slot-selection-menu-floating{position:fixed;z-index:3500;transform:translate(-50%,4px);pointer-events:auto}body:has(.workspace.layer-move-active) .slot-selection-menu-floating,body:has(.canvas-template-editor.layer-drag-active) .slot-selection-menu-floating,body:has(.workspace.layer-move-active) .slot-selection-insert-floating,body:has(.canvas-template-editor.layer-drag-active) .slot-selection-insert-floating{opacity:.04;pointer-events:none}.slot-selection-insert-floating{position:fixed;z-index:3490;pointer-events:auto}.slot-selection-insert-floating-top{transform:translate(-50%,calc(-100% - 4px))}.slot-selection-insert-floating-left{transform:translate(calc(-100% - 4px),-50%)}.slot-selection-insert-floating-right{transform:translate(4px,-50%)}.slot-selection-menu-btn:disabled{opacity:.35;cursor:default;pointer-events:none}.slot-selection-menu{--slot-selection-menu-pad: 2px;--slot-selection-menu-btn-size: 22px;--slot-selection-menu-outer-size: calc( var(--slot-selection-menu-btn-size) + var(--slot-selection-menu-pad) * 2 + 2px );display:flex;flex-direction:row;align-items:center;gap:1px;padding:var(--slot-selection-menu-pad);border-radius:7px;border:1px solid color-mix(in srgb,var(--slot-editor-selected-line-color, var(--primary)) 55%,var(--border));background:var(--surface-elevated, #fff);box-shadow:0 0 0 1px color-mix(in srgb,#000 6%,transparent),0 4px 14px color-mix(in srgb,#000 18%,transparent),0 1px 3px color-mix(in srgb,#000 10%,transparent);color:var(--text-bright, var(--text))}.slot-selection-menu-stack{display:flex;flex-direction:column;align-items:stretch;gap:4px}.slot-selection-scale{display:flex;align-items:center;gap:8px;margin:0;padding:4px 8px;border-radius:7px;border:1px solid color-mix(in srgb,var(--slot-editor-selected-line-color, var(--primary)) 55%,var(--border));background:var(--chrome-frost-bg, var(--surface-elevated, #fff));-webkit-backdrop-filter:var(--chrome-frost-blur, blur(6px));backdrop-filter:var(--chrome-frost-blur, blur(6px));color:var(--muted);font-size:11px}.slot-selection-scale input[type=range]{flex:1 1 auto;min-width:72px;accent-color:var(--primary);touch-action:none}.slot-selection-scale-value{flex:0 0 auto;min-width:2.75em;text-align:right;font-variant-numeric:tabular-nums}.slot-selection-insert-floating .slot-selection-menu,.slot-selection-menu.slot-selection-menu--compact{padding:0;width:calc(var(--slot-selection-menu-outer-size) - var(--slot-selection-menu-pad) * 2);height:calc(var(--slot-selection-menu-outer-size) - var(--slot-selection-menu-pad) * 2);border-radius:5px;justify-content:center}.slot-selection-insert-floating .slot-selection-menu>.tooltip-wrap,.slot-selection-menu.slot-selection-menu--compact>.tooltip-wrap{display:flex;width:100%;height:100%;max-width:none;align-items:center;justify-content:center}.slot-selection-insert-floating .slot-selection-menu-btn,.slot-selection-menu.slot-selection-menu--compact .slot-selection-menu-btn{width:100%;height:100%;border-radius:inherit}.slot-selection-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--slot-selection-menu-btn-size);height:var(--slot-selection-menu-btn-size);margin:0;padding:0;border:none;border-radius:5px;background:transparent;color:var(--text-bright, var(--text));cursor:pointer;opacity:1}.slot-selection-menu-btn:hover,.slot-selection-menu-btn:focus-visible{background:color-mix(in srgb,var(--slot-editor-selected-line-color, var(--primary)) 18%,transparent);outline:none;color:var(--slot-editor-selected-line-color, var(--primary))}.slot-selection-menu-btn.danger{color:var(--danger, #c62828)}.slot-selection-menu-btn.danger:hover,.slot-selection-menu-btn.danger:focus-visible{background:color-mix(in srgb,var(--danger, #c62828) 16%,transparent)}.gap-bg-controls{display:inline-flex;align-items:stretch;gap:6px;flex-shrink:0}.gap-bg-swatch{width:34px;min-width:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:var(--chrome-glass);color:var(--muted);cursor:pointer}.gap-bg-swatch--transparent{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#fff}.gap-bg-swatch[aria-pressed=true]{border-color:var(--primary)}.gap-bg-swatch[aria-pressed=true]:not(.gap-bg-swatch--filled){color:var(--primary)}.workspace.slot-bg-reserve-phone{box-sizing:border-box;padding-bottom:min(50vh,420px)}.workspace.slot-bg-reserve-side{box-sizing:border-box;padding-right:min(280px,32vw)}.slot-bg-panel-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3600;pointer-events:none}.slot-bg-panel-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;border:0;padding:0;margin:0;background:#00000047;cursor:pointer;pointer-events:auto}.slot-bg-panel{position:absolute;z-index:1;display:flex;flex-direction:column;gap:12px;padding:12px 14px 16px;background:var(--panel, var(--surface, #fff));color:var(--text);border:1px solid var(--border);box-shadow:0 8px 28px #0000002e;pointer-events:auto;touch-action:auto;overflow:auto}.slot-bg-panel-root--phone .slot-bg-panel{left:0;right:0;bottom:0;height:min(50vh,420px);padding-bottom:max(16px,env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0}.slot-bg-panel-root--side .slot-bg-panel{top:0;right:0;bottom:0;width:min(280px,32vw);border-radius:0}.slot-bg-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.slot-bg-panel-title{margin:0;font-size:14px;font-weight:600}.slot-bg-panel-close{min-width:28px;min-height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}.slot-bg-presets{display:flex;flex-wrap:wrap;gap:6px}.slot-bg-swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);padding:0;cursor:pointer}.slot-bg-swatch.selected{outline:2px solid var(--primary);outline-offset:1px}.slot-bg-swatch--transparent{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#fff}.slot-bg-hint{margin:0;font-size:12px;color:var(--muted)}.slot-bg-picker{min-height:0}.slot-bg-picker :global(.color-picker){width:100%}html[data-layout=phone] .gap-bg-controls,.app-shell[data-layout=phone] .gap-bg-controls{flex-direction:column;align-items:center;gap:4px}html[data-layout=phone] .gap-bg-swatch,.app-shell[data-layout=phone] .gap-bg-swatch{width:28px;min-width:28px;height:28px;border-radius:8px}