.icm{--icm-paper:#f4f1e8;--icm-ink:#171712;--icm-muted:#6b6a61;--icm-line:#c8c4b8;--icm-red:#ef4b36;--icm-lime:#b6ff54;width:100%;max-width:1180px;margin:3.5rem auto;border:1px solid var(--icm-ink);background:var(--icm-paper);color:var(--icm-ink);font-family:Arial,Helvetica,sans-serif;box-shadow:12px 12px 0 var(--icm-ink)}.icm *{box-sizing:border-box}.icm button,.icm input{font:inherit}.icm-header,.icm-controls,.icm-stage,.icm-metrics,.icm-bits,.icm-mechanism,.icm-footer{border-top:1px solid var(--icm-ink)}.icm-header{border-top:0;display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:clamp(1.25rem,3vw,2.5rem)}.icm-kicker,.icm-controls span,.icm-metric span,.icm-webp-flow span{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--icm-muted)}.icm h2,.icm h3,.icm h4,.icm p{margin:0}.icm h2{max-width:760px;margin-top:.55rem;font-size:clamp(2.4rem,7vw,6rem);line-height:.82;letter-spacing:-.065em}.icm h3{margin-top:.45rem;font-size:clamp(1.6rem,3vw,2.8rem);line-height:.95;letter-spacing:-.045em}.icm h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em}.icm-upload,.icm-controls button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border:1px solid var(--icm-ink);background:var(--icm-lime);padding:.72rem 1rem;font-size:.75rem;font-weight:800;text-transform:uppercase;cursor:pointer}.icm-upload input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.icm-upload:focus-within,.icm button:focus-visible,.icm input:focus-visible{outline:3px solid var(--icm-red);outline-offset:3px}.icm-format-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--icm-ink)}.icm-format-tabs button{min-height:54px;border:0;border-right:1px solid var(--icm-ink);background:0 0;font-weight:900;letter-spacing:.08em;cursor:pointer}.icm-format-tabs button:last-child{border-right:0}.icm-format-tabs button[aria-selected=true]{background:var(--icm-ink);color:var(--icm-paper)}.icm-controls{display:grid;grid-template-columns:1.2fr 1fr auto;gap:1rem;align-items:end;padding:1.1rem clamp(1rem,3vw,2rem)}.icm-controls>div,.icm-controls label{display:grid;gap:.25rem}.icm-controls strong{font-size:1rem}.icm-controls small{color:var(--icm-muted)}.icm-controls input[type=range]{width:100%;accent-color:var(--icm-red)}.icm-error{border-top:1px solid var(--icm-ink);background:var(--icm-red);color:#fff;padding:1rem 2rem;font-weight:700}.icm-stage{display:grid;grid-template-columns:repeat(3,1fr)}.icm-stage figure{min-width:0;margin:0;border-right:1px solid var(--icm-ink)}.icm-stage figure:last-child{border-right:0}.icm-stage figcaption{display:flex;gap:.65rem;align-items:center;min-height:46px;padding:.6rem .8rem;border-bottom:1px solid var(--icm-ink);font-size:.75rem;font-weight:800;text-transform:uppercase}.icm-stage figcaption b{color:var(--icm-red)}.icm-stage canvas{display:block;width:100%;height:auto;image-rendering:auto;background:#dad6ca}.icm-difference canvas{image-rendering:pixelated}.icm-metrics{display:grid;grid-template-columns:repeat(4,1fr)}.icm-metric{min-height:128px;padding:1rem;border-right:1px solid var(--icm-ink)}.icm-metric:last-child{border-right:0}.icm-metric strong{display:block;margin:.55rem 0 .35rem;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1;letter-spacing:-.045em}.icm-metric small{color:var(--icm-muted)}.icm-bits{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem;padding:clamp(1.25rem,3vw,2.5rem)}.icm-bits p,.icm-mechanism-heading p{max-width:66ch;margin-top:.8rem;color:var(--icm-muted);line-height:1.55}.icm-bit-grid{display:grid;grid-template-columns:repeat(24,minmax(5px,1fr));align-content:center;gap:3px}.icm-bit-grid span{aspect-ratio:1;display:grid;place-items:center;min-width:5px;background:var(--icm-lime);font-size:.55rem;font-weight:900}.icm-bit-grid .damaged{background:var(--icm-red);color:#fff}.icm-mechanism{padding:clamp(1.25rem,3vw,2.5rem)}.icm-jpeg-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.icm-jpeg-flow>div{min-width:0}.icm-jpeg-flow h4{margin-bottom:.65rem}.icm-jpeg-flow p{margin-top:.65rem;color:var(--icm-muted);font-size:.82rem}.icm-matrix{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-top:1px solid var(--icm-ink);border-left:1px solid var(--icm-ink)}.icm-matrix span{display:grid;place-items:center;aspect-ratio:1;min-width:0;border-right:1px solid var(--icm-line);border-bottom:1px solid var(--icm-line);overflow:hidden;font:600 clamp(.38rem,.9vw,.7rem)/1 monospace}.icm-png-flow{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--icm-ink);margin-top:2rem}.icm-png-flow>div{position:relative;min-height:190px;padding:.85rem;border-right:1px solid var(--icm-ink)}.icm-png-flow>div:last-child{border-right:0}.icm-png-flow>div.is-best{background:color-mix(in srgb,var(--icm-lime) 38%,var(--icm-paper))}.icm-png-flow strong{display:block;margin:.4rem 0;font-size:1.8rem}.icm-png-flow div div{height:82px;display:flex;align-items:end;gap:1px;border-bottom:1px solid var(--icm-ink)}.icm-png-flow i{flex:1;background:var(--icm-red);min-height:3px}.icm-png-flow small{display:block;margin-top:.55rem;line-height:1.25}.icm-webp-flow{display:grid;grid-template-columns:1fr 1fr .72fr;border:1px solid var(--icm-ink);margin-top:2rem}.icm-webp-flow>*{min-height:210px;padding:1.2rem;border-right:1px solid var(--icm-ink)}.icm-webp-flow>:last-child{border-right:0;background:var(--icm-ink);color:var(--icm-paper)}.icm-webp-flow h4{margin:.55rem 0 1rem;font-size:1.4rem;text-transform:none;letter-spacing:-.02em}.icm-webp-flow p{color:var(--icm-muted);line-height:1.5}.icm-webp-flow div strong{display:block;margin:1.5rem 0 .5rem;font-size:1.35rem}.icm-footer{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.1rem clamp(1rem,3vw,2rem);font-size:.8rem;line-height:1.45}@media (max-width:780px){.icm{width:100%;margin-block:2rem;box-shadow:6px 6px 0 var(--icm-ink)}.icm-header{display:grid;align-items:start}.icm-upload{width:100%}.icm-controls,.icm-stage{grid-template-columns:1fr}.icm-stage figure{border-right:0;border-bottom:1px solid var(--icm-ink)}.icm-stage figure:last-child{border-bottom:0}.icm-metrics{grid-template-columns:1fr 1fr}.icm-metric:nth-child(2){border-right:0}.icm-metric:nth-child(-n+2){border-bottom:1px solid var(--icm-ink)}.icm-bits{grid-template-columns:1fr}.icm-bit-grid{grid-template-columns:repeat(16,1fr)}.icm-jpeg-flow,.icm-webp-flow{grid-template-columns:1fr}.icm-webp-flow>*{border-right:0;border-bottom:1px solid var(--icm-ink);min-height:0}.icm-png-flow{grid-template-columns:1fr}.icm-png-flow>div{min-height:150px;border-right:0;border-bottom:1px solid var(--icm-ink)}.icm-png-flow>div:last-child{border-bottom:0}.icm-footer{grid-template-columns:1fr;gap:.8rem}}@media (prefers-reduced-motion:reduce){.icm *,.icm :before,.icm :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}