:root{--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-orange-400:oklch(75% .183 55.934);--color-orange-500:oklch(70.5% .213 47.604);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-cyan-400:oklch(78.9% .154 211.53);--color-cyan-500:oklch(71.5% .143 215.221);--color-cyan-600:oklch(60.9% .126 221.723);--color-sky-400:oklch(74.6% .16 232.661);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-violet-500:oklch(60.6% .25 292.717);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-fuchsia-500:oklch(66.7% .295 322.15);--color-fuchsia-600:oklch(59.1% .293 322.896);--color-pink-300:oklch(82.3% .12 346.018);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-500:oklch(64.5% .246 16.439);--color-slate-500:oklch(55.4% .046 257.417);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff}:root{font-family:Inter,-apple-system,system-ui,Segoe UI,Roboto,sans-serif;color:var(--color-gray-900);background:#f5f5f5;font-synthesis:none;-webkit-font-smoothing:antialiased;--panel:rgba(255,255,255,.9)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;min-width:320px}body{overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--color-blue-600);outline-offset:3px}.app-shell{position:relative;width:100%;height:100svh;overflow:hidden}.comparison{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr 1fr}.preview-panel{position:relative;overflow:hidden;min-width:0;background:#f5f5f5}.preview-panel>img,.preview-panel>canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.effect-panel>div:not(.empty-state):not(.processing):not(.error-layer){width:100%;height:100%}.effect-panel canvas,.full-stage canvas{display:block;width:100%;height:100%}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:14px;color:var(--color-gray-400)}.empty-state small{max-width:340px;text-align:center;font-size:12px;line-height:1.5}.source-panel .empty-state{background:var(--color-gray-200)}.is-empty .effect-panel{background:var(--color-gray-300)}.upload-pill{position:absolute;z-index:6;top:32px;left:32px;padding:12px 32px;border:1px solid var(--color-gray-100);border-radius:24px;box-shadow:0 8px 16px #00000014;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.upload-pill strong{font-size:14px;line-height:20px;letter-spacing:-.025em}.upload-pill small{font-size:12px;line-height:16px;font-weight:500;color:var(--color-gray-500)}.upload-pill:hover{transform:scale(1.05)}.export-button{position:absolute;z-index:6;top:32px;right:32px;display:flex;align-items:center;gap:6px;padding:12px 16px;border:1px solid var(--color-gray-200);border-radius:999px;background:var(--panel);font-size:11px;font-weight:700}.mode-panel{position:absolute;z-index:160;left:32px;bottom:120px;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid #ffffff66;border-radius:16px;background:var(--panel);box-shadow:0 20px 25px -5px #0000001a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);max-width:90vw}.mode-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.mode-group{display:flex;gap:4px;align-items:center}.mode-group:first-child{padding-right:12px;border-right:1px solid #e5e7eb4d}.mode-button{border:0;border-radius:6px;padding:4px 8px;background:var(--color-gray-100);color:var(--color-gray-600);font-size:10px;font-weight:700;white-space:nowrap;line-height:15px}.mode-button:hover{background:var(--color-gray-200)}.mode-button.selected{background:var(--color-gray-900);color:#fff}.mode-plexus-o.selected{background:var(--color-gray-700)}.mode-link.selected{background:var(--color-emerald-500)}.mode-lightning.selected{background:var(--color-yellow-400);color:#000}.mode-tracker.selected{background:var(--color-blue-600)}.mode-raindrop.selected{background:linear-gradient(to right in oklab,var(--color-cyan-400),var(--color-blue-500))}.mode-snow.selected{background:var(--color-sky-400);color:#fff}.mode-wave.selected{background:var(--color-teal-500)}.mode-stretch.selected{background:var(--color-purple-600)}.mode-pixel.selected{background:var(--color-pink-500)}.mode-mosaic.selected{background:var(--color-indigo-500)}.mode-dot.selected{background:var(--color-rose-500)}.mode-halftone.selected{background:var(--color-orange-500)}.mode-matrix.selected{background:var(--color-emerald-600)}.mode-mask.selected{background:var(--color-slate-500)}.mode-sketch.selected{background:var(--color-gray-800);color:#fff}.mode-typo.selected{background:var(--color-violet-500)}.mode-typo1.selected{background:var(--color-fuchsia-600)}.mode-rgb.selected{background:linear-gradient(to right in oklab,var(--color-red-500),var(--color-green-500),var(--color-blue-500))}.mode-bsod.selected{background:#00a}.mode-slit.selected{background:linear-gradient(to right in oklab,var(--color-pink-500),var(--color-orange-400))}.mode-kaleidoscope.selected{background:linear-gradient(to right in oklab,var(--color-violet-500),var(--color-fuchsia-500),var(--color-pink-500))}.control-bar{position:absolute;z-index:160;left:32px;bottom:40px;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 64px);padding:12px 24px;border:1px solid #ffffff33;border-radius:999px;background:var(--panel);box-shadow:0 20px 25px -5px #0000001a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.swatch-group,.view-options,.mask-control{display:flex;align-items:center;flex-shrink:0}.swatch-group{gap:8px}.control-label{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--color-gray-500);white-space:nowrap;margin-right:4px}.swatch{width:16px;height:16px;flex:0 0 16px;padding:0;border:0;border-radius:50%;background:var(--swatch);opacity:.7}.swatch:hover{transform:scale(1.25);opacity:1}.swatch.active{opacity:1;transform:scale(1.25);box-shadow:0 0 0 2px var(--color-gray-900),0 3px 6px #0002}.swatch.no-color{position:relative;border:1px solid #ccc}.no-color span{display:block;width:100%;height:1px;background:var(--color-red-400);transform:rotate(45deg)}.divider{height:32px;width:1px;flex-shrink:0;background:var(--color-gray-300)}.view-options{gap:4px}.view-button{font-size:12px;font-weight:700;line-height:16px;border:1px solid var(--color-gray-300);background:#fff;color:var(--color-gray-500);padding:4px 12px;border-radius:999px;white-space:nowrap}.view-button.selected,.full-button{background:var(--color-gray-800);color:#fff;border-color:var(--color-gray-600)}.view-grayscale.selected{background:var(--color-gray-900);border-color:var(--color-gray-900)}.view-xray.selected{background:var(--color-cyan-600);border-color:var(--color-cyan-600)}.view-mix.selected{background:linear-gradient(to right in oklab,var(--color-pink-500),var(--color-yellow-500));border-color:transparent}.mask-control{gap:8px}.mask-control .control-label{margin:0}.mask-control input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:999px;background:var(--color-gray-300);width:64px;height:4px;margin:0;accent-color:#007bff;cursor:pointer}.mask-control output{color:var(--color-gray-600);font:10px/15px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.control-toggle{position:absolute;z-index:50;left:32px;bottom:225px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #e5e7eb80;border-radius:50%;background:var(--panel);color:var(--color-gray-500);box-shadow:0 10px 15px -3px #0000001a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.control-toggle:hover{background:var(--color-gray-100)}.processing,.error-layer{position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;background:#fff9;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.error-layer{color:#be123c;padding:24px}.spinner{animation:spin 1s linear infinite}.upload-error{position:absolute;z-index:8;top:110px;left:32px;padding:10px;background:#fff;color:#be123c;font-size:13px}.is-dragging:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;pointer-events:none;border:3px dashed var(--color-emerald-500);border-radius:16px;z-index:10}.full-view{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;background:#000}.full-view header{position:absolute;inset:0 0 auto;height:56px;background:#000b;z-index:2;display:flex;align-items:center;padding:0 16px;gap:12px}.full-view header button{border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:6px;font-size:11px;padding:8px}.close-full{margin-left:auto}.full-stage{width:100%;height:100%;position:relative}.full-stage>div{width:100%;height:100%}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1050px){.control-bar{flex-wrap:wrap;border-radius:24px;gap:10px 12px;max-width:calc(100vw - 32px);left:16px;padding:12px 16px;bottom:16px}.mode-panel{left:16px;bottom:120px;gap:8px;padding:12px}.control-toggle{left:16px;bottom:225px}.swatch-group{gap:6px}.view-button{padding:4px 9px}}@media(max-width:760px){.mode-panel{display:flex;flex-direction:column;align-items:flex-start;bottom:166px;right:16px;max-width:none;gap:8px;overflow:auto}.mode-group:first-child{border:0}.mode-button{font-size:9px;padding:5px 7px}.control-toggle{bottom:337px}.control-bar{right:16px;justify-content:center;gap:12px;max-height:142px}.divider{display:none}.upload-pill{top:16px;left:16px;width:112px;height:56px;border-radius:20px}.export-button{top:16px;right:16px}.control-label{font-size:9px}.empty-state{font-size:12px;padding:16px}.empty-state small{font-size:10px}.comparison{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}button{transition:none}}.mode-cursor.selected{background:var(--color-gray-800)}.mode-button,.swatch,.view-button,.control-toggle,.upload-pill,.history-thumb,.history-remove{transition:all .15s cubic-bezier(.4,0,.2,1)}.upload-pill:active{transform:scale(.95)}.upload-pill:disabled{opacity:.5;cursor:not-allowed}.control-toggle.collapsed{left:16px;bottom:16px;border-radius:8px}.history-strip{position:absolute;left:24px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:12px}.history-item{position:relative}.history-thumb{position:relative;display:block;width:40px;height:40px;overflow:hidden;padding:0;border:1px solid #ffffff33;border-radius:6px;opacity:.5;filter:grayscale(1);background:transparent}.history-thumb img{width:100%;height:100%;object-fit:cover}.history-thumb span{position:absolute;bottom:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--color-blue-500)}.history-thumb.selected{border-color:var(--color-blue-500);opacity:1;filter:none;box-shadow:0 0 0 2px var(--color-blue-500);transform:scale(1.1)}.history-item:hover .history-thumb{opacity:1;filter:none}.history-remove{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border:0;border-radius:50%;background:var(--color-red-500);color:#fff;padding:0;font-size:10px;opacity:0;z-index:2}.history-item:hover .history-remove,.history-remove:focus-visible{opacity:1}.full-view header{height:56px;border-bottom:1px solid #ffffff1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:space-between}.full-view header .full-upload,.full-view header .close-full{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#ffffff1a;font-size:18px;padding:0;flex-shrink:0}.full-view header .close-full{margin:0}.history-strip.horizontal{position:static;transform:none;flex-direction:row;overflow-x:auto;padding:0 16px;gap:8px}.horizontal .history-thumb{width:36px;height:36px}.horizontal .history-thumb.selected{transform:none;box-shadow:0 0 0 1px var(--color-blue-500)}.full-export{margin-left:auto}.mask-control input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#007bff;border-radius:50%;border:0}.mask-control input::-moz-range-thumb{width:16px;height:16px;background:#007bff;border-radius:50%;border:0}.view-mix.selected{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{50%{opacity:.5}}@media(max-width:760px){.mode-row{gap:8px}.upload-pill{padding:8px 20px}.history-strip:not(.horizontal){left:12px}}@media(min-width:761px){.upload-pill{width:150.8984375px;height:66px}}.mode-panel{box-shadow:0 25px 50px -12px #00000040}.control-bar{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.empty-state{font-size:16px;line-height:24px;gap:12px;color:var(--color-gray-500)}.empty-state small{font-size:12px;line-height:16px;max-width:none;padding:0 16px;color:var(--color-gray-400)}@media(max-width:760px){.empty-state{font-size:12px}.empty-state small{font-size:10px}}.control-bar{box-shadow:0 25px 50px -12px #00000040}.mode-group:first-child{border-right-color:color-mix(in oklab,var(--color-gray-200) 30%,transparent)}.full-view header{background:#000c}.full-view header .history-strip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 250px)}.full-view header .history-thumb{padding:0;border:1px solid #ffffff33}.full-view header .history-thumb.selected{border-color:var(--color-blue-500)}.processing-copy{display:flex;flex-direction:column;gap:10px;max-width:calc(100% - 48px)}.processing-copy progress{width:180px;max-width:100%;height:5px;accent-color:#007bff}.processing-copy small{font-size:11px;color:#6b7280}.error-layer{flex-direction:column;text-align:center;gap:12px}.error-layer small{font-size:11px;max-width:360px;overflow-wrap:anywhere;color:#6b7280}.error-layer button{padding:8px 20px;border:0;border-radius:20px;background:#1f2937;color:#fff;font-size:12px;font-weight:700}