.converter-heading{padding:43px 0 25px;text-align:center}.converter-heading h1{font-size:clamp(34px,5vw,49px);letter-spacing:-1.7px;margin-bottom:12px}.converter-heading p{color:var(--muted);margin:0}.tool-shell{max-width:850px;margin-inline:auto}.quality-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 25px;background:white;border:1px solid var(--line);border-radius:20px 20px 0 0}.quality-label{font-weight:700;font-size:15px}.quality-label small{display:block;font-size:13px;font-weight:400;color:var(--muted)}.range-wrap{display:flex;gap:13px;align-items:center;min-width:180px;width:45%}input[type=range]{width:100%;accent-color:var(--purple);cursor:pointer}output{font-weight:750;color:var(--purple);min-width:2.5em;text-align:center;background:#f1eafa;padding:3px 8px;border-radius:8px}.drop-zone{position:relative;border:1px solid var(--line);border-top:0;background:white;border-radius:0 0 20px 20px;padding:19px}.drop-inner{border:2px dashed #d7c5ee;border-radius:14px;padding:35px 20px;text-align:center;background:#fcf9ff;transition:background .15s,border-color .15s}.drop-zone.dragging .drop-inner{background:#f0e4fc;border-color:var(--purple)}.drop-inner h2{font-size:23px;letter-spacing:-.5px;margin:0 0 4px}.drop-inner p{font-size:14px;color:var(--muted);margin:0 0 18px}.upload-symbol{font-size:32px;line-height:1;color:var(--purple);display:block;margin:0 0 18px}.btn{font:inherit;font-weight:650;font-size:14px;border:1px solid var(--line);background:white;border-radius:10px;color:var(--ink);padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:43px}.btn:hover{background:#f4edf9}.btn:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:4px}.btn.primary{background:var(--purple);color:white;border-color:var(--purple)}.btn.primary:hover{background:#5e32a5}.btn:disabled{opacity:.5;cursor:not-allowed}.limits{font-size:12px!important;margin:14px 0 0!important}.privacy-line{font-size:13px;text-align:center;color:var(--muted);margin:15px 0 22px}.notice{padding:15px 18px;background:#fff1ed;border:1px solid #edc1b3;border-radius:12px;font-size:14px;margin:15px 0;white-space:pre-line}.results-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:25px 0 16px}.results-heading h2{font-size:20px;letter-spacing:-.4px;margin:0}.results-heading p{font-size:13px;color:var(--muted);margin:3px 0 0}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:15px}.result-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.result{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:15px;align-items:center;border:1px solid var(--line);border-radius:14px;background:white;padding:15px}.thumb{width:62px;height:62px;border-radius:9px;object-fit:contain;background:repeating-conic-gradient(#f0ebf3 0% 25%,white 0% 50%) 50%/14px 14px}.file-name{display:block;font-size:14px;font-weight:700;overflow-wrap:anywhere}.file-detail{font-size:13px;color:var(--muted);margin:3px 0 0}.file-detail.error{color:#9a3224}.file-actions{display:flex;gap:7px;flex-wrap:wrap}.file-actions .btn{padding:8px 12px}.preview-image{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 50%/20px 20px}.preview{border:1px solid var(--line);border-radius:20px;padding:22px;width:min(800px,calc(100% - 30px));max-height:90vh;color:var(--ink)}.preview::backdrop{background:#20102f99}.preview-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.preview-top strong{overflow-wrap:anywhere}.help{max-width:850px;margin:50px auto 55px;padding-top:30px;border-top:1px solid var(--line)}.help h2{font-size:23px;letter-spacing:-.6px}.help p,.help li{font-size:15px;color:var(--muted)}.help details{border-bottom:1px solid var(--line);padding:15px 0}.help summary{cursor:pointer;font-weight:650;font-size:15px}.help details p{margin:12px 0 0}progress{accent-color:var(--purple);width:100%;height:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:600px){.converter-heading{padding-top:32px}.quality-bar{padding:17px;gap:12px}.quality-label small{max-width:160px}.range-wrap{min-width:125px;width:40%}.drop-zone{padding:12px}.drop-inner{padding:26px 12px}.result{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:12px}.thumb{width:48px;height:48px}.file-actions{grid-column:2}.toolbar .btn{flex-grow:1}.results-heading{align-items:flex-start}.limits{font-size:12px!important}}

/* Compact working surface, with no enclosing dashboard panel. */
.converter-heading{padding:19px 0 0}.converter-heading h1{font-size:25px;letter-spacing:-.6px;line-height:1.3;margin-bottom:8px}.converter-heading p{font-size:14px}.tool-shell{max-width:720px}.quality-bar{display:flex;flex-direction:column;background:none;border:0;border-radius:0;padding:32px 0 25px;gap:8px}.quality-label{font-size:15px;font-weight:600}.range-wrap{display:flex;flex-direction:column;gap:4px;width:200px;min-width:0}input[type=range]{margin:0;min-height:24px}output{background:none;font-weight:400;font-size:14px;padding:0}output::after{content:' / 100';color:var(--muted)}.drop-zone{border:0;border-radius:0;padding:0;width:100%;max-width:500px;margin:auto;background:none}.drop-inner{position:relative;min-height:245px;padding:38px 24px;border:3px dashed #d39bb5;border-radius:20px;background:#fff;box-shadow:0 5px 18px #a63d7008;display:flex;flex-direction:column;justify-content:center;align-items:center}.drop-inner h2{font-size:21px;letter-spacing:-.2px;font-weight:600;margin:0 0 4px;color:var(--ink)}.upload-symbol{font-size:38px;color:#b96b91;margin-bottom:18px}.drop-inner .btn.primary{border:0;background:none;color:var(--purple);font-size:15px;padding:0;min-height:30px;font-weight:400;text-decoration:underline;text-underline-offset:3px}.drop-inner .btn.primary:not(:disabled)::after{content:'';position:absolute;inset:0;border-radius:18px}.drop-inner:has(.btn:focus-visible){outline:3px solid var(--purple);outline-offset:4px}.drop-inner:hover{background:#fff;border-color:#b96b91}.drop-zone.dragging .drop-inner{background:#f8dfe9;border-color:var(--purple)}.file-limits{text-align:center;font-size:12px;color:var(--muted);margin:13px auto 0;max-width:365px}.file-limits summary{cursor:pointer;font-size:12px}.file-limits p{font-size:12px;margin:8px 0}.privacy-note{text-align:center;max-width:470px;margin:36px auto 0}.privacy-note h2{font-size:19px;letter-spacing:-.3px;margin-bottom:10px}.privacy-note p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:12px}.privacy-note .little-note{font-size:13px;color:var(--purple);margin:18px 0 0}.help{max-width:660px;margin:65px auto 20px;padding-top:26px;border-top:1px dashed var(--line)}.help h2{font-size:19px}.help p,.help li{font-size:14px}.help summary{font-size:14px;font-weight:500}.btn.primary{background:#f2ccdd;border-color:#e8bad0;color:#652c49}.btn.primary:hover{background:#eebdd3}.btn:hover{background:#fae7f0}.result{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:14px 0}.result-list{gap:0}.file-actions .btn{border:0;background:none;text-decoration:underline;text-underline-offset:3px;color:var(--purple);font-weight:400;padding:7px}.toolbar .btn{font-weight:500}.results-heading{margin-top:30px}.results-heading h2{font-size:18px}.results-heading p{font-size:12px}.preview{background:var(--paper)}
@media(max-width:600px){.converter-heading{padding-top:16px}.converter-heading h1{font-size:24px}.quality-bar{padding:26px 0 22px}.range-wrap{width:190px}.drop-zone{padding:0;max-width:100%}.drop-inner{padding:30px 18px;min-height:220px}.privacy-note{margin-top:30px}.help{margin-top:48px}.toolbar{gap:7px}.toolbar .btn{font-size:13px;padding:9px 13px}.file-actions{gap:12px}}