:root{--filter-outline-width: 1px;--filter-outline-neg-width: calc(-1 * var(--filter-outline-width));--filter-outline-color: rgb(255, 255, 255);--image-filter-shadow: drop-shadow(5px 15px 10px rgba(0, 0, 0, .25));--image-filter-outline: drop-shadow(var(--filter-outline-width) var(--filter-outline-width) 0px var(--filter-outline-color)) drop-shadow(var(--filter-outline-neg-width) var(--filter-outline-width) 0px var(--filter-outline-color)) drop-shadow(var(--filter-outline-neg-width) var(--filter-outline-neg-width) 0px var(--filter-outline-color)) drop-shadow(var(--filter-outline-width) var(--filter-outline-neg-width) 0px var(--filter-outline-color)) drop-shadow(0px 2px 2px rgba(0, 0, 0, .5));--image-filter-gradient: drop-shadow(0px 0px 20px rgba(139, 92, 246, .3)) drop-shadow(5px 15px 10px rgba(0, 0, 0, .25));--image-filter-rainbow: url(#rainbow-outline);--image-filter: var(--image-filter-shadow);--text-color: #111827;--panel-bg: "transparent"}body{font-family:Inter,sans-serif;background-color:#f3f4f6;background-image:radial-gradient(#d1d5db 1px,transparent 1px);background-size:18px 18px;color:var(--text-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100vh;padding:0;margin:0;transition:box-shadow .2s ease-in-out;overflow-x:hidden}body.drag-over,.canvas-container.drag-over{box-shadow:inset 0 0 0 25px #22d3ee}.app-container{width:100%;height:100%;background:transparent;padding:1.5rem;border-radius:.75rem;box-shadow:none;border:none;z-index:10;overflow:hidden;min-height:calc(100vh - 6rem);overflow-y:scroll}h1{font-size:1.5rem;line-height:2rem;font-weight:700;margin-bottom:1.25rem;text-align:center;color:var(--text-color)}h1 span{font-size:1.25rem;font-weight:400}@media (min-width: 640px){h1{font-size:1.875rem;line-height:2.25rem}}.status-message{text-align:left;margin:0;min-height:1.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--text-color);transition:opacity .3s ease-in-out,color .2s ease-in-out;white-space:normal}.status-message.error{color:#b91c1c}.status-message.loading{color:#0284c7}.status-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:.75rem;max-width:80vw;margin:auto}.toolbar-item{display:flex;align-items:center;gap:.5rem;border-radius:.75rem;background:var(--panel-bg)}.toolbar-item.hidden{display:none}.toolbar-item select,.toolbar-item input,.toolbar-item button{font-family:inherit}.drop-zone-app{margin-bottom:1.5rem;width:calc(100% - 2rem);height:12rem;border-radius:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#475569;cursor:pointer;transition:border-color .2s ease-in-out,color .2s ease-in-out,background-color .2s ease-in-out;margin-top:1rem;padding:1rem}.drop-zone-app.hidden,.format-controls.hidden{display:none}.drop-zone-app.minimized{height:1rem;padding:.25rem;font-size:.75rem}.drop-zone-app.minimized .drop-text-main{font-size:.75rem}.drop-zone-app.minimized .drop-text-sub{display:none}.drop-zone-app.minimized svg,.drop-zone-app.minimized img{display:none}.drop-zone-app:hover{border-color:#0ea5e9;color:#0ea5e9}.drop-zone-app.drop-zone-active{border-color:#0ea5e9;background-color:#0ea5e914;color:#0ea5e9}@media (min-width: 640px){.drop-zone-app{height:14rem}}.drop-zone-app svg,.drop-zone-app img{margin-bottom:1rem}.drop-zone-app .drop-text-main{font-weight:600}.drop-zone-app .drop-text-sub{font-size:.75rem;line-height:1rem;margin-top:.25rem}.hidden-input{display:none}.canvas-container{width:100%;margin-bottom:1.5rem;display:none;justify-content:center;align-items:center;object-fit:cover;position:relative}.canvas-container.visible{display:flex}.output-canvas{border-radius:.375rem;border:none;width:100%}.clip-path-overlay{position:absolute;top:0;left:0;pointer-events:none;display:none;width:100%;height:100%;z-index:1;-webkit-user-select:none;user-select:none}.clip-path-overlay svg{width:100%;height:100%;opacity:.7}.img-wrap{position:relative;display:inline-block;max-width:50vw;box-sizing:border-box;vertical-align:top}.img-wrap.slicing img.batch-img{cursor:crosshair}.slice-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.slice-rect{position:absolute;border:2px solid #22d3ee;background:#22d3ee2e;box-shadow:0 0 0 1px #0f172a33 inset}.slice-hint{position:absolute;top:8px;left:8px;background:#02061799;color:#e2e8f0;font-size:12px;padding:4px 6px;border-radius:6px}.tile-clip-overlay{position:absolute;inset:0;pointer-events:none;display:none;width:100%;height:100%;z-index:2;-webkit-user-select:none;user-select:none}.tile-clip-overlay svg{width:100%;height:100%;opacity:1}.tile-clip-overlay.interactive{pointer-events:auto}.tile-clip-overlay svg .island{fill:#3b82f659;stroke:#3b82f6;stroke-width:1;transition:fill .15s ease,stroke .15s ease}.tile-clip-overlay svg .island:hover{fill:#3b82f68c}.tile-clip-overlay svg .island.selected{fill:#22c55e73;stroke:#22c55e}.controls-container{display:none;align-items:center;gap:.75rem;opacity:0;transition:opacity .2s ease-in-out}.controls-container.visible{display:flex;opacity:1}.toolbar-actions{display:flex;align-items:center;gap:.5rem}.toolbar-actions .btn{min-width:7rem;justify-content:center}@media (max-width: 768px){.toolbar-item{flex:1 1 100%;justify-content:space-between}.toolbar-actions{width:100%;justify-content:space-between}.toolbar-actions .btn{flex:1 1 48%}}.controls-label{display:none}.reset-button-container{margin-top:1.5rem;text-align:center}.btn-link{background:none;border:none;color:#60a5fa;text-decoration:underline;cursor:pointer;padding:.5rem;font-size:.875rem}.btn-link:hover{color:#3b82f6}.btn-link.hidden{display:none}.btn{font-weight:600;padding:.625rem 1.25rem;border-radius:.5rem;transition:background-color .2s ease-in-out,opacity .2s ease-in-out;width:100%;cursor:pointer;border:none;color:#fff}.btn-small{font-size:.8125rem;padding:.35rem .65rem;border-radius:.375rem;width:auto}.btn-primary{background-color:#0ea5e9}.btn-primary:hover{background-color:#0284c7}.btn-secondary{background-color:#64748b}.btn-secondary:hover{background-color:#475569}.btn-outline{background-color:transparent;border:1px solid #0ea5e9;color:#0ea5e9}.btn-outline:hover{background-color:#0ea5e91a;border-color:#0284c7;color:#0284c7}.btn:disabled,.btn-mini:disabled{opacity:.5;cursor:not-allowed}.btn-primary:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #1f2937,0 0 0 4px #22d3ee}.btn-secondary:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #1f2937,0 0 0 4px #6b7280}.btn-outline:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #1f2937,0 0 0 4px #22d3ee}.progress{width:100%;height:.75rem;background:#fff;border:1px solid #374151;border-radius:.5rem;overflow:hidden}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#a78bfa,#f472b6,#22d3ee);transition:width .2s ease}.progress-row{display:none;gap:.75rem;align-items:center;margin:1rem 0;justify-content:space-between}.progress-row.visible{display:flex}.progress-text{font-size:.875rem;color:#9ca3af;min-width:5rem;text-align:right;display:flex;align-items:center;gap:.5rem}.progress.hidden{display:none}.progress-text-wrap{display:flex;align-items:center;gap:.5rem}.downloads-container{display:flex;align-items:center;flex-direction:column;gap:.5rem;margin:.5rem 0}.download-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#9ca3af;width:min(80vw,400px)}.download-item .progress{flex:1;height:.5rem;background:#fff;border:1px solid #374151;border-radius:.25rem;overflow:hidden}.download-item .progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#a78bfa);transition:width .1s ease}.download-item .download-text{min-width:8rem;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batch-flow{display:none;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:center;margin-top:.75rem;position:relative}.batch-flow.visible{display:flex}.batch-item{position:relative;background:transparent;border:none;border-radius:.5rem;padding:.25rem;display:inline-block}.batch-item img.batch-img{display:block;border-radius:.65rem;max-height:min(calc(var(--image-height)),85vh);height:auto;width:auto;max-width:50vw}@media (max-width: 768px){.img-wrap,.batch-item img.batch-img{max-width:90vw}}.batch-cap{display:none;font-size:.7rem;padding-top:.25rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;opacity:0;transition:opacity .2s ease-in-out}.batch-item:hover .batch-cap{opacity:1}.batch-item.loading img{filter:grayscale(100%) brightness(.8)}.batch-item.processing:before{content:"";position:absolute;inset:-2px;border-radius:1rem;background:linear-gradient(90deg,#22d3ee,#a78bfa,#f472b6,#22d3ee);background-size:50% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:10px;animation:gradientMove 1.3s linear infinite}.batch-item.processing:after{content:"";position:absolute;inset:0;border-radius:1rem;background:radial-gradient(60% 60% at 50% 50%,rgba(34,211,238,.15),transparent 60%);animation:pulse 1.6s ease-in-out infinite;pointer-events:none}@keyframes gradientMove{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:.2}}.overlay{position:absolute;left:50%;transform:translate(-50%);top:calc(100% + .5rem);height:auto;padding:.5rem;color:#111827;opacity:0;transition:opacity .2s ease-in-out;z-index:5;box-sizing:border-box}.batch-item:hover .overlay,.img-wrap:hover .overlay,.batch-item .overlay:hover,.batch-item.slice-mode .overlay{opacity:1}.overlay-content{position:relative;padding:.5rem;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:.5rem;color:inherit;width:fit-content;margin:0;background:#fffffff2;box-shadow:0 4px 12px #0000001a;border:1px solid #d3d3d3;border-radius:1rem}.overlay-content:before{content:"";position:absolute;inset:0;height:2rem;width:100%;margin-top:-1rem}.overlay-left{display:flex;flex-direction:column;min-width:0;gap:4px;text-align:center;align-items:center}.overlay-name{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.98}.overlay-name .image-size,.overlay-name .processing-time{font-size:.72rem;opacity:.9;margin-left:.5rem}.overlay-meta{font-size:.72rem;opacity:.9}.overlay-actions{position:static;display:flex;gap:.4rem;justify-content:center;align-items:center}.btn-mini{font-size:.8125rem;padding:.35rem .65rem;border-radius:.375rem;border:none;cursor:pointer;color:#fff;background-color:#0ea5e9;white-space:nowrap}.btn-mini:hover{background-color:#0284c7}.btn-mini.secondary{background-color:#64748b}.btn-mini.secondary:hover{background-color:#475569}.btn-mini.danger{background-color:#b91c1c}.btn-mini.danger:hover{background-color:#991b1b}.format-select{padding:.35rem .5rem;border-radius:.375rem;border:1px solid #cbd5e1;background:#fff;color:#111827;font-size:.875rem}.format-select:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #1f2937,0 0 0 4px #22d3ee}.format-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}.format-controls input[type=range]{flex:1 1 160px}#previewControls{min-width:220px}#model-selection,#file-format-selection{display:none}.format-label{font-size:.8125rem;font-weight:500;color:var(--text-color);text-transform:uppercase;letter-spacing:.02em}.ml-1{margin-left:.25rem}.batch-item.dragging{box-shadow:0 10px 25px #00000040;cursor:grabbing}.batch-item .batch-img{cursor:grab}.batch-item.ready{box-shadow:none;border-radius:0}.batch-item.ready img.batch-img{filter:var(--image-filter);transition:filter .2s ease}.batch-item.ready:hover img.batch-img{filter:var(--image-filter)}.batch-item.dragged{transform:scale(1.03) translateY(-.2rem)}.batch-flow.snapped{display:block}.batch-flow.snapped .batch-item{position:absolute;margin:0;transition:left .2s ease,top .2s ease,transform .15s ease}.format-controls .grid-btn{margin-left:0}.format-controls .grid-btn.active{box-shadow:0 0 0 2px #22d3ee33 inset}.focus-overlay{position:fixed;inset:0;background-color:#f3f4f6;background-image:radial-gradient(#d1d5db 1px,transparent 1px);background-size:18px 18px;box-shadow:-8px 0 24px #0206171f;display:none}.focus-sidebar{position:fixed;top:0;right:0;height:100vh;border-left:2px solid #e5e7eb;width:200px;z-index:2001;overflow-y:auto;display:none;padding:8px;box-sizing:border-box;gap:8px}.focus-sidebar .focus-sidebar .batch-item{width:100%;box-sizing:border-box;margin:6px 0;position:relative}.focus-sidebar .focus-hidden{display:none!important}.focus-sidebar .batch-item{width:100%;box-sizing:border-box;margin:6px 0;position:relative}.focus-sidebar .batch-item img.batch-img{max-width:100%;height:auto;display:block;margin:0 auto}.focus-hidden{display:none!important}.focus-sidebar .batch-item .overlay,.focus-sidebar .batch-item:hover .overlay{display:none!important;opacity:0!important;pointer-events:none!important}.focused-tile{box-shadow:0 8px 40px #02061740;border-radius:6px}.focus-mode .overlay,.focus-mode .overlay *{opacity:1!important;pointer-events:auto!important}.focused-tile .img-wrap{width:100%!important;height:100%!important;display:block;box-sizing:border-box}.focused-tile img.batch-img{max-width:none!important;max-height:none!important;width:100%!important;height:100%!important;object-fit:contain;display:block;margin:0 auto}.toggle-container{display:flex;border-radius:6px;overflow:hidden;border:1px solid #d1d5db;background:#f9fafb}.toggle-container label{flex:1;padding:.25rem .5rem;text-align:center;cursor:pointer;background:transparent;font-size:.75rem;color:#6b7280}.toggle-container input[type=radio]{display:none}.toggle-container input[type=radio]:checked+label{background:#3b82f6;color:#fff}.overlay-bottom{display:flex;align-items:center;justify-content:space-between}.overlay-bottom .clip-stats{font-size:.7rem;color:#9ca3af}.hidden{display:none}@supports (corner-shape: squircle){.toolbar-item{corner-shape:squircle;border-radius:1.5rem}.btn-small{corner-shape:squircle;border-radius:3rem}.overlay-content{corner-shape:squircle;border-radius:2rem}.btn-mini,.toggle-container{corner-shape:squircle;border-radius:1.5rem}.toggle-container input[type=radio]:checked+label{corner-shape:squircle;border-radius:1.5rem;margin:2px}}