*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0d0d;--surface:#1a1a1a;--surface2:#242424;--border:#333;--accent:#f5c842;--accent2:#e6a020;--text:#e8e8e8;--muted:#888;--radius:12px}body{background:var(--bg);color:var(--text);flex-direction:column;align-items:center;min-height:100vh;padding:24px 16px 48px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}header{text-align:center;margin-bottom:32px}header h1{letter-spacing:-.5px;font-size:2rem;font-weight:700}header h1 span{color:var(--accent)}header p{color:var(--muted);margin-top:6px;font-size:.9rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:780px;padding:24px}#dropzone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;padding:48px 24px;transition:border-color .2s,background .2s;position:relative}#dropzone:hover,#dropzone.drag-over{border-color:var(--accent);background:#f5c8420d}#dropzone input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}#dropzone .icon{margin-bottom:12px;font-size:2.5rem}#dropzone p{color:var(--muted);font-size:.9rem}#dropzone strong{color:var(--text)}.controls{grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;display:grid}@media (width<=540px){.controls{grid-template-columns:1fr}}.control-group label{color:var(--muted);justify-content:space-between;margin-bottom:6px;font-size:.82rem;display:flex}.control-group label span{color:var(--accent);font-weight:600}input[type=range]{-webkit-appearance:none;background:var(--surface2);border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:16px;height:16px}.control-select select{background:var(--surface2);border:1px solid var(--border);width:100%;color:var(--text);cursor:pointer;border-radius:8px;outline:none;padding:8px 12px;font-size:.9rem}#processBtn{background:var(--accent);color:#000;border-radius:var(--radius);cursor:pointer;border:none;width:100%;margin-top:20px;padding:14px;font-size:1rem;font-weight:700;transition:background .2s}#processBtn:hover:not(:disabled){background:var(--accent2)}#processBtn:disabled{opacity:.5;cursor:not-allowed}#progressWrap{margin-top:16px;display:none}#progressWrap.visible{display:block}#progressLabel{color:var(--muted);margin-bottom:6px;font-size:.82rem}#progressBar{background:var(--surface2);border-radius:2px;height:4px;overflow:hidden}#progressFill{background:var(--accent);border-radius:2px;width:0%;height:100%;transition:width .3s}#resultSection{margin-top:28px;display:none}#resultSection.visible{display:block}.compare-label{color:var(--muted);justify-content:space-between;margin-bottom:8px;font-size:.78rem;display:flex}.canvas-wrap{border-radius:var(--radius);user-select:none;background:#000;position:relative;overflow:hidden}.canvas-wrap canvas{width:100%;height:auto;display:block}#sliderOverlay{background:var(--accent);cursor:ew-resize;z-index:10;width:3px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}#sliderHandle{background:var(--accent);color:#000;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.75rem;font-weight:700;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#beforeCanvas{clip-path:inset(0 50% 0 0);position:absolute;top:0;left:0}#downloadBtn{background:var(--surface2);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;margin-top:16px;padding:12px;font-size:.95rem;font-weight:600;transition:background .2s}#downloadBtn:hover{background:var(--surface);border-color:var(--accent)}#errorMsg{color:#f88;background:#dc32321a;border:1px solid #dc323266;border-radius:8px;margin-top:12px;padding:12px;font-size:.85rem;display:none}#errorMsg.visible{display:block}