html{scroll-behavior:smooth}#compression-options,#action{scroll-margin-top:1.5rem}.home-hero-heading{text-align:center;max-width:40rem;margin-left:auto;margin-right:auto;padding:1.5rem 0 .5rem}.home-hero-heading h1{color:#1e293b;margin-bottom:.5rem;font-size:clamp(1.5rem,4vw,2rem);line-height:1.25}.home-hero-heading p{color:#64748b;margin:0;font-size:1rem;line-height:1.6}[data-theme=dark] .home-hero-heading h1{color:#f1f5f9}[data-theme=dark] .home-hero-heading p{color:#94a3b8}.hero{text-align:center;padding:1rem 0}.hero-grid{flex-direction:column;gap:1.5rem;max-width:500px;margin:2rem auto;display:flex}.hero-grid.has-file{max-width:700px}.tagline{color:#64748b;margin-top:1.5rem;font-size:1.1rem;font-style:normal;font-weight:500}.action{flex-direction:column;justify-content:center;gap:.75rem;display:flex}.action .preview-image{object-fit:contain;border-radius:.75rem;width:100%;max-height:150px;box-shadow:0 4px 6px -1px #0000001a}.action .size-info{background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:2px solid #e2e8f0;border-radius:.75rem;padding:.75rem;box-shadow:0 2px 4px #0000000d}.action .size-info p{color:#475569;margin:.5rem 0;font-size:.9rem}.action .size-info strong{color:#1e293b;font-weight:600}.action button{border-radius:.75rem;width:100%;height:fit-content;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;transition:all .3s;box-shadow:0 4px 6px -1px #3b82f64d}.action button.secondary{color:#475569;background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);box-shadow:0 4px 6px -1px #0000001a}.action button.secondary:hover{background:linear-gradient(135deg,#e2e8f0 0%,#cbd5e1 100%);transform:translateY(-2px);box-shadow:0 10px 15px -3px #00000026}.action button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 15px -3px #3b82f666}.action button:disabled{opacity:.5;cursor:not-allowed}[data-theme=dark] .tagline{color:#94a3b8}[data-theme=dark] .action .size-info{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-color:#334155}[data-theme=dark] .action .size-info p{color:#cbd5e1}[data-theme=dark] .action .size-info strong{color:#f1f5f9}[data-theme=dark] .action button.secondary{color:#cbd5e1;background:linear-gradient(135deg,#334155 0%,#1e293b 100%);box-shadow:0 4px 6px -1px #0003}[data-theme=dark] .action button.secondary:hover{background:linear-gradient(135deg,#475569 0%,#334155 100%);box-shadow:0 10px 15px -3px #0000004d}@media (max-width:768px){.hero-grid,.hero-grid.has-file{max-width:100%}}
.drop-zone{cursor:pointer;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border:3px dashed #cbd5e1;border-radius:1.5rem;padding:1.5rem 1.25rem;transition:all .3s;box-shadow:0 4px 6px -1px #0000001a}.drop-zone:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 10px 15px -3px #3b82f633}.drop-zone.dragging{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border-color:#3b82f6;transform:scale(1.02);box-shadow:0 20px 25px -5px #3b82f64d}.drop-zone-content{flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100%;display:flex}.drop-zone-content .preview-image{object-fit:contain;border-radius:.75rem;width:100%;max-height:200px;box-shadow:0 4px 6px -1px #0000001a}.icon{filter:drop-shadow(0 4px 6px #0000001a);font-size:3rem}.drop-zone p{color:#475569;font-size:.95rem;font-weight:500}.drop-zone small{color:#94a3b8;font-size:.9rem}.drop-zone-file-input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.drop-zone-upload{cursor:pointer;border-radius:.75rem;margin-top:.5rem;padding:.75rem 2rem;font-size:1rem;transition:all .2s}.drop-zone-upload:hover{transform:scale(1.05)}.selected-file{background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:2px solid #e2e8f0;border-radius:1rem;margin-top:1rem;padding:1rem;box-shadow:0 2px 4px #0000000d}.selected-file p{color:#1e293b;margin:0;font-weight:600}.selected-file small{color:#64748b;font-size:.95rem}[data-theme=dark] .drop-zone{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-color:#475569}[data-theme=dark] .drop-zone:hover{border-color:#60a5fa}[data-theme=dark] .drop-zone.dragging{background:linear-gradient(135deg,#1e3a5f 0%,#0f172a 100%);border-color:#60a5fa}[data-theme=dark] .drop-zone p{color:#e2e8f0}[data-theme=dark] .drop-zone small{color:#94a3b8}[data-theme=dark] .selected-file{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-color:#334155}[data-theme=dark] .selected-file p{color:#f1f5f9}[data-theme=dark] .selected-file small{color:#94a3b8}@media (max-width:768px){.drop-zone{padding:2rem 1.5rem}}
.compression-options{background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:2px solid #e2e8f0;border-radius:1.5rem;padding:1.25rem;box-shadow:0 4px 6px -1px #0000001a}.compression-options fieldset{border:none;margin:0;padding:0}.compression-options legend{color:#1e293b;border-bottom:2px solid #e2e8f0;margin-bottom:1rem;padding-bottom:.75rem;font-size:1.1rem;font-weight:700}.compression-options label{cursor:pointer;border:2px solid #0000;border-radius:.75rem;align-items:center;margin-bottom:.5rem;padding:.75rem;transition:all .2s;display:flex}.compression-options label:hover{background:#f1f5f9;border-color:#cbd5e1}.compression-options input[type=radio]{accent-color:#3b82f6;width:1.25rem;height:1.25rem;margin-right:1rem}.slider-container{background:#f8fafc;border:2px solid #e2e8f0;border-radius:.75rem;margin-top:1rem;padding:1rem}.slider-container label{color:#1e293b;cursor:default;border:none;margin-bottom:.75rem;padding:0;font-size:.95rem;font-weight:600;display:block}.slider-container label:hover{background:0 0;border-color:#0000}.quality-slider{appearance:none;background:#e2e8f0;border-radius:3px;outline:none;width:100%;height:6px}.quality-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#3b82f6;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.quality-slider::-moz-range-thumb{cursor:pointer;background:#3b82f6;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.quality-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--value,70%), #e2e8f0 var(--value,70%), #e2e8f0 100%);border-radius:3px}[data-theme=dark] .compression-options{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-color:#334155}[data-theme=dark] .compression-options legend{color:#f1f5f9;border-color:#334155}[data-theme=dark] .compression-options label:hover{background:#334155;border-color:#475569}[data-theme=dark] .slider-container{background:#0f172a;border-color:#334155}[data-theme=dark] .slider-container label{color:#f1f5f9}[data-theme=dark] .quality-slider{background:#475569}[data-theme=dark] .quality-slider::-webkit-slider-thumb{background:#60a5fa}[data-theme=dark] .quality-slider::-moz-range-thumb{background:#60a5fa}@media (max-width:768px){.compression-options{padding:1.5rem 1.25rem}}
.home-seo{text-align:left;max-width:48rem;margin:0 auto;padding:2rem 0 1rem}.home-seo section{margin-bottom:2rem}.home-seo h2{color:#1e293b;border-bottom:2px solid #e2e8f0;margin-bottom:.75rem;padding-bottom:.35rem;font-size:1.2rem}.home-seo p{color:#334155;margin-bottom:.75rem;line-height:1.75}.home-seo-features{color:#334155;padding-left:1.25rem;line-height:1.75}.home-seo-features li{margin-bottom:.5rem}.home-seo-steps{color:#334155;padding-left:1.25rem;line-height:1.75}.home-seo-steps li{margin-bottom:.5rem}.home-seo-faq dl{margin:0}.home-seo-faq-item{margin-bottom:1.25rem}.home-seo-faq dt{color:#1e293b;margin-bottom:.35rem;font-weight:600}.home-seo-faq dd{color:#475569;margin:0;line-height:1.7}.home-seo a{font-weight:500}[data-theme=dark] .home-seo h2,[data-theme=dark] .home-seo-faq dt{color:#f1f5f9}[data-theme=dark] .home-seo h2{border-bottom-color:#334155}[data-theme=dark] .home-seo p,[data-theme=dark] .home-seo-features,[data-theme=dark] .home-seo-steps,[data-theme=dark] .home-seo-faq dd{color:#cbd5e1}