.tools-page{background:var(--site-cream)}.tools-main{padding:clamp(54px,8vw,92px) 0 clamp(72px,10vw,120px)}.tools-hero{max-width:760px;margin-bottom:42px}.tools-kicker{color:var(--site-teal);letter-spacing:.14em;margin:0 0 8px;font-family:Quicksand,sans-serif;font-size:.85rem;font-weight:700}.tools-hero h1{color:var(--site-teal-dark);margin:0;font-family:Zen Maru Gothic,sans-serif;font-size:clamp(2rem,5vw,3.35rem);line-height:1.25}.tools-hero>p:last-child{color:var(--site-muted);margin:18px 0 0;font-size:clamp(1rem,2vw,1.12rem)}.tools-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:24px;display:grid}.tool-card,.converter{border:1px solid var(--site-line);background:var(--site-paper);border-radius:22px;box-shadow:0 14px 36px #2e414014}.tool-card{flex-direction:column;align-items:flex-start;padding:clamp(26px,4vw,38px);display:flex}.tool-card h2{margin:0;font-size:clamp(1.3rem,3vw,1.65rem);line-height:1.4}.tool-card p{color:var(--site-muted);flex:1;margin:12px 0 26px}.tool-button{background:var(--site-teal);min-height:48px;font:inherit;cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:11px 22px;font-weight:700;display:inline-flex;color:#fff!important}.tool-button:hover{background:var(--site-teal-dark)}.tools-privacy{background:#edf6f3;border-radius:12px;gap:10px;padding:13px 16px;display:flex;color:var(--site-ink)!important;margin-top:22px!important}.converter{padding:clamp(18px,4vw,36px)}.quality-level{border:0;margin:0 0 28px;padding:0}.quality-level legend{margin-bottom:12px;font-weight:700}.quality-level__options{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.quality-level__options--three{grid-template-columns:repeat(3,1fr)}.cropper__ratios .quality-level__options{grid-template-columns:repeat(4,1fr)}.cropper__custom{flex-wrap:wrap;gap:18px 28px;margin:-8px 0 28px;display:flex}.cropper__custom[hidden]{display:none}.cropper__custom>label{min-width:min(100%,220px);font-weight:700}.cropper__custom .unit-input{margin-top:8px}.cropper__drop--loaded{padding-block:20px}.cropper__workspace{margin-top:28px}.cropper__stage{touch-action:none;user-select:none;width:fit-content;max-width:100%;margin-inline:auto;line-height:0;position:relative;overflow:hidden}.cropper__stage img{object-fit:contain;max-width:100%;max-height:min(68vh,720px);display:block}.cropper__selection{box-sizing:border-box;outline:2px solid var(--site-teal);cursor:move;touch-action:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 9999px #1421209e}.cropper__selection:before,.cropper__selection:after{content:"";pointer-events:none;position:absolute}.cropper__selection:before{border-block:1px solid #ffffffa6;inset:33.333% 0}.cropper__selection:after{border-inline:1px solid #ffffffa6;inset:0 33.333%}.cropper__handle{z-index:1;background:var(--site-teal);border:3px solid #fff;border-radius:50%;width:24px;height:24px;position:absolute}.cropper__handle--nw{cursor:nwse-resize;top:-12px;left:-12px}.cropper__handle--n{cursor:ns-resize;top:-12px;left:calc(50% - 12px)}.cropper__handle--ne{cursor:nesw-resize;top:-12px;right:-12px}.cropper__handle--e{cursor:ew-resize;top:calc(50% - 12px);right:-12px}.cropper__handle--se{cursor:nwse-resize;bottom:-12px;right:-12px}.cropper__handle--s{cursor:ns-resize;bottom:-12px;left:calc(50% - 12px)}.cropper__handle--sw{cursor:nesw-resize;bottom:-12px;left:-12px}.cropper__handle--w{cursor:ew-resize;top:calc(50% - 12px);left:-12px}.cropper__selection--fixed .cropper__handle{display:none}.cropper__actions{justify-content:space-between;align-items:center;gap:18px;margin-top:26px;display:flex}.cropper__actions p{margin:0}.resize-settings{margin:-6px 0 28px}.resize-settings>div>label{margin-bottom:8px;font-weight:700;display:block}.unit-input{align-items:center;gap:10px;max-width:320px;display:flex}.unit-input input{box-sizing:border-box;border:2px solid var(--site-line);width:100%;min-height:48px;color:var(--site-ink);font:inherit;background:#fff;border-radius:12px;padding:9px 12px}.unit-input input:focus-visible,.scale-presets button:focus-visible{outline:3px solid var(--site-orange);outline-offset:3px}.scale-presets{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.scale-presets button{border:2px solid var(--site-line);min-width:64px;min-height:44px;color:var(--site-teal-dark);font:inherit;cursor:pointer;background:#fff;border-radius:999px;font-weight:700}.scale-presets button:hover{border-color:var(--site-teal);background:#e5f2ef}.quality-level label{position:relative}.quality-level input{opacity:0;position:absolute}.quality-level span{border:2px solid var(--site-line);text-align:center;cursor:pointer;background:#fff;border-radius:12px;justify-content:center;align-items:center;min-height:48px;padding:8px 10px;font-weight:700;display:flex}.quality-level small{color:var(--site-muted);margin-left:6px;font-size:.78em;font-weight:500}.quality-level input:checked+span{border-color:var(--site-teal);color:var(--site-teal-dark);background:#e5f2ef}.quality-level input:focus-visible+span{outline:3px solid var(--site-orange);outline-offset:3px}.converter__drop{text-align:center;background:#f4faf8;border:2px dashed #8bb7b2;border-radius:18px;padding:clamp(34px,7vw,66px) 20px;transition:border-color .16s,background .16s,transform .16s}.converter__drop.is-dragging{border-color:var(--site-orange);background:#fff6e9;transform:scale(1.01)}.converter__drop p{margin:6px 0}.converter__drop-title{color:var(--site-teal-dark);font-size:clamp(1.25rem,3vw,1.65rem);font-weight:700}.converter__drop .tool-button{margin-top:12px}.converter__status,.converter__errors{margin:16px 2px 0}.converter__status{color:var(--site-muted)}.converter__errors{color:#9b372f;font-weight:700}.converter__errors:empty{display:none}.converter__errors p{margin:6px 0}.converter__results,.comparison-preview{border-top:1px solid var(--site-line);margin-top:34px;padding-top:28px}.comparison-preview h2{margin:0 0 18px;font-size:1.4rem}.comparison-preview__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.comparison-preview figure{min-width:0;margin:0}.comparison-preview figcaption{margin-bottom:8px;font-weight:700}.comparison-preview__viewport{border:1px solid var(--site-line);touch-action:pan-y;user-select:none;background-color:#f3f5f4;background-image:linear-gradient(45deg,#e2e7e5 25%,#0000 25%),linear-gradient(-45deg,#e2e7e5 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e2e7e5 75%),linear-gradient(-45deg,#0000 75%,#e2e7e5 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:14px;place-items:center;height:clamp(420px,48vw,560px);display:grid;overflow:hidden}.comparison-preview__viewport.is-pannable{cursor:grab;touch-action:none}.comparison-preview__viewport.is-dragging{cursor:grabbing}.comparison-preview img{object-fit:scale-down;width:100%;height:100%;transform:translate(var(--preview-pan-x,0), var(--preview-pan-y,0)) scale(var(--preview-zoom,1));transform-origin:50%;pointer-events:none;display:block}.comparison-preview__controls{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 22px;margin-top:22px;display:grid}.comparison-preview__controls label{grid-column:1;font-weight:700}.comparison-preview__controls output{color:var(--site-teal-dark)}.comparison-preview__controls input[type=range]{width:100%;min-width:0;accent-color:var(--site-teal)}.comparison-preview__controls .tool-button{grid-area:1/2/span 2}.comparison-preview__controls p{color:var(--site-muted);grid-column:1/-1;margin:2px 0 0;font-size:.9rem}.converter__results-header{justify-content:space-between;align-items:center;gap:18px;display:flex}.converter__results h2{margin:0;font-size:1.4rem}.converter__list{gap:12px;margin:22px 0 0;padding:0;list-style:none;display:grid}.converter-result{border:1px solid var(--site-line);border-radius:14px;justify-content:space-between;align-items:center;gap:18px;min-width:0;padding:16px 18px;display:flex}.converter-result>div{min-width:0}.converter-result h3{text-overflow:ellipsis;white-space:nowrap;margin:0 0 5px;font-size:1rem;overflow:hidden}.converter-result p{color:var(--site-muted);margin:0;font-size:.92rem}.compressor-result{padding:10px}.compressor-result.is-selected{border-color:var(--site-teal);background:#f1f8f6}.compressor-result__select{min-width:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;padding:7px 8px;display:block}.compressor-result__select h3{margin:0 0 5px}.compressor-result__compare{color:var(--site-teal-dark);margin-top:5px;font-size:.88rem;font-weight:700;display:inline-block}.tool-guide{gap:26px;margin-top:clamp(48px,8vw,82px);display:grid}.tool-guide section{border-top:1px solid var(--site-line);padding-top:24px}.tool-guide h2{color:var(--site-teal-dark);margin:0 0 12px;font-size:clamp(1.3rem,3vw,1.7rem)}.tool-guide h3{margin:18px 0 5px;font-size:1.05rem}.tool-guide p,.tool-guide ol{margin-top:8px}.tool-guide a{color:var(--site-teal-dark);text-underline-offset:4px;font-weight:700;text-decoration:underline}@media (width<=580px){.quality-level__options{grid-template-columns:repeat(2,1fr)}.quality-level__options--three{grid-template-columns:1fr}.cropper__ratios .quality-level__options{grid-template-columns:repeat(2,1fr)}.cropper__actions{flex-direction:column;align-items:stretch}.cropper__actions .tool-button{width:100%}.converter__results-header,.converter-result{flex-direction:column;align-items:stretch}.comparison-preview__grid{grid-template-columns:1fr}.comparison-preview__viewport{height:min(76vw,300px)}.comparison-preview__controls{grid-template-columns:1fr;align-items:stretch}.comparison-preview__controls .tool-button{grid-area:auto/1;width:100%}.converter__results-header .tool-button,.converter-result .tool-button{width:100%}}@media (prefers-reduced-motion:reduce){.converter__drop{transition:none}}