.compressor-section{width:100%;padding-inline:var(--page-padding)}.breadcrumb{color:var(--blue-700);text-underline-offset:.2em;border-radius:.25rem;margin-bottom:.65rem;font-size:.87rem;font-weight:700;display:inline-block}.compressor-section{background:var(--surface-utilities);padding-block:clamp(1.25rem,3vw,2.5rem)}.compressor-shell{border:1px solid var(--grey-300);background:var(--white);border-radius:1.25rem;width:100%;margin-inline:auto;overflow:hidden;box-shadow:0 1.25rem 3.5rem #03214814}.compressor-heading{border-bottom:1px solid var(--grey-200);justify-content:space-between;align-items:center;gap:2rem;padding:clamp(1.25rem,2.8vw,2rem);display:flex}.compressor-heading h2{max-width:34rem;font-size:clamp(1.25rem,2vw,1.65rem)}.compressor-heading__copy{min-width:0}.compressor-heading__copy h1{max-width:50rem;margin-bottom:.55rem;font-size:clamp(1.75rem,3vw,2.5rem)}.compressor-heading__copy>p{max-width:48rem;color:var(--grey-700);margin-bottom:0;font-size:clamp(1rem,1.3vw,1.08rem)}.step-label,.result-kicker{color:var(--green-700);letter-spacing:.055em;text-transform:uppercase;margin-bottom:.3rem;font-size:.76rem;font-weight:800}.compressor-workspace{grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.25rem,2.8vw,2rem);display:grid}.image-column,.target-column{min-width:0}.image-column{grid-area:1/1}.target-column{grid-area:1/2}.dropzone{background:var(--blue-50);width:100%;min-height:20rem;color:var(--navy-950);cursor:pointer;font:inherit;text-align:center;border:2px dashed #a8bfd4;border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;padding:2rem;transition:border-color .16s,background-color .16s;display:flex}.dropzone:hover,.dropzone.is-dragging{border-color:var(--blue-700);background:var(--blue-100)}.dropzone__icon{background:var(--white);width:3.5rem;height:3.5rem;color:var(--blue-700);border-radius:1rem;place-items:center;margin-bottom:.85rem;display:grid;box-shadow:0 .35rem 1.25rem #0321481a}.dropzone__title{margin-bottom:.2rem;font-size:1.08rem;font-weight:800}.dropzone__or{color:var(--blue-700);text-underline-offset:.2em;margin-bottom:.7rem;font-size:.93rem;font-weight:700;text-decoration:underline}.dropzone__formats{color:var(--grey-500);font-size:.82rem}.selected-image{border:1px solid var(--grey-300);background:var(--white);border-radius:1rem;overflow:hidden}.selected-image__preview{background-color:var(--grey-100);background-image:linear-gradient(45deg, var(--grey-200) 25%, transparent 25%), linear-gradient(-45deg, var(--grey-200) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--grey-200) 75%), linear-gradient(-45deg, transparent 75%, var(--grey-200) 75%);background-position:0 0,0 .5rem,.5rem -.5rem,-.5rem 0;background-size:1rem 1rem;place-items:center;min-height:15rem;max-height:23rem;padding:1rem;display:grid}.selected-image__preview img,.result-preview-wrap img{object-fit:contain;max-width:100%;max-height:21rem;display:block}.selected-image__details{padding:1rem 1.1rem}.selected-image__name{text-overflow:ellipsis;white-space:nowrap;margin-bottom:.8rem;font-weight:800;overflow:hidden}.image-metadata,.result-stats{margin:0;display:grid}.image-metadata{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:.9rem}.image-metadata div{min-width:0}.image-metadata dt,.result-stats dt{color:var(--grey-500);letter-spacing:.025em;text-transform:uppercase;font-size:.76rem;font-weight:700}.image-metadata dd,.result-stats dd{margin:.15rem 0 0;font-weight:750}.image-metadata dd{overflow-wrap:anywhere;font-size:.87rem}.target-column{border:1px solid var(--grey-200);background:#fbfcfd;border-radius:1rem;align-self:start;padding:1.25rem}.target-fieldset,.quick-sizes{border:0;min-width:0;margin:0;padding:0}.target-fieldset legend,.quick-sizes legend{color:var(--navy-950);margin-bottom:.5rem;padding:0;font-size:.91rem;font-weight:800}.target-input-group{grid-template-columns:minmax(0,1fr) 5.3rem;display:grid}.target-input-group input,.target-input-group select{border:1px solid var(--grey-300);background:var(--white);min-height:3.2rem;color:var(--navy-950);font:inherit;font-weight:700}.target-input-group input{border-radius:.7rem 0 0 .7rem;min-width:0;padding:.65rem .8rem;font-size:1.06rem}.target-input-group select{border-left:0;border-radius:0 .7rem .7rem 0;padding:.65rem}.field-help,.field-error,.processing-status{font-size:.82rem}.field-help{color:var(--grey-500);margin:.45rem 0 0}.field-error{color:#a0271d;min-height:1.3em;margin:.35rem 0 0;font-weight:700}.quick-sizes,.format-field{margin-top:1.15rem}.format-field>label{color:var(--navy-950);margin-bottom:.5rem;font-size:.91rem;font-weight:800;display:block}.format-field select{border:1px solid var(--grey-300);background:var(--white);width:100%;min-height:3.2rem;color:var(--navy-950);font:inherit;border-radius:.7rem;padding:.65rem 2.4rem .65rem .8rem;font-weight:700}.format-warning{min-height:1.3em;color:var(--grey-700);margin:.4rem 0 0;font-size:.82rem;line-height:1.4}.format-notice{color:var(--grey-700);background:#fff9e9;border:1px solid #e1b95b;border-radius:.75rem;padding:.9rem 1rem;font-size:.88rem}.format-notice>strong,.format-notice>span{display:block}.format-notice>strong{color:var(--navy-950)}.confirmation-control{color:var(--navy-950);cursor:pointer;align-items:flex-start;gap:.55rem;margin-top:.7rem;font-weight:700;display:flex}.confirmation-control input{flex:none;width:1.05rem;height:1.05rem;margin-top:.18rem}.quick-sizes__buttons{flex-wrap:wrap;gap:.45rem;display:flex}.quick-sizes button{border:1px solid var(--grey-300);background:var(--white);min-height:2.45rem;color:var(--grey-700);cursor:pointer;font:inherit;border-radius:.65rem;padding:.45rem .65rem;font-size:.82rem;font-weight:750}.quick-sizes button:hover,.quick-sizes button.is-selected{background:var(--blue-100);color:var(--blue-700);border-color:#8bb7df}.target-column>.action--primary{width:100%;margin-top:1.25rem}.processing-status{min-height:2.6em;color:var(--grey-700);margin:.65rem 0 0;line-height:1.4}.result-panel{border-top:1px solid var(--grey-200);background:#f3fcf9;padding:clamp(1.25rem,2.8vw,2rem)}.result-panel__heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.result-panel__heading h2{font-size:clamp(1.25rem,2vw,1.6rem)}.result-badge{background:var(--white);color:var(--green-700);border:1px solid #a9decf;border-radius:999px;flex:none;padding:.35rem .65rem;font-size:.8rem;font-weight:800}.result-content{grid-template-columns:minmax(14rem,.65fr) minmax(20rem,1fr);align-items:center;gap:clamp(1rem,3vw,2rem);display:grid}.result-preview-wrap{border:1px solid var(--grey-300);background:var(--white);border-radius:.85rem;place-items:center;min-height:13rem;max-height:21rem;display:grid;overflow:hidden}.result-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.result-stats div{border-bottom:1px solid var(--grey-200);min-width:0;padding-bottom:.8rem}.result-stats dd{overflow-wrap:anywhere;font-size:.96rem}.result-stats__highlight dd{color:var(--green-700);font-size:1.12rem}.result-actions{flex-wrap:wrap;gap:.65rem;margin-top:1.25rem;display:flex}.breadcrumb:focus-visible,.dropzone:focus-visible,.target-input-group input:focus-visible,.target-input-group select:focus-visible,.format-field select:focus-visible,.confirmation-control input:focus-visible,.quick-sizes button:focus-visible{outline:2px solid var(--blue-700);outline-offset:3px;box-shadow:var(--focus-ring)}.target-input-group input[aria-invalid=true]{border-color:#a0271d}@media (width<=52rem){.compressor-heading{flex-direction:column;align-items:flex-start;gap:.8rem}.compressor-workspace{grid-template-columns:1fr}.image-column,.target-column{grid-area:auto/1}.dropzone{min-height:16rem}.result-content{grid-template-columns:1fr}.result-preview-wrap{max-height:18rem}}@media (width<=35rem){.compressor-section{padding-inline:var(--page-padding)}.compressor-shell{border-radius:1rem}.dropzone{min-height:14rem;padding:1.25rem}.image-metadata,.result-stats{grid-template-columns:1fr}.image-metadata{gap:.45rem}.image-metadata div{justify-content:space-between;gap:1rem;display:flex}.image-metadata dd{text-align:right}.result-panel__heading{flex-direction:column;align-items:flex-start}.result-actions,.result-actions>*{width:100%}}@media (prefers-reduced-motion:reduce){.dropzone{transition:none}}.cropper-workspace{grid-template-columns:minmax(0,1.6fr) minmax(19rem,.6fr);gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.25rem,2.8vw,2rem);display:grid}.cropper-canvas-column{min-width:0}.crop-stage-wrap{background-color:#1d2935;background-image:linear-gradient(45deg,#263746 25%,#0000 25%),linear-gradient(-45deg,#263746 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#263746 75%),linear-gradient(-45deg,#0000 75%,#263746 75%);background-position:0 0,0 .65rem,.65rem -.65rem,-.65rem 0;background-size:1.3rem 1.3rem;border-radius:1rem;place-items:center;min-height:24rem;padding:clamp(.75rem,2vw,1.25rem);display:grid;overflow:hidden}.crop-stage{-webkit-user-select:none;user-select:none;max-width:100%;line-height:0;display:inline-block;position:relative}.crop-stage>img{object-fit:contain;pointer-events:none;width:auto;max-width:100%;max-height:min(65vh,42rem);display:block}.crop-selection{border:2px solid var(--white);cursor:move;touch-action:none;outline:1px solid #032148d9;position:absolute;box-shadow:0 0 0 100vmax #04121fad}.crop-selection:focus-visible,.crop-handle:focus-visible{outline-offset:3px;outline:3px solid #71baff}.crop-grid{pointer-events:none;background-image:linear-gradient(90deg,#0000 33.1%,#ffffffa6 33.1% 33.6%,#0000 33.6% 66.3%,#ffffffa6 66.3% 66.8%,#0000 66.8%),linear-gradient(#0000 33.1%,#ffffffa6 33.1% 33.6%,#0000 33.6% 66.3%,#ffffffa6 66.3% 66.8%,#0000 66.8%);position:absolute;inset:0}.crop-handle{z-index:1;border:2px solid var(--blue-700);background:var(--white);touch-action:none;border-radius:50%;width:1.05rem;height:1.05rem;display:block;position:absolute}.crop-handle--nw{cursor:nwse-resize;top:0;left:0;transform:translate(-50%,-50%)}.crop-handle--n{cursor:ns-resize;top:0;left:50%;transform:translate(-50%,-50%)}.crop-handle--ne{cursor:nesw-resize;top:0;right:0;transform:translate(50%,-50%)}.crop-handle--e{cursor:ew-resize;top:50%;right:0;transform:translate(50%,-50%)}.crop-handle--se{cursor:nwse-resize;bottom:0;right:0;transform:translate(50%,50%)}.crop-handle--s{cursor:ns-resize;bottom:0;left:50%;transform:translate(-50%,50%)}.crop-handle--sw{cursor:nesw-resize;bottom:0;left:0;transform:translate(-50%,50%)}.crop-handle--w{cursor:ew-resize;top:50%;left:0;transform:translate(-50%,-50%)}.crop-file-row{padding:1rem 0 0}.crop-file-row .image-metadata{margin-bottom:.65rem}.cropper-controls{min-width:0}.crop-aspects,.crop-fields{border:0;min-width:0;margin:0;padding:0}.crop-aspects legend,.crop-fields legend{color:var(--navy-950);margin-bottom:.5rem;padding:0;font-size:.91rem;font-weight:800}.crop-aspects>div{grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem;display:grid}.crop-aspects label{cursor:pointer;position:relative}.crop-aspects input{opacity:0;width:1px;height:1px;position:absolute}.crop-aspects span{border:1px solid var(--grey-300);background:var(--white);min-height:2.6rem;color:var(--grey-700);border-radius:.6rem;place-items:center;font-size:.8rem;font-weight:750;display:grid}.crop-aspects input:checked+span{background:var(--blue-100);color:var(--blue-700);border-color:#8bb7df}.crop-aspects input:focus-visible+span{outline:2px solid var(--blue-700);outline-offset:3px}.crop-fields{margin-top:1.15rem}.crop-fields>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;display:grid}.crop-fields label{color:var(--navy-950);gap:.35rem;font-size:.84rem;font-weight:750;display:grid}.crop-summary{background:var(--blue-50);color:var(--navy-950);border-radius:.65rem;margin:1rem 0 0;padding:.7rem .8rem;font-size:.87rem;font-weight:750}.cropper-controls .format-field{border-top:1px solid var(--grey-200);padding-top:1.1rem}.cropper-controls>.action--primary{width:100%;margin-top:1.25rem}@media (width<=62rem){.cropper-workspace{grid-template-columns:1fr}.crop-stage-wrap{min-height:20rem}}@media (width<=35rem){.cropper-workspace{padding-inline:.85rem}.crop-stage-wrap{min-height:16rem;padding:.65rem}.crop-stage>img{max-height:55vh}.crop-aspects>div{grid-template-columns:repeat(3,minmax(0,1fr))}.crop-handle{width:1.25rem;height:1.25rem}}
