:root{--bg: #f6f5f2;--surface: #ffffff;--text: #1b1b19;--muted: #5f5e58;--line: #e3e1da;--accent: #3a49d9;--accent-hover: #2d3bc0;--accent-text: #ffffff;--accent-soft: #e8eafc;--danger: #b42318;--checker-a: #ffffff;--checker-b: #e9e8e3;--radius: 18px;--shadow: 0 1px 2px rgb(20 20 18 / .05), 0 8px 32px -12px rgb(20 20 18 / .14);--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #141413;--surface: #1d1d1b;--text: #f1f0ec;--muted: #a6a59e;--line: #2f2f2c;--accent: #8b97ff;--accent-hover: #a3adff;--accent-text: #11131f;--accent-soft: #252a4d;--danger: #ff8a7a;--checker-a: #2a2a28;--checker-b: #222220;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 32px -12px rgb(0 0 0 / .6)}}*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}a{color:var(--accent);text-underline-offset:2px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:10;background:var(--surface);padding:8px 12px;border-radius:8px}.site-header,.site-footer,main{max-width:960px;margin:0 auto;padding-inline:20px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}.brand{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none}.brand svg{color:var(--accent)}nav{display:flex;gap:4px}nav a{color:var(--muted);text-decoration:none;font-size:.94rem;padding:6px 10px;border-radius:8px}nav a:hover{color:var(--text);background:var(--line)}.site-header nav a[aria-current=page]{color:var(--text);font-weight:600}.nav-short{display:none}.footer-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:10px}.footer-links a{padding:0;font-size:inherit;color:var(--muted)}.footer-links a:hover{background:none;color:var(--text)}.site-footer{border-top:1px solid var(--line);margin-top:64px;padding-block:28px 40px;color:var(--muted);font-size:.9rem}.site-footer p{margin:0 0 4px}.site-footer a{color:inherit}.fine{font-size:.82rem}.hero{text-align:center;padding:28px 0 24px}.hero h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.1;letter-spacing:-.025em;margin:0 auto 12px;max-width:16ch;text-wrap:balance}.lede{color:var(--muted);font-size:1.1rem;margin:0 auto;max-width:44ch;text-wrap:balance}.tool{max-width:760px;margin:0 auto}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:300px;padding:36px 20px;background:var(--surface);border:2px dashed var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}.drop:hover,body.dragging .drop{border-color:var(--accent)}body.dragging .drop{background:var(--accent-soft)}.drop-icon{color:var(--muted);margin-bottom:6px;pointer-events:none}.drop-hint{margin:4px 0 0;color:var(--muted)}.drop-fine{margin:0;color:var(--muted);font-size:.85rem}.drop p{pointer-events:none}.drop p button{pointer-events:auto}kbd{font:inherit;font-size:.85em;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--bg)}.link-btn{display:block;margin:6px auto 0;background:none;border:0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:4px}.samples{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px;color:var(--muted);font-size:.92rem}.samples button{padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:none;line-height:0;transition:transform .15s}.samples button:hover{transform:translateY(-2px)}.samples img{width:72px;height:48px;object-fit:cover}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid transparent;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s;white-space:nowrap}.btn-lg{min-height:54px;padding:0 32px;font-size:1.08rem}.btn-primary{background:var(--accent);color:var(--accent-text)}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}.btn-ghost:hover{background:var(--line)}.work{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;outline:none}.stage{position:relative;display:grid;place-items:center;min-height:240px;max-height:min(62vh,620px);border-radius:12px;overflow:hidden;background:var(--bg)}.stage img{display:block;max-width:100%;max-height:min(62vh,620px);object-fit:contain}.canvas-wrap{position:relative;max-width:100%;line-height:0;background-color:var(--checker-a);background-image:conic-gradient(var(--checker-b) 25%,transparent 0 50%,var(--checker-b) 0 75%,transparent 0);background-size:20px 20px;touch-action:none}.canvas-wrap.opaque{background:none}.canvas-wrap canvas{display:block;max-width:100%;max-height:min(62vh,620px);width:auto;height:auto}.crop-box{position:absolute;box-shadow:0 0 0 9999px #00000080;outline:1px solid rgb(255 255 255 / .9);cursor:move;touch-action:none;background-image:linear-gradient(#ffffff59,#ffffff59),linear-gradient(#ffffff59,#ffffff59),linear-gradient(90deg,#ffffff59,#ffffff59),linear-gradient(90deg,#ffffff59,#ffffff59);background-size:100% 1px,100% 1px,1px 100%,1px 100%;background-position:0 33.33%,0 66.66%,33.33% 0,66.66% 0;background-repeat:no-repeat}.crop-box:focus-visible{outline:2px solid var(--accent)}.canvas-wrap.cropping{overflow:hidden}.crop-handle{position:absolute;width:22px;height:22px;--hx: 0px;--hy: 0px;transform:translate(var(--hx),var(--hy))}.crop-handle:after{content:"";position:absolute;inset:6px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px #00000059}.h-nw{left:0;top:0;cursor:nwse-resize}.h-ne{left:100%;top:0;--hx: -100%;cursor:nesw-resize}.h-sw{left:0;top:100%;--hy: -100%;cursor:nesw-resize}.h-se{left:100%;top:100%;--hx: -100%;--hy: -100%;cursor:nwse-resize}.h-n{left:50%;top:0;--hx: -50%;cursor:ns-resize}.h-s{left:50%;top:100%;--hx: -50%;--hy: -100%;cursor:ns-resize}.h-w{left:0;top:50%;--hy: -50%;cursor:ew-resize}.h-e{left:100%;top:50%;--hx: -100%;--hy: -50%;cursor:ew-resize}.crop-box.locked .h-n,.crop-box.locked .h-s,.crop-box.locked .h-e,.crop-box.locked .h-w{display:none}@media(pointer:coarse){.crop-handle{width:36px;height:36px}.crop-handle:after{inset:11px}}.editor{border-top:1px solid var(--line);margin:6px 4px 0;padding-top:12px}.editor-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}.tabs{display:inline-flex;padding:3px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}.tabs [role=tab]{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;min-height:36px;padding:0 14px;border-radius:999px;cursor:pointer}.tabs [role=tab][aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f}.editor-tools{display:flex;gap:6px}.tool-btn{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}.tool-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.tool-btn:disabled{opacity:.45;cursor:not-allowed}.panel{padding:14px 0 4px}.panel-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.panel-hint{margin:10px 0 0;color:var(--muted);font-size:.84rem;line-height:1.5}.swatches{display:flex;flex-wrap:wrap;gap:8px}.sw{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid rgb(0 0 0 / .15);background:var(--sw, transparent);cursor:pointer;padding:0}.sw-none{background-color:#fff;background-image:conic-gradient(#d9d8d3 25%,transparent 0 50%,#d9d8d3 0 75%,transparent 0);background-size:12px 12px}.sw[aria-checked=true],.sw-custom.checked{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}.sw-custom{display:inline-block;overflow:hidden;background:conic-gradient(#e5484d,#ffc53d,#30a46c,#0090ff,#8e4ec6,#e5484d)}.sw-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}.sw-custom:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.sw-photo{display:inline-grid;place-items:center;background:var(--bg);color:var(--muted)}.sw:disabled{opacity:.35;cursor:not-allowed}.hex-row{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.86rem;color:var(--muted)}.hex-input{width:108px;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem;text-transform:uppercase}.hex-input[aria-invalid=true]{border-color:var(--danger)}.hex-hint{font-size:.8rem}.slider{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-size:.88rem;color:var(--muted);max-width:420px}.slider input[type=range]{flex:1;accent-color:var(--accent);min-height:32px}.slider-value{min-width:3.2em;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.88rem;cursor:pointer}.chip:hover{border-color:var(--accent)}.chip[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}.size-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:12px}.size-row label{display:grid;gap:4px;font-size:.82rem;color:var(--muted)}.size-row input{width:110px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:1rem}.size-row>span{color:var(--muted);padding-bottom:9px}.out-size{margin:8px 4px 0;color:var(--muted);font-size:.82rem;text-align:right}.work[data-state=working] .stage img{opacity:.55;filter:saturate(.6)}.scan{display:none}.work[data-state=working] .scan{display:block;position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .35) 50%,transparent 70%);background-size:250% 100%;animation:sweep 1.6s linear infinite}@keyframes sweep{0%{background-position:120% 0}to{background-position:-120% 0}}.status{padding:14px 4px 4px;min-height:48px}.status p{margin:0;color:var(--muted);font-size:.95rem;text-align:center}.work[data-state=error] .status p{color:var(--danger)}.progress{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:0 auto 10px;max-width:420px}.progress-bar{height:100%;background:var(--accent);transform-origin:left;transform:scaleX(.02);transition:transform .2s}.actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:8px 4px 2px}.action-buttons{display:flex;gap:10px;margin-left:auto}.toggle{display:inline-flex;padding:3px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}.toggle[hidden]{display:none}.toggle button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;padding:6px 14px;min-height:36px;border-radius:999px;cursor:pointer}.toggle button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f}.privacy-note{display:flex;align-items:flex-start;justify-content:center;gap:8px;color:var(--muted);font-size:.86rem;margin:18px auto 0;max-width:560px;text-align:center}.privacy-note svg{flex:none;margin-top:3px}.history{max-width:760px;margin:40px auto 0}.history-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.history-head h2{font-size:1.2rem;letter-spacing:-.01em;margin:0}.history-head .link-btn{display:inline;margin:0;color:var(--muted);font-size:.9rem}.history-head .link-btn:hover{color:var(--danger)}.history-note{margin:2px 0 14px;color:var(--muted);font-size:.86rem}.history-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.history-item{display:flex;flex-direction:column;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-width:0}.history-thumb{display:grid;place-items:center;aspect-ratio:4 / 3;width:100%;padding:8px;border:0;cursor:pointer;background-color:var(--checker-a);background-image:conic-gradient(var(--checker-b) 25%,transparent 0 50%,var(--checker-b) 0 75%,transparent 0);background-size:14px 14px}.history-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .15s}.history-thumb:hover img{transform:scale(1.03)}.history-meta{display:flex;flex-direction:column;padding:8px 10px 0;min-width:0}.history-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-when{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-actions{display:flex;gap:4px;align-items:center;padding:8px 6px 8px 10px}.icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}.icon-btn:hover{background:var(--line);color:var(--text)}.dl-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}.dl-btn:hover{background:var(--accent);color:var(--accent-text)}.icon-btn[data-act=delete]:hover{color:var(--danger)}.history-actions .icon-btn[data-act=delete]{margin-left:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.content{max-width:680px;margin:64px auto 0}.content h2{font-size:1.45rem;letter-spacing:-.015em;line-height:1.25;margin:0 0 14px}.content p,.content li{color:var(--muted)}.content strong{color:var(--text)}.steps{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:18px}.steps li{counter-increment:step;position:relative;padding-left:46px}.steps li:before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.9rem}.steps strong{display:block}.tips{padding-left:1.2em;margin:0}.tips li+li{margin-top:6px}.faq details{border-top:1px solid var(--line);padding:4px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style-position:outside}.faq details p{margin:0 0 14px}.features{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 24px}.features strong{display:block}.lede-left{font-size:1.1rem}.table-wrap{overflow-x:auto;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.compare{width:100%;border-collapse:collapse;font-size:.94rem}.compare th,.compare td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}.compare thead th{color:var(--text);font-size:.9rem}.compare tbody th{font-weight:600;color:var(--text);width:34%}.compare td{color:var(--muted)}.compare td:nth-child(2){color:var(--text)}.fine-print{font-size:.82rem}.page .btn{margin:6px 0}.page{max-width:680px;margin:24px auto 0}.page h1{font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 8px}.page h2{font-size:1.2rem;margin:32px 0 8px}.page p,.page li{color:var(--muted)}@media(max-width:560px){.site-header,.site-footer,main{padding-inline:16px}.site-header{flex-wrap:wrap;gap:6px;padding-block:14px 4px}.site-header nav{width:100%;margin-left:-8px}.site-header nav a{padding:6px 8px;font-size:.9rem;white-space:nowrap}.nav-long{display:none}.nav-short{display:inline}.hero{padding-top:12px}.drop{min-height:240px}.actions{justify-content:center}.action-buttons{margin-left:0;width:100%}.action-buttons{flex-wrap:wrap}.action-buttons .btn{flex:1}#download,#retry{order:-1;flex-basis:100%}.toggle{margin:0 auto}.editor-bar{justify-content:center}.editor-tools{width:100%;flex-wrap:wrap}.editor-tools .tool-btn{flex:1 1 auto;justify-content:center;padding:0 10px;font-size:.84rem}.tabs{width:100%;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs [role=tab]{flex:1 0 auto;padding:0 12px}.out-size{text-align:center}.samples span{flex-basis:100%;text-align:center}.history-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}@media(pointer:coarse){.hint-desktop{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}