:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--secondary-color: #6b7280;--background: #f9fafb;--card-background: #ffffff;--border-color: #e5e7eb;--text-primary: #111827;--text-secondary: #6b7280;--success-color: #059669;--accent-color: #8b5cf6;--border-radius: 16px;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -1px rgb(0 0 0 / .06);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -2px rgb(0 0 0 / .05);--container-padding: 1.5rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,var(--background) 0%,#f3f4f6 100%);color:var(--text-primary);line-height:1.6;min-height:100vh;touch-action:manipulation;letter-spacing:-.025em}.container{container-type:inline-size;max-width:1200px;margin:0 auto;padding:var(--container-padding)}.header{text-align:center;margin-block-end:2rem}.header h1{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:800;-webkit-background-clip:text;background-clip:text;margin-block-end:.5rem;letter-spacing:-.05em}.header p{color:var(--text-secondary);font-size:1.1rem;font-weight:500}.screen{display:none}.screen.active{display:block}.upload-area{border:3px dashed var(--border-color);border-radius:var(--border-radius);padding:4rem 2rem;text-align:center;background:var(--card-background);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden}.upload-area:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,color-mix(in srgb,var(--primary-color) 3%,transparent));opacity:0;transition:opacity .3s ease}.upload-area:hover:before,.upload-area.dragover:before{opacity:1}.upload-area:hover,.upload-area.dragover{border-color:var(--primary-color);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.upload-icon{font-size:3rem;margin-block-end:1rem;color:var(--text-secondary)}.upload-text{font-size:1.1rem;margin-block-end:.5rem;color:var(--text-primary)}.upload-subtext{font-size:.9rem;color:var(--text-secondary);margin-block-end:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-decoration:none;min-height:48px;letter-spacing:-.025em;position:relative;overflow:hidden}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:var(--secondary-color);color:#fff}.btn-secondary:hover{background:color-mix(in srgb,var(--secondary-color) 80%,black)}.btn-success{background:var(--success-color);color:#fff}.btn-success:hover{background:color-mix(in srgb,var(--success-color) 80%,black)}.edit-controls{display:flex;gap:1rem;margin-block-end:2rem;flex-wrap:wrap}.images-grid{display:grid;gap:1rem;margin-block-end:2rem}@container (min-width: 640px){.images-grid{grid-template-columns:repeat(2,1fr)}}@container (min-width: 1024px){.images-grid{grid-template-columns:repeat(3,1fr)}}.image-card{background:var(--card-background);border-radius:var(--border-radius);padding:1rem;box-shadow:var(--shadow);transition:transform .2s ease}.image-card:hover{transform:translateY(-2px)}.image-preview{width:100%;height:200px;object-fit:contain;border-radius:calc(var(--border-radius) / 2);margin-block-end:1rem;background:var(--background);transition:transform .3s ease}.image-preview-container{width:100%;height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(var(--border-radius) / 2);background:var(--background);margin-block-end:1rem}.image-controls{display:flex;gap:.5rem;justify-content:center}.btn-icon{padding:.5rem;min-width:44px;min-height:44px}.completion-info{text-align:center;margin-block-end:2rem;padding:1.5rem;background:var(--card-background);border-radius:var(--border-radius);box-shadow:var(--shadow)}.privacy-notice{background:color-mix(in srgb,var(--success-color) 10%,var(--card-background));border:1px solid color-mix(in srgb,var(--success-color) 30%,transparent);border-radius:var(--border-radius);padding:1rem;margin-block-end:2rem}.privacy-notice h3{color:var(--success-color);font-size:1rem;margin-block-end:.5rem;text-align:center}.privacy-notice p{font-size:.9rem;color:var(--text-secondary);text-align:center;margin-block-end:1rem}.exif-option{display:flex;align-items:center;gap:.5rem;justify-content:center;font-size:.9rem;color:var(--text-primary)}.exif-option input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-color)}.completion-controls{display:flex;justify-content:center;gap:1rem;margin-block-end:2rem;flex-wrap:wrap}.download-grid{display:grid;gap:1rem}@container (min-width: 640px){.download-grid{grid-template-columns:repeat(2,1fr)}}@container (min-width: 1024px){.download-grid{grid-template-columns:repeat(3,1fr)}}.download-card{background:var(--card-background);border-radius:var(--border-radius);padding:1rem;box-shadow:var(--shadow);text-align:center}.download-preview{width:100%;height:150px;object-fit:contain;border-radius:calc(var(--border-radius) / 2);margin-block-end:1rem;background:var(--background)}.hidden{display:none}.loading{text-align:center;padding:2rem;color:var(--text-secondary)}.progress-bar{width:100%;height:4px;background:var(--border-color);border-radius:2px;overflow:hidden;margin-block:1rem}.progress-fill{height:100%;background:var(--primary-color);transition:width .3s ease;width:0%}.footer-content{display:flex;justify-content:center}@media (max-width: 640px){.btn{width:100%}.edit-controls,.completion-controls{flex-direction:column}}