:root{--bg-app: #0b0b0d;--bg-panel: #101013;--bg-raised: #17171b;--bg-hover: #1d1d22;--bg-workspace: #08080a;--line: #212127;--line-strong: #2c2c34;--text: #e9e9ec;--text-dim: #9b9ba5;--text-faint: #6b6b75;--accent: #d9b06c;--accent-soft: rgba(217, 176, 108, .16);--danger: #e06a55;--radius: 6px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}html,body{height:100%;overflow:hidden}body{margin:0;background:var(--bg-app);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0}.topbar{display:flex;align-items:center;gap:16px;height:48px;flex:0 0 auto;padding:0 12px;background:var(--bg-panel);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand__mark{width:14px;height:14px;flex:0 0 auto;border:1.5px solid var(--accent);border-radius:3px;box-shadow:inset 0 0 0 2px var(--bg-panel),inset 0 0 0 3.5px var(--accent-soft)}.brand__name{font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap}.topbar__file{display:flex;align-items:baseline;gap:8px;min-width:0;padding-left:16px;border-left:1px solid var(--line);color:var(--text-dim);font-size:12px}.topbar__file span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw;color:var(--text)}.topbar__dims{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-faint);white-space:nowrap}.topbar__actions{display:flex;align-items:center;gap:8px;margin-left:auto}.topbar__hist{display:inline-flex;align-items:center;gap:6px;padding:0 10px}.topbar__hist:disabled{opacity:.4;cursor:default}.btn{height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:12px;letter-spacing:.01em;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.btn:hover{background:var(--bg-hover);border-color:#3a3a44}.btn:active{transform:translateY(.5px)}.btn--primary{background:var(--accent);border-color:var(--accent);color:#17130a;font-weight:600;padding:0 18px;height:34px;font-size:13px}.btn--primary:hover{background:#e6bd7b;border-color:#e6bd7b}.btn:focus-visible,.tool:focus-visible,.zoom__btn:focus-visible,.adjust__reset:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.panel-toggle{display:none}.shell{position:relative;display:flex;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden}.toolrail{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;width:70px;padding:8px 6px;background:var(--bg-panel);border-right:1px solid var(--line);overflow-y:auto}.tool{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:9px 2px 8px;border:0;border-radius:var(--radius);background:none;color:var(--text-dim);font:inherit;cursor:pointer}.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tool__label{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint)}.tool:hover{background:var(--bg-raised);color:var(--text)}.tool:hover .tool__label{color:var(--text-dim)}.tool.is-active{background:var(--bg-raised);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}.tool.is-active .tool__label{color:var(--accent)}.workspace{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--bg-workspace)}.workspace.is-dragover{box-shadow:inset 0 0 0 2px var(--accent)}#editor-canvas{display:block;width:100%;height:100%;background:transparent}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none}.empty[hidden]{display:none}.empty__drop{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:420px;padding:40px 48px;text-align:center;border:1px dashed var(--line-strong);border-radius:10px;pointer-events:auto}.workspace.is-dragover .empty__drop{border-color:var(--accent);background:#d9b06c0a}.recovery{position:absolute;bottom:28px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 20px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg-panel);text-align:center;pointer-events:auto}.recovery[hidden]{display:none}.recovery__text{margin:0;font-size:12.5px;color:var(--text-dim)}.recovery__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.empty__icon{width:34px;height:34px;margin-bottom:10px;fill:none;stroke:var(--text-faint);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.empty__title{margin:0;font-size:16px;font-weight:600;letter-spacing:.01em}.empty__sub{margin:0 0 14px;color:var(--text-dim);font-size:13px}.empty__hint{margin:16px 0 0;font-size:11px;color:var(--text-faint);letter-spacing:.02em}.empty__privacy{margin:5px 0 0;font-size:11px;color:var(--text-dim);letter-spacing:.02em}.busy{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:15;display:flex;align-items:center;gap:8px;padding:5px 14px;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:999px;box-shadow:0 4px 16px #0006;font-size:11.5px;color:var(--text-dim);pointer-events:none;white-space:nowrap}.busy[hidden]{display:none}.busy__label:before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:1px}.panel{flex:0 0 auto;width:292px;background:var(--bg-panel);border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}.panel__section{padding:16px 18px 6px}.panel__title{margin:0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}.panel__hint{margin:4px 0 0;font-size:11.5px;color:var(--text-faint)}.history{border-bottom:1px solid var(--line)}.history__head{padding-bottom:0}.history__list{margin:0;padding:6px 10px 12px;list-style:none;max-height:172px;overflow-y:auto;overscroll-behavior:contain}.history__entry{display:flex;align-items:center;width:100%;padding:5px 8px;border:0;border-radius:var(--radius);background:transparent;color:var(--text-dim);font:inherit;font-size:12px;text-align:left;cursor:pointer;transition:background-color .12s ease,color .12s ease}.history__entry:hover{background:var(--bg-hover);color:var(--text)}.history__entry.is-future{color:var(--text-faint);opacity:.55}.history__entry.is-current{color:var(--text);background:var(--bg-raised);box-shadow:inset 2px 0 0 var(--accent)}.history__entry.is-current:after{content:"";width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--accent)}.placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;margin:28px 18px;padding:26px 18px;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--text-dim)}.placeholder__tool{font-size:14px;font-weight:600;color:var(--text)}.placeholder__text{margin:0;font-size:12px;color:var(--text-faint)}.adjust{padding:11px 18px}.adjust__head{display:flex;align-items:center;gap:8px;margin-bottom:7px}.adjust__label{flex:1 1 auto;min-width:0;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);cursor:default}.adjust__value{min-width:34px;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right;color:var(--text)}.adjust__reset{width:18px;height:18px;padding:0;border:0;border-radius:4px;background:none;color:var(--text-faint);font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .1s ease,background-color .1s ease}.adjust.is-dirty .adjust__reset,.adjust:hover .adjust__reset,.adjust__reset:focus-visible{opacity:1}.adjust__reset:hover{background:var(--bg-hover);color:var(--text)}input[type=range].adjust__range{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:16px;margin:0;background:transparent;cursor:pointer;--fill-a: 50%;--fill-b: 50%}input[type=range].adjust__range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--line-strong) 0 var(--fill-a),var(--accent) var(--fill-a) var(--fill-b),var(--line-strong) var(--fill-b) 100%)}input[type=range].adjust__range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:#dcdce2;transition:background-color .1s ease}input[type=range].adjust__range:hover::-webkit-slider-thumb,input[type=range].adjust__range:active::-webkit-slider-thumb{background:var(--accent)}input[type=range].adjust__range::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--line-strong) 0 var(--fill-a),var(--accent) var(--fill-a) var(--fill-b),var(--line-strong) var(--fill-b) 100%)}input[type=range].adjust__range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#dcdce2}input[type=range].adjust__range:hover::-moz-range-thumb{background:var(--accent)}.export{display:flex;flex-direction:column;gap:16px;padding:14px 18px 18px}.export__row{display:flex;align-items:center;justify-content:space-between;gap:10px}.export__label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}.export__select{height:28px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:12px;cursor:pointer}.export__select:hover{border-color:#3a3a44}.export__quality .adjust__head{margin-bottom:7px}.export__dims{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--text)}.export__go{width:100%}.export__status{margin:0;min-height:16px;font-size:11.5px;color:var(--text-faint)}.export__status.is-error{color:var(--danger)}.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}.presets{display:flex;flex-direction:column;gap:6px;padding:10px 18px 18px}.preset{width:100%;text-align:left;color:var(--text-dim)}.preset:hover{color:var(--text)}.custom-presets{display:flex;flex-direction:column;gap:6px;padding:14px 18px 6px;border-top:1px solid var(--line)}.custom-presets__label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}.custom-presets__input{height:28px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:12px}.custom-presets__list{display:flex;flex-direction:column;gap:6px;padding:0 18px 18px}.custom-presets__list:empty{display:none}.custom-preset{display:flex;gap:6px;align-items:stretch}.custom-preset .preset{flex:1;min-width:0}.custom-preset__edit,.custom-preset__delete{flex:0 0 auto;padding:0 9px;font-size:11.5px}.custom-preset__rename-input{flex:1;min-width:0;height:auto;padding:7px 9px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:12.5px}.statusbar{display:flex;align-items:center;gap:16px;height:32px;flex:0 0 auto;padding:0 10px 0 14px;background:var(--bg-panel);border-top:1px solid var(--line);font-size:11.5px;color:var(--text-dim)}.statusbar__status{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statusbar__status.is-error{color:var(--danger)}.zoom{display:flex;align-items:center;gap:4px;flex:0 0 auto}.zoom__btn{min-width:24px;height:22px;padding:0 6px;border:1px solid transparent;border-radius:4px;background:none;color:var(--text-dim);font:inherit;font-size:13px;line-height:1;cursor:pointer}.zoom__btn:hover{background:var(--bg-hover);color:var(--text)}.zoom__btn--wide{font-size:11px;padding:0 8px}.zoom__value{min-width:44px;text-align:center;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--text)}@media(max-width:1100px){.panel{width:258px}.toolrail{width:62px}}@media(max-width:900px){.panel-toggle{display:inline-block}.panel{position:absolute;top:0;right:0;bottom:0;z-index:20;width:268px;box-shadow:-18px 0 40px #00000073;transform:translate(100%);transition:transform .16s ease}.app.panel-open .panel{transform:translate(0)}.topbar__file{display:none}}@media(max-width:640px){.brand__name,.topbar__hist-label{display:none}.topbar__hist{padding:0 8px;gap:0}.toolrail{width:54px;padding:6px 4px}.tool__label{font-size:8.5px}.empty__drop{padding:28px 24px}}.panel__actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px;align-items:center}.comp-rotation{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-dim)}.crop-aspect{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 18px}.crop-aspect__label{font-size:12px;color:var(--text-dim);margin-right:4px}.crop-aspect__btn{padding:5px 10px;font-size:12px}.crop-aspect__btn.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.resize-input{width:96px;text-align:right}.resize-aspect{display:flex;align-items:center;gap:8px;padding:4px 0}.resize-aspect__label{font-size:12.5px;color:var(--text-dim);cursor:pointer}.crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;touch-action:none}.crop-box{position:absolute;border:1.5px solid var(--accent);box-shadow:0 0 0 9999px #0000008c;cursor:move;outline:none}.crop-box:focus-visible{border-color:#fff}.crop-handle{position:absolute;width:14px;height:14px;background:var(--accent);border:2px solid #0b0b0d;border-radius:3px}.crop-handle--nw{top:-7px;left:-7px;cursor:nwse-resize}.crop-handle--ne{top:-7px;right:-7px;cursor:nesw-resize}.crop-handle--sw{bottom:-7px;left:-7px;cursor:nesw-resize}.crop-handle--se{bottom:-7px;right:-7px;cursor:nwse-resize}.panel>.export__row,.text-selected>.export__row{padding:5px 18px}.text-content{display:block;width:calc(100% - 36px);margin:10px 18px 4px;padding:8px 10px;min-height:56px;resize:vertical;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:12.5px;line-height:1.45}.text-content:focus{outline:none;border-color:var(--accent)}.text-content::placeholder{color:var(--text-faint)}.text-color{width:44px;height:28px;padding:2px 4px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);cursor:pointer}.text-hex{width:92px;height:28px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font-family:var(--mono);font-size:12px}.text-hex:focus{outline:none;border-color:var(--accent)}.text-unit{font-size:11px;color:var(--text-faint)}.text-selected .crop-aspect{padding:6px 18px}.text-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;touch-action:none;cursor:default}.text-sel{position:absolute;box-sizing:border-box;border:1.5px dashed var(--accent);pointer-events:none}.font-picker{position:relative;flex:1;min-width:140px;max-width:210px}.font-picker__trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:28px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:12px;text-align:left;cursor:pointer}.font-picker__trigger:after{content:"";flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-dim)}.font-picker__trigger:hover,.font-picker__trigger[aria-expanded=true]{border-color:var(--accent)}.font-picker__trigger:focus-visible,.font-search:focus-visible{outline:1px solid var(--accent);outline-offset:1px}.font-picker__menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;width:250px;padding:8px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-panel);box-shadow:0 12px 28px #00000080}.font-search{display:block;box-sizing:border-box;width:100%;height:28px;padding:0 8px;margin-bottom:6px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:12px}.font-search:focus{outline:none;border-color:var(--accent)}.font-search::placeholder{color:var(--text-faint)}.font-category{box-sizing:border-box;width:100%;margin-bottom:6px}.font-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain}.font-opt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:4px;font-size:12px;color:var(--text);cursor:pointer}.font-opt:hover,.font-opt.is-cursor{background:var(--bg-raised)}.font-opt.is-cursor{outline:1px solid var(--line-strong);outline-offset:-1px}.font-opt.is-selected .font-opt__name{color:var(--accent);font-weight:600}.font-opt__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-opt__preview{flex:0 0 auto;font-size:15px;color:var(--text-dim)}.font-empty{padding:8px;font-size:12px;color:var(--text-faint)}.font-hint{min-height:15px;padding:0 18px 3px;font-size:11px;color:var(--text-faint)}.font-hint[data-state=loading]{color:var(--text-dim)}.font-hint[data-state=failure]{color:var(--accent)}.appfoot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;min-height:26px;flex:0 0 auto;padding:3px 12px;background:var(--bg-panel);border-top:1px solid var(--line);font-size:11px;letter-spacing:.02em;color:var(--text-faint)}.appfoot__name{font-weight:600;color:var(--text-dim);letter-spacing:.03em;white-space:nowrap}.appfoot__motto{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.appfoot__heart{width:12px;height:12px;flex:0 0 auto;fill:var(--accent)}.appfoot__ver{margin-left:4px;color:var(--text-dim)}@media(max-width:640px){.appfoot{font-size:10.5px;gap:5px}}.mask-overlay{position:absolute;z-index:6;touch-action:none;cursor:crosshair}.mask-overlay__tint{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.mask-overlay__cursor{position:absolute;border:1.5px solid rgba(255,255,255,.9);outline:1px solid rgba(0,0,0,.55);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.mask-mode__btn.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.mask-range{padding:4px 18px 2px}.mask-empty{padding:4px 18px 12px;color:var(--text-faint)}