*,*: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);--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);--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}body{font-family:SF Pro Text,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}.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)}.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: 500px}.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-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)}}.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:16px;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;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}.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}.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 input[type=range]{width:88px;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}.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}.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}.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}.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}@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.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}.template-ruler-boundary-zone-col{top:0;bottom:0;width:18px;transform:translate(-50%);cursor:ew-resize;transition:left .16s ease}.template-ruler-boundary-zone-row{left:0;right:0;height:18px;transform:translateY(-50%);cursor:ns-resize;transition:top .16s ease}.template-ruler-boundary-zone.dragging{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)}.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-control{position:absolute;pointer-events:none;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}.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{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))}.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:6;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.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-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)}