:root{--ad-rail:160px;--ad-top:100px;--bar:48px;--action-bar:calc(37px + env(safe-area-inset-bottom));--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#fff) var(--lightningcss-dark,#0f141a);--panel:var(--lightningcss-light,#f3f4f6) var(--lightningcss-dark,#1b212b);--line:var(--lightningcss-light,#e5e7eb) var(--lightningcss-dark,#2a313c);--ink:var(--lightningcss-light,#111827) var(--lightningcss-dark,#e6e8ec);--muted:var(--lightningcss-light,#9ca3af) var(--lightningcss-dark,#8b93a1);--stage:var(--lightningcss-light,#fafafa) var(--lightningcss-dark,#0a0e13);--danger:var(--lightningcss-light,#b91c1c) var(--lightningcss-dark,#fca5a5)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (min-width:1024px){:root{--ad-rail:300px}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:var(--bg);padding-left:var(--ad-rail);font-family:system-ui,sans-serif}.app{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--bar) auto 1fr;grid-template-areas:"toolbar""options""stage";height:100dvh;display:grid;position:relative}.ad{width:var(--ad-rail);z-index:20;background:var(--panel);border-right:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;place-items:center;font-size:12px;display:grid;position:fixed;top:0;bottom:0;left:0}html[data-ads=off] .ad,html[data-ads=off] .ads-only{display:none}html[data-ads=off] body{padding-left:0}.toolbar{border-bottom:1px solid var(--line);scrollbar-width:thin;grid-area:toolbar;align-items:center;gap:4px;min-width:0;padding:0 8px;display:flex;overflow:auto hidden}.toolbar button{cursor:pointer;touch-action:manipulation;background:0 0;border:1px solid #0000;border-radius:6px;flex:none;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:inline-flex}.toolbar button svg{display:block}.tool-swatch{border:1px solid var(--muted);background:#ef4444;border-radius:3px;width:18px;height:18px;display:block}.toolbar button:hover{background:var(--panel)}.toolbar button[aria-pressed=true]{border-color:var(--ink)}.toolbar .spacer{flex:1}.actions{gap:4px;display:flex}.toolbar [data-action]{width:auto;padding:0 12px}.options{min-height:var(--bar);border-bottom:1px solid var(--line);background:var(--panel);scrollbar-width:thin;grid-area:options;align-items:center;gap:8px;min-width:0;padding:0 12px;display:flex;overflow-x:auto}.options>*{flex:none}.scroll-cue{z-index:1;pointer-events:none;min-width:0;position:relative}.scroll-cue[data-cue=toolbar]{--cue-bg:var(--bg);grid-area:toolbar}.scroll-cue[data-cue=options]{--cue-bg:var(--panel);grid-area:options}.scroll-cue:before,.scroll-cue:after{width:56px;color:var(--muted);opacity:0;align-items:center;font-size:22px;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:0;bottom:0}.scroll-cue:before{content:"‹";background:linear-gradient(to right, var(--cue-bg) 38%, transparent);justify-content:flex-start;padding-left:7px;left:0}.scroll-cue:after{content:"›";background:linear-gradient(to left, var(--cue-bg) 38%, transparent);justify-content:flex-end;padding-right:7px;right:0}.toolbar[data-overflow=start]~.scroll-cue[data-cue=toolbar]:before,.toolbar[data-overflow=both]~.scroll-cue[data-cue=toolbar]:before,.toolbar[data-overflow=end]~.scroll-cue[data-cue=toolbar]:after,.toolbar[data-overflow=both]~.scroll-cue[data-cue=toolbar]:after,.options[data-overflow=start]~.scroll-cue[data-cue=options]:before,.options[data-overflow=both]~.scroll-cue[data-cue=options]:before,.options[data-overflow=end]~.scroll-cue[data-cue=options]:after,.options[data-overflow=both]~.scroll-cue[data-cue=options]:after{opacity:1}.options .hint,.empty-hint{color:var(--muted);font-size:14px}.empty-hint{border:2px dashed var(--line);text-align:center;cursor:pointer;border-radius:14px;flex-direction:column;align-items:center;gap:14px;max-width:80%;padding:32px 40px;display:flex}.empty-hint .upload-icon{width:44px;height:44px;color:var(--muted)}.empty-hint:hover{border-color:var(--muted);background:var(--panel)}.stage.is-empty{cursor:pointer}.stage{background:var(--stage);touch-action:none;grid-area:stage;place-items:center;display:grid;position:relative;overflow:hidden}.canvas-wrap{line-height:0;position:relative}.stage.is-empty .canvas-wrap{display:none}.c-scene{background:#fff;display:block;position:relative;box-shadow:0 1px 8px #00000026}.c-overlay{touch-action:none;cursor:crosshair;position:absolute;inset:0}.opt{color:var(--ink);align-items:center;gap:6px;font-size:13px;display:inline-flex}.opt input[type=range]{width:110px}.opt-swatch{border:1px solid var(--line);cursor:pointer;border-radius:6px;width:24px;height:24px;padding:0}.opt-del{border:1px solid var(--line);background:var(--bg);color:var(--danger);cursor:pointer;border-radius:6px;margin-left:auto;padding:4px 10px}.opt-del:hover{background:var(--panel)}.opt-pop{border:1px solid var(--line);background:var(--bg);height:24px;color:var(--ink);white-space:nowrap;cursor:pointer;border-radius:6px;flex:none;align-items:center;padding:0 10px;font-size:13px;display:inline-flex}.opt-pop:hover{background:var(--panel)}.slider-popover{z-index:50;background:var(--bg);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:10px;min-width:240px;padding:14px;display:flex;position:fixed;box-shadow:0 8px 24px #0000002e}.slider-value{color:var(--ink);font-size:13px;font-weight:600}.slider-popover input[type=range]{appearance:none;background:0 0;width:100%;height:28px;margin:0}.slider-popover input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:2px;height:4px}.slider-popover input[type=range]::-moz-range-track{background:var(--line);border-radius:2px;height:4px}.slider-popover input[type=range]::-webkit-slider-thumb{border:1px solid var(--muted);background:var(--bg);appearance:none;border-radius:50%;width:22px;height:22px;margin-top:-9px}.slider-popover input[type=range]::-moz-range-thumb{border:1px solid var(--muted);background:var(--bg);border-radius:50%;width:22px;height:22px}.opt-seg{border:1px solid var(--line);border-radius:6px;display:inline-flex;overflow:hidden}.opt-seg button{border:none;border-left:1px solid var(--line);background:var(--bg);cursor:pointer;padding:4px 10px;font-size:13px}.opt-seg button:first-child{border-left:none}.opt-seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.opt-apply,.opt-cancel{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:6px;padding:4px 12px}.opt-apply{border-color:var(--ink);margin-left:auto;font-weight:600}.opt-apply:disabled{border-color:var(--line);color:var(--muted);cursor:default}.opt-apply:not(:disabled):hover,.opt-cancel:hover{background:var(--panel)}.text-editor{z-index:2;outline:1px dashed var(--muted);white-space:pre;cursor:text;min-width:4px;margin:0;padding:0;line-height:1;position:absolute}.picker{z-index:50;background:var(--bg);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:8px;padding:10px;display:flex;position:fixed;box-shadow:0 8px 24px #0000002e}.pk-row{flex-wrap:wrap;align-items:center;gap:6px;max-width:200px;display:flex}.pk-swatch{border:1px solid var(--line);cursor:pointer;border-radius:6px;width:22px;height:22px;padding:0}.pk-eyedrop{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:6px;padding:4px 10px}.export-menu{z-index:50;background:var(--bg);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:6px;min-width:160px;padding:8px;display:flex;position:fixed;box-shadow:0 8px 24px #0000002e}.export-item{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:8px 10px;font-size:14px}.export-item:hover,.export-item:focus-visible{background:var(--panel)}.export-item[aria-current=true]{border-color:var(--ink)}.export-quality{color:var(--ink);flex-direction:column;gap:4px;padding:4px 10px 2px;font-size:13px;display:flex}.export-quality input[type=range]{width:100%}.export-confirm{border:1px solid var(--ink);background:var(--bg);cursor:pointer;border-radius:6px;padding:8px 10px;font-size:14px;font-weight:600}.export-confirm:hover,.export-confirm:focus-visible{background:var(--panel)}.toast{z-index:60;background:var(--ink);max-width:min(90vw,360px);color:var(--bg);opacity:0;visibility:hidden;border-radius:8px;padding:10px 16px;font-size:14px;transition:opacity .18s,transform .18s,visibility .18s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,8px);box-shadow:0 6px 20px #00000040}.toast.show{opacity:1;visibility:visible;transform:translate(-50%)}.pane-backdrop{z-index:10;opacity:0;visibility:hidden;background:#00000059;transition:opacity .2s,visibility .2s;position:fixed;inset:0}@media (min-width:700px){.pane-backdrop{background:0 0}}.pane-backdrop.open{opacity:1;visibility:visible}.pane{z-index:11;background:var(--bg);border-left:1px solid var(--line);visibility:hidden;flex-direction:column;width:min(360px,90vw);transition:transform .2s,visibility .2s;display:flex;position:fixed;inset:0 0 0 auto;transform:translate(100%);box-shadow:-8px 0 24px #00000014}.pane.open{visibility:visible;transform:translate(0)}.pane-head{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:12px 16px;display:flex}.pane-head h2{margin:0;font-size:16px}.pane-tabs{gap:4px;margin-left:auto;display:flex}.pane-tab{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:14px}.pane-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.pane-head [data-action=close-pane]{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;width:32px;height:32px;font-size:16px}.pane-head [data-action=close-pane]:hover{background:var(--panel)}.pane-body{flex:1;padding:12px;overflow:auto}.pane-empty{color:var(--muted);text-align:center;margin:24px 8px;font-size:14px}.pane-foot{color:var(--muted);margin:12px 4px 0;font-size:12px}.hist-list{flex-direction:column;gap:8px;display:flex}.hist-card{align-items:center;gap:8px;display:flex}.hist-open{border:1px solid var(--line);background:var(--bg);text-align:left;cursor:pointer;border-radius:8px;flex:1;align-items:center;gap:10px;min-height:56px;padding:6px;display:flex}.hist-open:hover{background:var(--panel)}.hist-open img{object-fit:cover;background:var(--panel);border-radius:4px;flex:none;width:56px;height:56px}.hist-label{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.hist-del,.edit-revert{border:1px solid var(--line);background:var(--bg);min-height:44px;color:var(--danger);cursor:pointer;border-radius:6px;flex:none;padding:4px 12px;font-size:14px}.hist-del:hover,.edit-revert:hover{background:var(--panel)}.edit-list{flex-direction:column;gap:6px;display:flex}.edit-row{border:1px solid var(--line);border-radius:8px;align-items:center;gap:8px;padding:4px 4px 4px 10px;display:flex}.edit-label{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;overflow:hidden}.edit-revert{margin-left:auto}.content{max-width:720px;margin:0 auto;padding:48px 24px;line-height:1.6}.content h1{font-size:28px}.site-footer{color:var(--muted);justify-content:center;align-items:center;gap:8px;padding:24px;font-size:14px;display:flex}.site-footer a{color:inherit}kbd{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:1px 6px;font-size:.85em}@media (orientation:portrait){.app{grid-template-columns:1fr;grid-template-rows:var(--bar) auto 1fr;margin-top:var(--ad-top);height:calc(100dvh - var(--ad-top) - var(--action-bar));grid-template-areas:"toolbar""options""stage"}html[data-ads=off] .app{height:calc(100dvh - var(--action-bar));margin-top:0}.ad{width:auto;height:var(--ad-top);border-right:none;border-bottom:1px solid var(--line);inset:0 0 auto}.actions{z-index:20;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);gap:0;position:fixed;bottom:0;left:0;right:0}.actions [data-action]{flex:1}body{padding-left:0;padding-bottom:var(--action-bar)}}@media (pointer:coarse){:root{--action-bar:calc(45px + env(safe-area-inset-bottom))}.app{--bar:52px}.toolbar{gap:6px}.toolbar button{width:44px;height:44px;font-size:18px}.toolbar [data-action]{width:auto;min-width:44px}.export-item,.export-confirm,.opt-del,.opt-pop,.opt-seg button,.opt-apply,.opt-cancel,.pk-eyedrop,.opt{min-height:44px}.opt input[type=range],.export-quality input[type=range]{appearance:none;background:0 0;height:44px;margin:0}.opt input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:2px;height:4px}.export-quality input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:2px;height:4px}.opt input[type=range]::-moz-range-track{background:var(--line);border-radius:2px;height:4px}.export-quality input[type=range]::-moz-range-track{background:var(--line);border-radius:2px;height:4px}.opt input[type=range]::-webkit-slider-thumb{border:1px solid var(--muted);background:var(--bg);appearance:none;border-radius:50%;width:24px;height:24px;margin-top:-10px}.export-quality input[type=range]::-webkit-slider-thumb{border:1px solid var(--muted);background:var(--bg);appearance:none;border-radius:50%;width:24px;height:24px;margin-top:-10px}.opt input[type=range]::-moz-range-thumb{border:1px solid var(--muted);background:var(--bg);border-radius:50%;width:24px;height:24px}.export-quality input[type=range]::-moz-range-thumb{border:1px solid var(--muted);background:var(--bg);border-radius:50%;width:24px;height:24px}.opt input[type=checkbox]{width:22px;height:22px}.opt-swatch,.pk-swatch{width:44px;height:44px}.pk-row{max-width:268px}.picker input[type=color],.pane-tab{min-height:44px}.pane-head [data-action=close-pane]{width:44px;height:44px}}