:root{--accent: #1F5EFF;--accent-hover: #1A4FDB;--accent-press: #1743C2;--accent-soft: #E9F0FF;--accent-softer: #F5F8FF;--accent-ring: rgba(31, 94, 255, .18);--accent-line: rgba(31, 94, 255, .55);--bg: #ffffff;--bg-canvas: #f6f6f7;--bg-panel: #ffffff;--bg-sunken: #fbfbfc;--bg-hover: #f4f4f5;--bg-active: #efeef1;--ink: #18181b;--ink-2: #52525b;--ink-3: #8e8e96;--ink-4: #b8b8bf;--line: #e5e7eb;--line-2: #eeeef0;--line-strong: #d8d8dd;--shadow-sm: 0 1px 2px rgba(24, 24, 27, .04), 0 1px 1px rgba(24, 24, 27, .03);--shadow-md: 0 4px 14px rgba(24, 24, 27, .06), 0 1px 3px rgba(24, 24, 27, .04);--shadow-lg: 0 12px 40px rgba(24, 24, 27, .1), 0 2px 8px rgba(24, 24, 27, .05);--shadow-pop: 0 18px 60px rgba(24, 24, 27, .16), 0 4px 12px rgba(24, 24, 27, .06);--r-sm: 8px;--r-md: 11px;--r-lg: 14px;--r-xl: 18px;--r-pill: 999px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--mono: "Inter", ui-monospace, "SF Mono", Menlo, monospace;--fs-11: 11px;--fs-12: 12px;--fs-13: 13px;--fs-14: 14px;--fs-16: 16px;--ease: cubic-bezier(.22, .61, .36, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--t-fast: .14s;--t: .2s;--t-slow: .32s;--rail: 104px;--topbar: 54px;--statusbar: 32px;--panel-w: 280px;--select: var(--accent);--handle: #ffffff}@supports (font-variation-settings: normal){:root{--font: "Inter var", "Inter", system-ui, sans-serif}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font);font-size:var(--fs-13);color:var(--ink);background:var(--bg-canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv05" 1,"ss01" 1,"calt" 1;-webkit-user-select:none;user-select:none;cursor:default}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font-family:inherit}::selection{background:var(--accent-soft)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d9d9de;border-radius:999px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#c4c4cb;border:3px solid transparent;background-clip:content-box}.app{display:grid;grid-template-columns:var(--rail) 1fr var(--panel-w);grid-template-rows:var(--topbar) 1fr var(--statusbar);grid-template-areas:"rail top top" "rail stage panel" "rail status status";height:100%;width:100%;background:var(--bg)}.app.embed{grid-template-columns:1fr;grid-template-rows:48px 1fr;grid-template-areas:"ebar" "stage";overflow:hidden}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:18px;padding:0 5px;font-size:11px;font-weight:500;color:var(--ink-3);background:var(--bg-sunken);border:1px solid var(--line-2);border-radius:5px;font-feature-settings:"tnum" 1}.divider{height:1px;background:var(--line-2);margin:6px 0}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-md);color:var(--ink-2);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.icon-btn:hover{background:var(--bg-hover);color:var(--ink)}.icon-btn:active{transform:scale(.94)}.icon-btn.on{background:var(--accent-soft);color:var(--accent)}@keyframes pop-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes snap-flash{0%{opacity:0}30%{opacity:1}to{opacity:0}}.rail{grid-area:rail;display:flex;flex-direction:column;align-items:center;background:var(--bg);border-right:1px solid var(--line);padding:12px 12px 14px;gap:6px;z-index:30}.rail-logo{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:8px;border-radius:var(--r-md);background:var(--accent-softer);box-shadow:inset 0 0 0 1px var(--accent-ring)}.rail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}.rail-sep{width:100%;height:1px;background:var(--line-2);margin:8px 0 2px}.fillstroke{display:flex;flex-direction:column;align-items:center;gap:9px;padding:4px 0 0}.fillstroke.is-disabled{opacity:.55}.fs-stack{position:relative;width:42px;height:42px}.fs-swatch{position:absolute;width:25px;height:25px;border-radius:6px;box-shadow:inset 0 0 0 1px #18181b1f,var(--shadow-sm);transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.fs-swatch:active{transform:scale(.92)}.fs-fill{top:0;left:0;z-index:2;background:#18181b}.fs-stroke{bottom:0;right:0;z-index:1;background:var(--p, transparent)}.fs-stroke:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:var(--bg);border-radius:2px}.fs-swatch.on{z-index:3;box-shadow:inset 0 0 0 1px #18181b1f,0 0 0 2px var(--bg),0 0 0 4px var(--accent)}.fs-none-slash{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;overflow:hidden;z-index:4}.fs-none-slash:after{content:"";position:absolute;top:50%;left:-3px;right:-3px;height:1.5px;background:#ef4444;transform:rotate(-45deg)}.fs-swap{position:absolute;top:-3px;right:-7px;z-index:5;width:17px;height:17px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);border-radius:5px;background:var(--bg);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.fs-swap:hover{color:var(--accent);background:var(--accent-soft)}.fs-mini{display:flex;gap:7px;align-items:center}.fs-default,.fs-none{position:relative;width:16px;height:16px;border-radius:4px;transition:transform var(--t-fast) var(--ease)}.fs-default:hover,.fs-none:hover{transform:scale(1.12)}.fs-def-fill{position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:2px;background:#fff;z-index:2;box-shadow:0 0 0 1px var(--line-strong)}.fs-def-stroke{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:2px;background:#fff;box-shadow:inset 0 0 0 2px #000;z-index:1}.fs-none-glyph{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--bg)}.fs-none-glyph:after{content:"";position:absolute;top:50%;left:0;right:0;height:1.5px;background:#ef4444;transform:rotate(-45deg)}.tool{position:relative;width:100%;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--ink-2);transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease)}.tool:hover{background:var(--bg-hover);color:var(--ink)}.tool:hover svg{transform:scale(1.06)}.tool svg{transition:transform var(--t) var(--ease-out)}.tool:active{transform:scale(.9)}.tool.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px #1f5eff47,inset 0 1px #ffffff29}.tool.active:hover{background:var(--accent-hover);color:#fff}.tool.has-flyout .flyout-tri{position:absolute;right:4px;bottom:4px;width:0;height:0;border-style:solid;border-width:0 0 5px 5px;border-color:transparent transparent var(--ink-4) transparent}.tool.has-flyout.active .flyout-tri{border-bottom-color:#ffffffb3}.flyout{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:6px;z-index:210;min-width:230px;animation:pop-in .16s var(--ease-out)}.flyout-item{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-13);text-align:left;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.flyout-item svg{color:var(--ink-2);flex-shrink:0}.flyout-item:hover{background:var(--accent-soft);color:var(--accent)}.flyout-item:hover svg{color:var(--accent)}.flyout-item.on{background:var(--accent-soft);color:var(--accent)}.flyout-item.on svg{color:var(--accent)}.flyout-label{flex:1}.flyout-key{font-size:var(--fs-11);color:var(--ink-3);font-weight:500}.flyout-item:hover .flyout-key,.flyout-item.on .flyout-key{color:var(--accent)}.artboard-pop{min-width:230px;padding:12px}.artboard-pop-title{font-size:var(--fs-11);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}.artboard-pop-row{display:flex;gap:8px;margin-bottom:10px}.artboard-pop-row>*{flex:1}.artboard-pop-presets{display:flex;flex-direction:column;gap:2px}.artboard-pop-presets button{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-12);font-weight:500;color:var(--ink);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.artboard-pop-presets button:hover{background:var(--bg-hover)}.artboard-pop-presets button.on{background:var(--accent-soft);color:var(--accent)}.artboard-pop-presets .dim{color:var(--ink-3);font-feature-settings:"tnum" 1}.artboard-pop-presets button.on .dim{color:var(--accent)}.tool-tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;background:var(--ink);color:#fff;font-size:var(--fs-12);font-weight:500;padding:6px 9px;border-radius:var(--r-sm);box-shadow:var(--shadow-md);pointer-events:none;z-index:100;animation:tip-in .14s var(--ease-out)}@keyframes tip-in{0%{opacity:0;transform:translateY(-50%) translate(-4px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.tool-tip:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--ink)}.tool-tip-key{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;background:#ffffff29;border-radius:4px;font-size:11px}.topbar{grid-area:top;display:flex;align-items:center;padding:0 14px 0 16px;background:var(--bg);border-bottom:1px solid var(--line);z-index:20}.topbar-left,.topbar-right{display:flex;align-items:center;gap:5px;flex-shrink:0}.topbar-center{flex:1;min-width:0;display:flex;justify-content:center;overflow:hidden}.topbar-divider{width:1px;height:20px;background:var(--line-2);margin:0 6px}.file-name{display:flex;align-items:center;gap:4px;font-size:var(--fs-13);font-weight:550;color:var(--ink);padding:5px 9px;border-radius:var(--r-sm);transition:background var(--t-fast) var(--ease)}.file-name:hover{background:var(--bg-hover)}.file-name svg{color:var(--ink-3)}.file-name-input{font-size:var(--fs-13);font-weight:550;color:var(--ink);padding:5px 9px;border:1px solid var(--accent);border-radius:var(--r-sm);outline:none;background:var(--bg);width:180px}.ctx-label{font-size:var(--fs-12);color:var(--ink-2);font-weight:500;white-space:nowrap;padding:4px 11px;background:var(--bg-sunken);border:1px solid var(--line-2);border-radius:var(--r-pill)}.cmd-pill{display:flex;align-items:center;gap:7px;height:30px;padding:0 9px 0 10px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink-3);font-size:var(--fs-12);font-weight:450;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.cmd-pill:hover{background:var(--bg);border-color:var(--line-strong)}.cmd-pill span:nth-child(2){color:var(--ink-2)}.btn-primary{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;background:var(--accent);color:#fff;border-radius:var(--r-md);font-size:var(--fs-12);font-weight:550;box-shadow:0 1px 2px #1f5eff4d,inset 0 1px #ffffff1f;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease)}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{transform:scale(.97)}.btn-ghost{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--bg-sunken);color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-12);font-weight:550;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.btn-ghost:hover{background:var(--bg-hover);color:var(--ink);border-color:var(--line-strong)}.btn-ghost:active{transform:scale(.97)}.icon-btn:disabled{opacity:.32;pointer-events:none}.export-wrap{position:relative;margin-left:4px}.export-menu{position:absolute;top:calc(100% + 8px);right:0;width:180px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:6px;z-index:80;animation:pop-in .18s var(--ease-out)}.export-menu.floating{position:fixed;top:auto;right:auto;z-index:210}.export-scope{font-size:var(--fs-11);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);padding:4px 10px 7px}.export-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-13);font-weight:500;color:var(--ink);transition:background var(--t-fast) var(--ease)}.export-menu button:hover{background:var(--accent-soft);color:var(--accent)}.export-menu .hint{font-size:var(--fs-11);color:var(--ink-3);font-weight:450}.export-menu button:hover .hint{color:var(--accent)}.overlay-catch{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70}.stage-area{position:relative;overflow:hidden;background:var(--bg-canvas)}.stage{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 1px 1px,rgba(24,24,27,.045) 1px,transparent 0);background-size:22px 22px;background-color:var(--bg-canvas)}.canvas-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.zoom-badge{position:absolute;left:14px;bottom:14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px;font-size:var(--fs-11);font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-sm);font-feature-settings:"tnum" 1;pointer-events:none}.text-editor{position:absolute;z-index:40;background:transparent;border:none;outline:none;resize:none;overflow:hidden;font-family:var(--font);padding:0;margin:0;caret-color:var(--accent);white-space:pre;box-sizing:content-box}.right-col{display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--line);overflow:hidden;z-index:20}.right-divider{height:1px;background:var(--line);flex-shrink:0}.panel{display:flex;flex-direction:column;min-height:0}.props{flex:1;min-height:0}.panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:10px}.section{border-bottom:1px solid var(--line-2);padding:13px 14px 15px}.section-head{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-11);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}.section-body{display:flex;flex-direction:column;gap:8px}.ctrl-row{display:flex;gap:8px}.ctrl-row>*{flex:1;min-width:0}.numfield{display:flex;align-items:center;gap:2px;height:30px;padding:0 6px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.numfield:focus-within{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px var(--accent-ring)}.numfield.disabled{opacity:.4}.numfield-label{display:flex;align-items:center;justify-content:center;min-width:16px;height:22px;padding:0 2px;color:var(--ink-3);font-size:var(--fs-12);font-weight:500;-webkit-user-select:none;user-select:none;flex-shrink:0}.numfield input{flex:1;min-width:0;width:100%;border:none;background:none;outline:none;font-size:var(--fs-12);color:var(--ink);font-weight:500;font-feature-settings:"tnum" 1;padding:0 2px}.numfield-suffix{color:var(--ink-3);font-size:var(--fs-11)}.numfield-spacer{flex:1}.lock-ratio{flex:0 0 auto!important;width:26px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--ink-3);transition:all var(--t-fast) var(--ease)}.lock-ratio:hover{background:var(--bg-hover);color:var(--ink-2)}.lock-ratio.on{background:var(--accent-soft);color:var(--accent)}.xform-grid{display:grid;grid-template-columns:1fr 1fr 30px;gap:8px;align-items:center}.xform-grid>.lock-ratio,.xform-grid>.corner-toggle{justify-self:center}.corner-toggle{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--ink-3);border:1px solid transparent;transition:all var(--t-fast) var(--ease)}.corner-toggle:hover{background:var(--bg-hover);color:var(--ink-2)}.corner-toggle.on{background:var(--accent-soft);color:var(--accent)}.segmented{display:flex;padding:2px;gap:2px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);height:30px}.segmented button{flex:1;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink-3);font-size:var(--fs-12);font-weight:500;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.segmented button:hover{color:var(--ink)}.segmented button.on{background:var(--bg);color:var(--accent);box-shadow:var(--shadow-sm)}.slider{position:relative;height:22px;flex:1;cursor:pointer;display:flex;align-items:center}.slider-track{position:absolute;left:0;right:0;height:4px;background:var(--line);border-radius:999px}.slider-fill{position:absolute;left:0;height:4px;background:var(--accent);border-radius:999px}.slider-knob{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);transform:translate(-50%);box-shadow:var(--shadow-sm);transition:transform var(--t-fast) var(--ease)}.slider:hover .slider-knob{transform:translate(-50%) scale(1.12)}.alignto{display:flex;gap:2px;padding:2px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:7px}.alignto button{height:19px;padding:0 7px;border-radius:5px;font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3);transition:all var(--t-fast) var(--ease)}.alignto button:hover{color:var(--ink)}.alignto button.on{background:var(--bg);color:var(--accent);box-shadow:var(--shadow-sm)}.alignto button.key.on{background:var(--accent);color:#fff}.align-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.align-btn{height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--ink-2);background:var(--bg-sunken);border:1px solid transparent;transition:all var(--t-fast) var(--ease)}.align-btn:hover{background:var(--accent-soft);color:var(--accent)}.align-btn:active{transform:scale(.92)}.bool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.bool-btn{height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--ink-2);background:var(--bg-sunken);border:1px solid var(--line);transition:all var(--t) var(--ease)}.bool-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-ring);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.bool-btn:active{transform:translateY(0) scale(.96)}.ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r-sm);background:var(--bg-sunken);border:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-12);font-weight:500;transition:all var(--t-fast) var(--ease)}.ghost-btn:hover{background:var(--bg-hover);color:var(--ink);border-color:var(--line-strong)}.arrange-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.arrange-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.appearance-stack{display:flex;flex-direction:column;gap:8px}.opacity-row{display:flex;align-items:center;gap:10px;margin-top:4px}.op-label{font-size:var(--fs-12);color:var(--ink-2);width:46px;flex-shrink:0}.op-val{font-size:var(--fs-12);color:var(--ink-2);width:36px;text-align:right;font-feature-settings:"tnum" 1}.stroke-block{display:flex;flex-direction:column;gap:8px}.font-select{position:relative;margin-bottom:8px}.font-select select{width:100%;height:32px;padding:0 28px 0 10px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-13);color:var(--ink);font-weight:500;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.font-select select:focus{border-color:var(--accent)}.font-select>svg{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}.font-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}.font-row .font-select{flex:1;margin-bottom:0}.font-upload{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);transition:all var(--t-fast) var(--ease)}.font-upload:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent)}.weight-select{flex:1;position:relative}.weight-select.grow2{flex:1.8}.weight-select select{width:100%;height:30px;padding:0 26px 0 9px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-12);color:var(--ink);font-weight:500;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.weight-select select:focus{border-color:var(--accent)}.weight-select>svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}.style-toggles{display:flex;gap:2px;padding:2px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);height:30px;flex-shrink:0}.style-toggles button{width:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink-2);font-size:var(--fs-14);transition:all var(--t-fast) var(--ease)}.style-toggles button:hover{color:var(--ink);background:var(--bg-hover)}.style-toggles button.on{background:var(--bg);color:var(--accent);box-shadow:var(--shadow-sm)}.preset-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}.preset-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-12);font-weight:500;color:var(--ink);transition:background var(--t-fast) var(--ease)}.preset-row:hover{background:var(--bg-hover)}.preset-dim{color:var(--ink-3);font-feature-settings:"tnum" 1}.props-empty{padding:30px 22px;text-align:center}.props-empty-glyph{width:44px;height:44px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--accent-softer);color:var(--accent);border-radius:var(--r-lg)}.props-empty p{font-size:var(--fs-12);color:var(--ink-3);line-height:1.55}.paintfield{position:relative}.paint-swatch-row{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 8px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.paint-swatch-row:hover{border-color:var(--line-strong);background:var(--bg)}.paint-chip{width:18px;height:18px;border-radius:5px;flex-shrink:0;box-shadow:inset 0 0 0 1px #00000014;background-image:linear-gradient(45deg,#e3e3e6 25%,transparent 25%),linear-gradient(-45deg,#e3e3e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e3e6 75%),linear-gradient(-45deg,transparent 75%,#e3e3e6 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;position:relative;overflow:hidden}.paint-none{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff}.paint-none:after{content:"";position:absolute;top:50%;left:-2px;right:-2px;height:1.5px;background:#ef4444;transform:rotate(-45deg);transform-origin:center}.paint-name{flex:1;text-align:left;font-size:var(--fs-12);font-weight:500;color:var(--ink);font-feature-settings:"tnum" 1}.paint-tag{font-size:var(--fs-11);color:var(--ink-3)}.paint-popover{position:absolute;top:calc(100% + 8px);right:0;width:244px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:12px;z-index:80;animation:pop-in .18s var(--ease-out)}.paint-popover.floating{position:fixed;top:auto;right:auto;max-height:calc(100vh - 16px);overflow-y:auto;z-index:210}.paint-types{display:flex;gap:3px;padding:3px;background:var(--bg-sunken);border-radius:var(--r-sm);margin-bottom:12px}.paint-types button{flex:1;height:26px;border-radius:6px;font-size:var(--fs-12);font-weight:500;color:var(--ink-3);transition:all var(--t-fast) var(--ease)}.paint-types button:hover{color:var(--ink)}.paint-types button.on{background:var(--bg);color:var(--accent);box-shadow:var(--shadow-sm)}.grad-editor{margin-bottom:12px}.grad-bar{position:relative;height:22px;border-radius:6px;margin-bottom:12px;box-shadow:inset 0 0 0 1px #00000014}.grad-stop{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 1px 3px #0000004d}.grad-stop.on{outline:2px solid var(--accent);outline-offset:1px}.grad-angle{display:flex;align-items:center;gap:8px}.grad-angle span:first-child{font-size:var(--fs-12);color:var(--ink-2);width:38px}.grad-angle-val{font-size:var(--fs-11);color:var(--ink-3);width:30px;text-align:right}.colorpicker{display:flex;flex-direction:column;gap:10px}.cp-square{position:relative;width:100%;height:132px;border-radius:var(--r-sm);cursor:crosshair;box-shadow:inset 0 0 0 1px #00000014}.cp-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000059;pointer-events:none}.cp-sliders{display:flex;flex-direction:column;gap:10px}.cp-hue,.cp-alpha{position:relative;height:12px;border-radius:999px;cursor:pointer}.cp-hue{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cp-alpha{background-image:linear-gradient(to right,transparent,var(--c)),linear-gradient(45deg,#e3e3e6 25%,transparent 25%),linear-gradient(-45deg,#e3e3e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e3e6 75%),linear-gradient(-45deg,transparent 75%,#e3e3e6 75%);background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px}.cp-hue-knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 3px #0000004d;border:1px solid rgba(0,0,0,.06);pointer-events:none}.cp-inputs{display:flex;gap:8px}.cp-hex{flex:1;display:flex;align-items:center;gap:2px;height:30px;padding:0 8px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm)}.cp-hex span{color:var(--ink-3);font-size:var(--fs-12)}.cp-hex input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--fs-12);font-weight:500;text-transform:uppercase;color:var(--ink)}.cp-alpha-num{display:flex;align-items:center;width:64px;height:30px;padding:0 8px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm)}.cp-alpha-num input{width:100%;border:none;background:none;outline:none;font-size:var(--fs-12);font-weight:500;color:var(--ink)}.cp-alpha-num span{color:var(--ink-3);font-size:var(--fs-11)}.cp-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.cp-swatch{aspect-ratio:1;border-radius:6px;transition:transform var(--t-fast) var(--ease)}.cp-swatch:hover{transform:scale(1.12)}.layers{height:32%;min-height:150px;max-height:42%;display:flex;flex-direction:column}.layers-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 9px 16px;flex-shrink:0;font-size:var(--fs-11);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}.layers-head-right{display:flex;align-items:center;gap:8px}.layers-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;background:var(--bg-sunken);border-radius:999px;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:0}.layers-add{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-sm);color:var(--ink-2);background:var(--bg-sunken);border:1px solid var(--line);transition:all var(--t) var(--ease)}.layers-add:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 2px 6px #1f5eff4d}.layers-add:active{transform:translateY(0) scale(.92)}.layers-list{flex:1;overflow-y:auto;padding:0 6px 8px}.layers-empty{padding:24px;text-align:center;color:var(--ink-4);font-size:var(--fs-12)}.layer-row{display:flex;align-items:center;gap:6px;height:32px;padding-right:6px;border-radius:var(--r-sm);cursor:default;position:relative;transition:background var(--t-fast) var(--ease)}.layer-row:hover{background:var(--bg-hover)}.layer-row:hover .layer-toggle{opacity:1}.layer-row.sel{background:var(--accent-soft)}.layer-row.sel .layer-name{color:var(--accent);font-weight:550}.layer-row.sel .layer-icon{color:var(--accent)}.layer-row.dragging{opacity:.4}.layer-row.drop-inside{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}.layer-drop-line{position:absolute;left:6px;right:6px;height:2px;background:var(--accent);border-radius:2px;z-index:2;pointer-events:none}.layer-drop-line:before{content:"";position:absolute;left:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--accent)}.layer-drop-line.top{top:-1px}.layer-drop-line.bottom{bottom:-1px}.layer-twist{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);border-radius:4px;flex-shrink:0}.layer-twist:hover{background:#0000000f}.layer-twist-spacer{width:16px;flex-shrink:0}.layer-icon{color:var(--ink-2);display:flex;flex-shrink:0}.layer-name{flex:1;min-width:0;font-size:var(--fs-13);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-rename{flex:1;min-width:0;border:1px solid var(--accent);border-radius:4px;padding:2px 5px;font-size:var(--fs-13);outline:none;background:var(--bg)}.layer-toggle{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);border-radius:5px;opacity:0;flex-shrink:0;transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.layer-toggle:hover{background:#0000000f;color:var(--ink)}.layer-toggle.shown{opacity:1;color:var(--ink-2)}.statusbar{grid-area:status;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--bg);border-top:1px solid var(--line);font-size:var(--fs-11);color:var(--ink-3);z-index:20}.status-left,.status-right{display:flex;align-items:center;gap:10px}.status-doc{font-feature-settings:"tnum" 1;color:var(--ink-2);font-weight:500}.status-sel{display:flex;gap:8px;font-feature-settings:"tnum" 1}.status-sel b{color:var(--ink-4);font-weight:600;margin-right:2px}.status-chip{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:999px;color:var(--ink-3);font-weight:500;transition:all var(--t-fast) var(--ease)}.status-chip:hover{background:var(--bg-hover);color:var(--ink-2)}.status-chip.on{background:var(--accent-soft);color:var(--accent)}.zoom-control{display:flex;align-items:center;background:var(--bg-sunken);border:1px solid var(--line);border-radius:999px;height:22px}.zoom-control button{display:flex;align-items:center;justify-content:center;width:24px;height:22px;color:var(--ink-2);border-radius:999px}.zoom-control button:hover{color:var(--ink)}.zoom-num{min-width:42px;font-size:var(--fs-11);font-weight:600;font-feature-settings:"tnum" 1;color:var(--ink-2)}.quick-actions{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px;box-shadow:var(--shadow-lg);z-index:25;animation:qa-in .22s var(--ease-out)}@keyframes qa-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.quick-actions button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-pill);color:var(--ink-2);font-size:var(--fs-12);font-weight:500;transition:all var(--t-fast) var(--ease)}.quick-actions button:hover{background:var(--bg-hover);color:var(--ink)}.quick-actions button:active{transform:scale(.95)}.qa-sep{width:1px;height:18px;background:var(--line-2);margin:0 3px}.qa-danger{color:var(--ink-3)!important}.qa-danger:hover{background:#fef2f2!important;color:#ef4444!important}.cmdk-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#18181b2e;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;animation:fade-in .14s var(--ease)}.line-dialog{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;min-width:260px;box-shadow:0 20px 60px #00000040;z-index:220;animation:fade-in .12s var(--ease)}.line-dialog-title{font-weight:600;font-size:13px;margin-bottom:12px;color:var(--ink)}.line-dialog label{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:9px 0;font-size:12px;color:var(--ink-2)}.line-dialog label>span{min-width:52px}.line-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.line-dialog-actions button{padding:6px 14px;border-radius:7px;border:1px solid var(--line);background:var(--bg-sunken);font-size:12px;cursor:pointer}.line-dialog-actions button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.cmdk{width:580px;max-width:92vw;max-height:60vh;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column;animation:cmdk-in .2s var(--ease-out)}@keyframes cmdk-in{0%{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.cmdk-input{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--line-2)}.cmdk-input input{flex:1;border:none;outline:none;background:none;font-size:var(--fs-16);color:var(--ink);font-weight:450}.cmdk-input input::placeholder{color:var(--ink-4)}.cmdk-list{flex:1;overflow-y:auto;padding:6px}.cmdk-empty{padding:32px;text-align:center;color:var(--ink-4);font-size:var(--fs-13)}.cmdk-group{margin-bottom:4px}.cmdk-group-label{padding:8px 10px 4px;font-size:var(--fs-11);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-4)}.cmdk-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--fs-13);text-align:left}.cmdk-item svg{color:var(--ink-3);flex-shrink:0}.cmdk-label{flex:1;color:var(--ink);font-weight:450}.cmdk-item.active{background:var(--accent-soft)}.cmdk-item.active svg,.cmdk-item.active .cmdk-label{color:var(--accent)}.cmdk-item.active .cmdk-keys{color:var(--accent);border-color:var(--accent-ring)}.cmdk-keys{font-size:var(--fs-11);font-weight:500;color:var(--ink-3);padding:2px 7px;border:1px solid var(--line-2);border-radius:5px;font-feature-settings:"tnum" 1}.onboard-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:220;background:#18181b47;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fade-in .2s var(--ease)}.onboard{width:420px;max-width:92vw;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);padding:26px;animation:cmdk-in .28s var(--ease-out)}.onboard-brand{text-align:center;margin-bottom:22px}.onboard-logo{width:52px;height:52px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--accent-softer);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--accent-ring)}.onboard-brand>span{font-size:18px;font-weight:650;color:var(--ink);letter-spacing:-.01em}.onboard-tag{font-size:var(--fs-13);color:var(--ink-3);margin-top:6px;line-height:1.5}.onboard-step{display:flex;gap:14px;padding:16px;background:var(--bg-sunken);border-radius:var(--r-lg);margin-bottom:18px;min-height:96px}.onboard-step-icon{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--accent);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}.onboard-step-title{font-size:var(--fs-14);font-weight:600;color:var(--ink);margin-bottom:4px}.onboard-step-body{font-size:var(--fs-13);color:var(--ink-2);line-height:1.5}.onboard-step-keys{margin-top:8px;font-size:var(--fs-12);font-weight:600;color:var(--accent);font-feature-settings:"tnum" 1}.onboard-dots{display:flex;justify-content:center;gap:6px;margin-bottom:18px}.onboard-dots span{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:all var(--t) var(--ease)}.onboard-dots span.on{background:var(--accent);width:18px;border-radius:999px}.onboard-actions{display:flex;justify-content:space-between;align-items:center}.onboard-actions .btn-primary{height:36px;padding:0 18px;font-size:var(--fs-13)}.onboard-actions .ghost-btn{height:36px}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:15}.empty-card{pointer-events:auto;text-align:center;background:#ffffffb3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:30px 36px;border-radius:var(--r-xl)}.empty-title{font-size:19px;font-weight:650;color:var(--ink);letter-spacing:-.01em}.empty-sub{font-size:var(--fs-13);color:var(--ink-3);margin-top:6px;margin-bottom:20px}.empty-tools{display:flex;flex-direction:column;gap:7px;width:230px;margin:0 auto}.empty-tools button{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);font-size:var(--fs-13);font-weight:500;color:var(--ink);box-shadow:var(--shadow-sm);transition:all var(--t) var(--ease)}.empty-tools button:hover{border-color:var(--accent-ring);background:var(--accent-softer);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}.empty-tools .kbd{margin-left:auto}.empty-tools button:hover .kbd{border-color:var(--accent-ring);color:var(--accent)}.embed-bar{display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--bg);border-bottom:1px solid var(--line);z-index:30;min-width:0}.embed-logo{display:flex;align-items:center;padding:0 4px;flex:none}.embed-tools{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}.embed-tools::-webkit-scrollbar{display:none}.embed-tool{width:34px;height:34px;flex:none}.embed-right{margin-left:auto;display:flex;gap:2px;flex:none}