.webp-page{min-height:100svh;background:#faf9f7;color:#181a18}.webp-page nav{border-color:#e5e3de;background:#fff}.webp-page .brand{color:#181a18}.webp-page .brand span{color:#9dd20f}.webp-page .nav-link{color:#777872}.webp-head{width:min(1000px,calc(100% - 48px));margin:0 auto;padding:78px 0 34px}.webp-head .eyebrow{color:#7b9c16}.webp-head h1{margin:14px 0;font-size:clamp(48px,6.5vw,86px);letter-spacing:-.075em;line-height:.93}.webp-head em{font-weight:400;color:#75951a}.webp-head>p:last-child{margin:0;color:#767872}.webp-tool{width:min(1000px,calc(100% - 48px));margin:0 auto 70px}.webp-controls{display:flex;align-items:center;justify-content:space-between;padding:0 0 18px;border-bottom:1px solid #e5e3de}.webp-controls input[type=file]{display:none}.add-images,.image-actions button{border:1px solid #a8df16;background:#baff12;color:#181a18;padding:12px 15px;font:600 11px var(--mono);cursor:pointer}.webp-controls label{display:flex;align-items:center;gap:10px;color:#72746e;font:500 10px var(--mono)}.webp-controls input[type=range]{width:130px;accent-color:#8fbd0e}.webp-controls b{color:#4f6510}.webp-note{margin:0;padding:15px 0 24px;color:#858680;font-size:12px}.empty-drop{width:100%;min-height:310px;border:1px dashed #d6d6d0;border-radius:18px;background:#fff;cursor:pointer;display:grid;place-content:center;grid-gap:9px;gap:9px;color:#262a25}.empty-drop span{margin:auto;color:#9acd10;font-size:33px}.empty-drop strong{font-size:16px}.empty-drop small{color:#868780}.image-list{display:grid;grid-gap:28px;gap:28px}.image-item{padding:20px;border:1px solid #e5e3de;border-radius:18px;background:#fff}.image-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.image-meta b{font-size:14px}.image-meta span{font:500 10px var(--mono);color:#8d8e88}.comparison{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px}.comparison figure{margin:0;min-height:260px;display:flex;flex-direction:column;border:1px solid #ecebe6;border-radius:12px;overflow:hidden;background:#fbfbf8}.image-size{padding:12px 14px;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #ecebe6}.image-size span{font:500 10px var(--mono);color:#858680}.image-size b{font:600 16px var(--mono);color:#252925}.comparison img{width:100%;height:270px;object-fit:contain;display:block}.output-placeholder{flex:1 1;min-height:270px;display:grid;place-items:center;color:#a1a29d;font:500 11px var(--mono)}.image-actions{display:flex;align-items:center;justify-content:space-between;padding-top:17px}.image-actions>span{font:500 11px var(--mono);color:#b77d48}.image-actions>span.saved{color:#769d13}.image-actions button{background:#fff;border-color:#d5d6cf;color:#292d29}.image-actions button:hover{border-color:#96c80b;background:#f8ffe8}.image-actions button:disabled{opacity:.55;cursor:wait}@media(max-width:600px){.webp-head,.webp-tool{width:calc(100% - 32px)}.webp-head{padding-top:55px}.webp-controls{align-items:flex-start;gap:16px;flex-direction:column}.webp-controls label{width:100%;justify-content:space-between}.webp-controls input[type=range]{width:58%}.image-item{padding:14px}.comparison{gap:10px}.comparison figure{min-height:180px}.image-size{padding:10px}.image-size b{font-size:12px}.comparison img,.output-placeholder{height:180px;min-height:180px}.image-meta{gap:14px}.image-meta span{white-space:nowrap}.image-actions{gap:12px}.image-actions button{padding:10px}.empty-drop{min-height:260px}}