:root{--bg:#f4f5f7;--panel:#fff;--text:#15181d;--muted:#68707c;--accent:#4f46e5;--accent-soft:#eef0ff;--border:#e3e5ea;--radius:12px;--line:#eceef2;--accent-2:#8b5cf6;--shadow-1:0 1px 2px #1018280f;--shadow-2:0 6px 20px -8px #10182829, 0 1px 2px #1018280d;--ring:0 0 0 3px #4f46e52e;--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);min-height:100vh;flex-direction:column;min-height:100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif;display:flex}.topbar{background:var(--panel);border-bottom:1px solid var(--border);z-index:10;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;min-width:0;font-size:15px;font-weight:600;display:flex}.brand span,.brand h1{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.brand h1{font:inherit;margin:0}main{flex:1;grid-template-columns:1fr 340px;gap:12px;min-height:0;padding:12px;display:grid}@media (max-width:880px){main{grid-template-columns:1fr;gap:10px;padding:8px}}.stage-wrap{flex-direction:column;gap:10px;min-height:0;display:flex}.stage{border:1px solid var(--border);border-radius:var(--radius);background:repeating-conic-gradient(#e9ebef 0% 25%,#f8f9fb 0% 50%) 0/24px 24px;flex:1;min-height:340px;position:relative;overflow:hidden}#stage:-webkit-full-screen{border:0;border-radius:0;width:100%;height:100%;margin:0;position:fixed;top:0;bottom:0;left:0;right:0}#stage:fullscreen{border:0;border-radius:0;width:100%;height:100%;margin:0;position:fixed;top:0;bottom:0;left:0;right:0}body.stage-faux-full #stage{z-index:80;width:100%;height:var(--faux-h,100%);border:0;border-radius:0;margin:0;position:fixed;top:0;bottom:0;left:0;right:0}@media (max-width:880px) and (orientation:portrait){.stage-wrap{top:var(--topbar-h,52px);z-index:6;background:var(--bg);border-radius:0 0 var(--radius) var(--radius);padding-bottom:8px;position:sticky;box-shadow:0 8px 18px #0000001a}.stage{flex:none;height:34vh;min-height:0}.stage #preview{touch-action:none}.panel .ctl input[type=range]{height:28px}.stage.mini{height:17vh}.stage .mini-toggle{display:inline-flex}.stage .dragtag{display:none}.panel .ctl,.panel details,.panel .grp>p{scroll-margin-top:calc(var(--topbar-h,52px) + 34vh + 96px)}}@media (orientation:landscape) and (max-height:620px){body{height:100vh;height:100dvh;min-height:0;overflow:hidden}.topbar{padding:6px 12px}.foot{display:none}main{height:calc(100vh - var(--topbar-h,52px));height:calc(100dvh - var(--topbar-h,52px) - var(--sai-bottom,0px));flex:none;grid-template-columns:minmax(0,1fr) minmax(220px,40%);align-items:stretch;gap:8px;min-height:0;padding:8px;display:grid;overflow:hidden}.stage-wrap{flex-direction:column;gap:8px;height:100%;min-height:0;padding:0;display:flex;position:static}.stage{height:auto;min-height:0;box-shadow:none;border-radius:var(--radius);flex:auto}.stage.mini{height:auto}.stage-bar{flex:none}.stage .mini-toggle,.stage .compare-btn,.stage .dragtag{display:none}.panel{-webkit-overflow-scrolling:touch;align-self:stretch;height:100%;min-height:0;max-height:none;position:static;overflow:hidden auto}.panel .ctl,.panel details,.panel .grp>p{scroll-margin-top:8px}.export-note{color:var(--muted);margin:0;padding:2px 0 0;font-size:12px;line-height:1.55}.stage-bar{flex-wrap:nowrap;gap:6px}.stage-bar button{padding:6px 10px;font-size:12px}.stage-bar .ctl>span:first-child{display:none}.stage-bar #imgInfo{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}#gridSeg{justify-content:center;gap:6px}#gridSeg button{flex:0 0 calc(25% - 5px);justify-content:center;align-items:center;min-width:0;height:42px;padding:4px;display:inline-flex}#gridSeg .gt-ico{width:100%;height:100%;color:var(--muted);display:block}#gridSeg button.active .gt-ico{color:#fff}#gridSeg .sr{display:none}.touch-ui .panel .ctl input[type=range]{pointer-events:none}.editor{z-index:60;background:#0e1016b8;justify-content:center;align-items:center;padding:14px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.editor[hidden]{display:none}.editor-card{background:#fff;border-radius:16px;flex-direction:column;max-width:min(680px,100%);max-height:100%;display:flex;overflow:hidden;box-shadow:0 24px 60px #00000057}.editor-head{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:11px 16px;font-weight:650;display:flex}.editor-head .hint{color:var(--muted);font-size:12px;font-weight:450}.editor-stage{background:#0f1116;flex:1;justify-content:center;align-items:center;min-height:0;padding:14px;display:flex;position:relative;overflow:hidden}.ed-wrap{line-height:0;position:relative}.ed-wrap canvas{touch-action:none;max-width:100%;max-height:58vh;display:block}.ed-crop{cursor:move;touch-action:none;border:2px solid #fff;width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:0 0 0 9999px #00000085}.ed-crop i{background:#fff;border-radius:4px;width:20px;height:20px;position:absolute;box-shadow:0 1px 3px #00000059}.ed-crop i.nw{cursor:nwse-resize;top:-10px;left:-10px}.ed-crop i.ne{cursor:nesw-resize;top:-10px;right:-10px}.ed-crop i.sw{cursor:nesw-resize;bottom:-10px;left:-10px}.ed-crop i.se{cursor:nwse-resize;bottom:-10px;right:-10px}.editor-bar{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:11px 16px;display:flex}.editor-bar .spacer{flex:1}.editor-bar button{border:1px solid var(--line);font:inherit;cursor:pointer;color:var(--ink);background:#fff;border-radius:9px;padding:7px 12px}.editor-bar button:hover{border-color:#c9cdd6}.ed-ratios{flex-wrap:wrap;gap:4px;display:inline-flex}.ed-ratios button{border:1px solid var(--line);font:inherit;cursor:pointer;color:var(--ink);background:#fff;border-radius:7px;padding:5px 8px;font-size:12px}.ed-ratios button.active,.editor-bar button.primary{background:var(--accent,#4f46e5);color:#fff;border-color:#0000}.topbar .tb-actions{align-items:center;gap:8px;display:flex}#btnExportPop{align-items:center;gap:6px;display:inline-flex}#btnExportPop svg{flex:none}.export-pop{z-index:45;border:1px solid var(--line);background:#fff;border-radius:14px;flex-direction:column;gap:9px;width:min(304px,100vw - 24px);max-height:min(72vh,540px);padding:12px;display:flex;position:fixed;top:56px;right:12px;overflow:auto;box-shadow:0 18px 44px #10121a2e}.export-pop[hidden]{display:none}.export-pop .export-note{margin-top:2px}.export-pop .plan-note{border-top:1px dashed var(--line);color:#7a6a3a;margin-top:4px;padding-top:6px}.ctl output input.inline-edit{width:5.4em;font:inherit;text-align:center;color:var(--ink);border:1px solid var(--accent,#4f46e5);-webkit-appearance:none;-webkit-appearance:textfield;appearance:textfield;background:#fff;border-radius:6px;padding:1px 2px}.ctl output input.inline-edit::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ctl output input.inline-edit::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stage .compare-btn{z-index:5;color:var(--muted);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffeb;border-radius:999px;align-items:center;gap:4px;padding:6px 10px;font-size:12px;display:inline-flex;position:absolute;top:10px;bottom:auto;left:10px;right:auto}.mini-toggle{z-index:4;border:1px solid var(--border);color:var(--muted);background:#ffffffeb;border-radius:8px;align-items:center;gap:4px;padding:6px 10px;font-size:12px;display:none;position:absolute;bottom:8px;right:8px}.mini-toggle .ic{transition:transform .18s}.stage.mini .mini-toggle .ic{transform:rotate(180deg)}.stage.mini .zoomtag{display:none}.stage.drag{outline:2px dashed var(--accent);outline-offset:-8px}#preview{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.dragtag{border:1px solid var(--border);color:var(--muted);pointer-events:none;background:#ffffffd9;border-radius:8px;padding:4px 10px;font-size:12px;position:absolute;top:52px;right:10px}.zoomtag{border:1px solid var(--border);color:var(--muted);pointer-events:none;background:#ffffffd9;border-radius:8px;padding:4px 10px;font-size:12px;position:absolute;bottom:48px;left:10px}.stage-fab{z-index:5;border-radius:999px;align-items:center;gap:6px;padding:7px 13px;display:inline-flex;position:absolute;top:10px;right:10px;box-shadow:0 2px 10px #0f172a29}.stage-fit{z-index:5;align-items:center;gap:6px;display:flex;position:absolute;bottom:10px;left:10px}.stage-fit button{border:1px solid var(--border);color:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#ffffffe6;border-radius:999px;align-items:center;gap:5px;padding:5px 12px;font-size:12.5px;line-height:1.25;display:inline-flex}#btnFit svg{flex:none}#btnFit svg.ic-compress,#btnFit.active svg.ic-expand{display:none}#btnFit.active svg.ic-compress{display:block}.stage-fit button.zoom-lv{font-variant-numeric:tabular-nums;justify-content:center;min-width:42px;padding:5px 8px}.stage-fit button.active{color:#0f6e56;border-color:#0f6e56;font-weight:600}.stage-edit{z-index:5;border:1px solid var(--border);color:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#ffffffeb;border-radius:999px;padding:6px 13px;font-size:12.5px;line-height:1.25;position:absolute;bottom:10px;right:10px}.stage-edit[hidden]{display:none}.stage-bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.stage-bar select{flex:none;min-width:0;padding:7px 26px 7px 10px;font-size:12.5px}.stage-bar .ctl>span:first-child{font-size:12.5px}button,select{font:inherit;border:1px solid var(--border);background:var(--panel);cursor:pointer;color:var(--text);border-radius:8px;padding:7px 12px;font-size:13px}button:active{transform:translateY(1px)}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.primary:hover{background:#463da3}.spacer{flex:1}.hint{color:var(--muted);font-size:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);max-height:calc(100vh - 96px);align-self:start;max-height:calc(100dvh - 96px);padding:4px 0;position:sticky;top:64px;overflow:auto}@media (max-width:880px){.panel{max-height:none;position:static}}details:last-child{border-bottom:none}summary{cursor:pointer;justify-content:space-between;padding:11px 16px;font-size:13px;font-weight:600;list-style:none;display:flex}summary::-webkit-details-marker{display:none}summary:after{content:"▾";color:var(--muted)}details[open] summary:after{content:"▴"}.grp{flex-direction:column;gap:11px;padding:4px 16px 14px;display:flex}.ctl{touch-action:pan-y;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;display:flex}.ctl>span:first-child{color:var(--muted);white-space:nowrap;flex:none}.ctl input[type=range]{min-width:90px;accent-color:var(--accent);flex:1}.ctl output{text-align:right;font-variant-numeric:tabular-nums;flex:0 0 3.2em}.ctl input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;width:42px;height:28px;padding:0}.ctl input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg button{flex:1;justify-content:center;align-items:center;gap:6px;min-width:52px;padding:6px 4px;font-size:12px;display:inline-flex}.seg button.active{background:var(--accent);color:#fff;border-color:var(--accent)}#shapeSeg{justify-content:center;gap:5px}#shapeSeg button{flex:0 0 calc(20% - 5px);justify-content:center;align-items:center;min-width:0;height:34px;padding:0 2px;display:inline-flex}.charbox{flex-direction:column;gap:6px;margin-top:4px;display:flex}.charbox[hidden]{display:none}.charbox textarea{resize:vertical;width:100%;min-height:66px;font:inherit;border:1px solid var(--line);color:var(--ink);box-sizing:border-box;background:#fff;border-radius:9px;padding:7px 9px;font-size:13px;line-height:1.5}.charbox .seg{justify-content:flex-start}#shapeSeg .sh-ico{flex:none;width:21px;height:21px;display:block}#shapeSeg .sr{display:none}#shapeSeg button[data-shape=connect] .sr,#shapeSeg button[data-shape=char] .sr{white-space:nowrap;flex:none;margin-left:6px;font-size:12px;font-weight:500;line-height:1;display:inline;overflow:visible}#shapeSeg button[data-shape=connect],#shapeSeg button[data-shape=char]{text-overflow:clip;white-space:nowrap;flex:none;gap:8px;width:auto;padding:0 13px;overflow:visible}.mini{justify-content:center;align-items:center;gap:6px;width:100%;font-size:12px;display:inline-flex}.mini .ic{flex:none}.row2{grid-template-columns:1fr;gap:10px;display:grid}select{flex:1;min-width:130px}.note{color:var(--muted);margin:0;font-size:12px;line-height:1.6}.foot{color:var(--muted);border-top:1px solid var(--border);background:var(--panel);padding:9px 16px;font-size:12px}.chips{flex-wrap:wrap;gap:6px;display:flex}.sub{border-left:2px solid var(--border);flex-direction:column;gap:10px;margin:2px 0 2px 2px;padding-left:11px;display:flex}.chips button{padding:5px 10px;font-size:12px}#lockRatio .ic{flex:none}#lockRatio .ic-open{display:none}#lockRatio.active .ic-locked{display:block}#lockRatio.active .ic-open,#lockRatio:not(.active) .ic-locked{display:none}#lockRatio:not(.active) .ic-open{display:block}body{background:radial-gradient(1100px 520px at 12% -12%, #eef1f8 0%, #eef1f800 60%), radial-gradient(820px 460px at 102% -4%, #f1eefc 0%, #f1eefc00 55%), var(--bg)}.topbar{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1)}.brand{letter-spacing:.01em;font-weight:650}.brand svg{filter:drop-shadow(0 1px 2px #4f46e538)}.panel{border-color:var(--line);box-shadow:var(--shadow-2);padding:6px 0}details{border-bottom:1px solid var(--line)}.grp{padding:2px 16px 16px}.sub{border-left-color:#dfe3ea;gap:11px}summary{letter-spacing:.01em;border-radius:10px;align-items:center;gap:8px;margin:3px 6px;padding:11px 14px;font-weight:650;transition:background .15s}summary:hover{background:#f6f7fa}details[open]>summary{background:0 0}details[open]>summary:hover{background:#f6f7fa}summary:after,details[open] summary:after{display:none}summary .summary-val{min-width:0;font:500 11.5px/1 var(--mono);color:var(--muted);border:1px solid var(--line);text-overflow:ellipsis;white-space:nowrap;background:#f3f5f8;border-radius:999px;flex:0 auto;margin-left:auto;padding:4px 9px;overflow:hidden}summary .fold-btn{width:24px;height:24px;color:var(--muted);border:1px solid var(--line);cursor:pointer;background:#f3f5f8;border-radius:8px;flex:none;justify-content:center;align-items:center;transition:background .15s,color .15s,box-shadow .15s;display:inline-flex}summary .fold-btn:hover{color:var(--text);background:#e9ecf1}summary .fold-btn:active{background:#e1e5eb}summary .fold-btn:focus-visible{box-shadow:var(--ring);outline:none}summary .fold-btn svg{width:12px;height:12px;transition:transform .2s}details[open] summary .fold-btn svg{transform:rotate(180deg)}button,select{border-color:var(--line);border-radius:9px;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}button:hover,select:hover{background:#f6f7fa;border-color:#d9dce3}button.primary{background:linear-gradient(#5b52ea,#4f46e5);border-color:#4a41d6;box-shadow:0 1px 2px #4f46e54d}button.primary:hover{background:linear-gradient(#655cef,#5449e2);border-color:#4a41d6}select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px),calc(100% - 12px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:30px}input[type=text]{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;width:100%;padding:7px 10px;font-size:13px}input[type=text]:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}.ctl output{text-align:center;min-width:3.6em;font:500 12px/1.2 var(--mono);color:var(--text);border:1px solid var(--line);background:#f3f5f8;border-radius:7px;flex:none;padding:4px 7px}.ctl input[type=range]{-webkit-appearance:none;appearance:none;touch-action:pan-y;background:0 0;height:22px}.ctl input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0 var(--fill,50%),#e4e7ed var(--fill,50%) 100%);border-radius:999px;height:5px}.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--accent);background:#fff;border-radius:50%;width:15px;height:15px;margin-top:-5px;transition:transform .12s;box-shadow:0 1px 3px #10182847}.ctl input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}.ctl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.22)}.ctl input[type=color]{border-color:var(--line);border-radius:8px}.seg button{border-radius:9px}.seg button.active{background:linear-gradient(#5b52ea,#4f46e5);border-color:#4a41d6;box-shadow:0 1px 2px #4f46e547}.seg button:hover:not(.active){background:#f4f5f8}#gridSeg button{border-radius:10px;height:44px}#gridSeg button:hover:not(.active){background:#f6f7fa;border-color:#d9dce3}#shapeSeg button{border-radius:9px;width:36px;height:34px}.note{border:1px solid var(--line);background:#f7f8fa;border-radius:9px;padding:8px 10px}.dragtag,.zoomtag{border-color:var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--mono);background:#ffffffe6;border-radius:999px}.mini-toggle{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus:not(:focus-visible){outline:none}select:focus:not(:focus-visible){outline:none}summary:focus:not(:focus-visible){outline:none}input:focus:not(:focus-visible){outline:none}.panel::-webkit-scrollbar{width:11px}.panel::-webkit-scrollbar-track{background:0 0}.panel::-webkit-scrollbar-thumb{border:3px solid var(--panel);background:#d7dbe2;border-radius:999px}.panel::-webkit-scrollbar-thumb:hover{background:#c2c8d2}[hidden]{display:none!important}:root{--sai-top:env(safe-area-inset-top,0px);--sai-right:env(safe-area-inset-right,0px);--sai-bottom:env(safe-area-inset-bottom,0px);--sai-left:env(safe-area-inset-left,0px)}body{padding-left:var(--sai-left);padding-right:var(--sai-right);padding-bottom:var(--sai-bottom)}.topbar{padding-top:calc(10px + var(--sai-top))}.editor{padding:calc(14px + var(--sai-top)) calc(14px + var(--sai-right)) calc(14px + var(--sai-bottom)) calc(14px + var(--sai-left))}body.stage-faux-full .stage-fab{top:calc(10px + var(--sai-top));right:calc(10px + var(--sai-right))}#stage:-webkit-full-screen .stage-fab{top:calc(10px + var(--sai-top));right:calc(10px + var(--sai-right))}#stage:fullscreen .stage-fab{top:calc(10px + var(--sai-top));right:calc(10px + var(--sai-right))}#stage:-webkit-full-screen .stage-fab{top:calc(10px + var(--sai-top));right:calc(10px + var(--sai-right))}body.stage-faux-full .compare-btn{top:calc(10px + var(--sai-top));left:calc(10px + var(--sai-left))}#stage:-webkit-full-screen .compare-btn{top:calc(10px + var(--sai-top));left:calc(10px + var(--sai-left))}#stage:fullscreen .compare-btn{top:calc(10px + var(--sai-top));left:calc(10px + var(--sai-left))}#stage:-webkit-full-screen .compare-btn{top:calc(10px + var(--sai-top));left:calc(10px + var(--sai-left))}body.stage-faux-full .mini-toggle{right:calc(8px + var(--sai-right));bottom:calc(8px + var(--sai-bottom))}#stage:-webkit-full-screen .mini-toggle{right:calc(8px + var(--sai-right));bottom:calc(8px + var(--sai-bottom))}#stage:fullscreen .mini-toggle{right:calc(8px + var(--sai-right));bottom:calc(8px + var(--sai-bottom))}#stage:-webkit-full-screen .mini-toggle{right:calc(8px + var(--sai-right));bottom:calc(8px + var(--sai-bottom))}@media (orientation:landscape) and (max-height:620px){.topbar{padding-top:calc(6px + var(--sai-top))}}@media (pointer:coarse){select{font-size:16px}.ctl output input.inline-edit{width:4.2em;font-size:16px}.stage-fab{min-height:44px;padding-top:11px;padding-bottom:11px}.stage-fit button{min-height:44px;padding-top:9px;padding-bottom:9px}.stage-fit button.zoom-lv{min-width:48px}.stage .compare-btn{min-height:44px;padding-top:9px;padding-bottom:9px}.stage-bar button{min-height:44px}.zoomtag{bottom:62px}}