.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}.color-picker__drop--loaded{padding-block:20px}.color-picker__toolbar{justify-content:center;align-items:center;gap:10px;margin:24px 0 14px;display:flex}.color-picker__toolbar button,.color-picker__history button{border:2px solid var(--site-line);min-height:44px;color:var(--site-teal-dark);font:inherit;cursor:pointer;background:#fff;border-radius:12px;padding:8px 14px;font-weight:700}.color-picker__toolbar output{text-align:center;min-width:64px;font-weight:700}.color-picker__hint{color:var(--site-muted);text-align:center;margin:-4px 0 14px;font-size:.9rem}.color-picker__layout{grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:22px;display:grid}.color-picker__viewport{touch-action:none;background-color:#d8dfdd;background-image:linear-gradient(45deg,#c7d0ce 25%,#0000 25%),linear-gradient(-45deg,#c7d0ce 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#c7d0ce 75%),linear-gradient(-45deg,#0000 75%,#c7d0ce 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;border-radius:16px;min-height:360px;max-height:650px;position:relative;overflow:hidden}.color-picker__stage{transform-origin:0 0;position:absolute;top:0;left:0}.color-picker__stage canvas{cursor:crosshair;display:block}.color-picker__viewport.is-pannable,.color-picker__viewport.is-pannable canvas{cursor:grab}.color-picker__viewport.is-dragging,.color-picker__viewport.is-dragging canvas{cursor:grabbing;user-select:none}.color-picker__marker{pointer-events:none;width:1px;height:1px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--site-teal-dark);position:absolute}.color-picker__panel{border:1px solid var(--site-line);background:#f7fbfa;border-radius:16px;padding:18px}.color-picker__panel-label{margin:0 0 8px;font-weight:700}.color-picker__swatch{border:1px solid var(--site-line);background:#fff;border-radius:12px;height:76px}.color-picker__codes{gap:8px;margin-top:14px;display:grid}.color-picker__codes button{border:1px solid var(--site-line);min-height:48px;color:var(--site-ink);text-align:left;cursor:pointer;background:#fff;border-radius:10px;grid-template-columns:46px 1fr;align-items:center;padding:8px 10px;display:grid}.color-picker__codes button span{color:var(--site-muted);font-size:.78rem;font-weight:700}.color-picker__codes button strong{overflow-wrap:anywhere}.color-picker__panel h2,.color-picker__history h2{margin:20px 0 10px;font-size:1.05rem}.color-picker__magnifier{border:2px solid var(--site-line);width:140px;height:140px;image-rendering:pixelated;background:#fff;display:block}.color-picker__history{margin-top:22px}.color-picker__history>div{flex-wrap:wrap;gap:10px;display:flex}.color-picker__history button{align-items:center;gap:8px;padding:6px 10px;display:flex}.color-picker__history button span{border:1px solid var(--site-line);border-radius:8px;width:28px;height:28px}@media (width<=760px){.color-picker__layout{grid-template-columns:1fr}.color-picker__viewport{min-height:300px}.color-picker__panel{grid-template-columns:1fr 140px;gap:0 14px;display:grid}.color-picker__panel .color-picker__codes,.color-picker__panel>p{grid-column:1/-1}.color-picker__panel h2{grid-area:1/2;margin:0 0 8px}.color-picker__magnifier{grid-area:2/2/span 2}.color-picker__swatch{grid-column:1}}@media (width<=480px){.color-picker__panel{display:block}.color-picker__viewport{min-height:250px}}.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}.heic-result__preview{border:1px solid var(--site-line);object-fit:contain;background:#f3f5f4;border-radius:10px;flex:none;width:112px;height:84px}.related-tools{border-top:1px solid var(--site-line);margin-top:clamp(38px,6vw,64px);padding-top:24px}.related-tools h2{color:var(--site-teal-dark);margin:0 0 16px;font-size:clamp(1.3rem,3vw,1.7rem)}.related-tools ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.related-tools li{border:1px solid var(--site-line);background:var(--site-paper);border-radius:14px;padding:16px}.related-tools a{color:var(--site-teal-dark);text-underline-offset:4px;font-weight:700;text-decoration:underline;display:inline-block}.related-tools span{color:var(--site-muted);margin-top:6px;font-size:.9rem;display:block}.related-tools--compact{margin-top:28px}.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}.heic-result__preview{width:100%;height:180px}.related-tools ul,.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}}