:root{--encre: #141414;--papier: #F3F2EE;--graphite: #6F6C66;--rouille: #B4532A;--ligne: #E2E0DA;--blanc: #FFFFFF;--titre: "Familjen Grotesk", system-ui, sans-serif;--signature: "Newsreader", Georgia, serif;--texte: "Onest", system-ui, sans-serif;--doux: cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box}body{margin:0;background:var(--papier);color:var(--encre);font:400 16px/1.55 var(--texte)}:focus-visible{outline:2px solid var(--rouille);outline-offset:3px}.top{max-width:1200px;margin:0 auto;padding:24px 20px}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--encre);text-decoration:none;font:700 22px var(--titre);letter-spacing:-.02em;min-height:44px}.brand svg{width:28px;height:28px}.hero{max-width:1200px;margin:0 auto;padding:24px 20px 96px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}h1{font:700 clamp(40px,5vw,64px)/.98 var(--titre);letter-spacing:-.035em;margin:24px 0 22px}h1 em{display:block;margin-top:.08em;font:italic 300 1.04em/1 var(--signature);letter-spacing:-.01em}.lead{color:var(--graphite);max-width:42ch;font-size:17px;margin:0}.drop{margin-top:40px;width:260px;aspect-ratio:1;padding:28px;border-radius:50%;background:var(--encre);color:var(--papier);display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;cursor:pointer;box-shadow:0 0 0 14px var(--blanc),0 30px 60px -20px #0005;transition:transform .35s var(--doux),box-shadow .35s var(--doux)}.drop:hover,.drop.over{transform:scale(1.04)}.drop.over{box-shadow:0 0 0 14px var(--blanc),0 0 0 17px var(--rouille),0 30px 60px -20px #0005}.drop:has(input:focus-visible){outline:2px solid var(--rouille);outline-offset:18px}.drop input{position:absolute;opacity:0;width:1px;height:1px}.plus{width:46px;height:46px;border-radius:50%;background:var(--papier);color:var(--encre);display:grid;place-items:center;font-size:26px;line-height:1;margin-bottom:6px}.drop small{font-size:13px;opacity:.8}.formats{margin-top:8px;font:500 11px var(--texte);letter-spacing:.1em;opacity:.8}.panel{margin-top:24px;background:var(--blanc);border:1px solid var(--ligne);border-radius:24px;padding:28px}.settings{display:grid;gap:24px}.levels{border:0;margin:0;padding:0;min-width:0}legend{font:600 18px var(--titre);margin-bottom:12px;padding:0}.seg{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:999px;background:var(--papier);border:1px solid var(--ligne)}.seg label{position:relative}.seg input{position:absolute;opacity:0}.seg span{display:block;padding:10px 18px;min-height:44px;border-radius:999px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}.seg input:checked+span{background:var(--encre);color:var(--papier)}.seg input:focus-visible+span{outline:2px solid var(--rouille);outline-offset:2px}.hint{margin:10px 0 0;color:var(--graphite);font-size:14px}.switch{display:inline-flex;gap:12px;align-items:center;min-height:44px;font-weight:500;cursor:pointer}.switch input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:46px;height:28px;border-radius:999px;background:var(--ligne);position:relative;cursor:pointer;transition:background .2s;flex:none}.switch input:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--blanc);box-shadow:0 1px 3px #0003;transition:translate .25s var(--doux)}.switch input:checked{background:var(--encre)}.switch input:checked:after{translate:18px}.switch input:disabled{opacity:.5;cursor:not-allowed}.results{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}.results:empty{display:none}.results li{display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"img name gain" "img sizes dl" "tip tip tip";align-items:center;column-gap:14px;row-gap:2px;padding:12px;border:1px solid var(--ligne);border-radius:16px;animation:arrive .4s var(--doux)}.results img{grid-area:img;width:56px;height:56px;object-fit:cover;border-radius:10px}.results .name{grid-area:name;font-weight:500;overflow-wrap:anywhere}.results .sizes{grid-area:sizes;color:var(--graphite);font-size:14px}.results .gain{grid-area:gain;font:700 20px var(--titre);color:var(--rouille);text-align:right}.results .download{grid-area:dl;justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--encre);color:var(--papier);text-decoration:none;font-weight:500;font-size:14px;transition:transform .2s var(--doux)}.results .download:hover{transform:translateY(-1px)}.results .tip{grid-area:tip;margin:8px 0 0;color:var(--graphite);font-size:14px}.results .error{grid-template-areas:"name" "message";grid-template-columns:1fr}.results .error .message{grid-area:message;color:var(--rouille);font-size:14px}@keyframes arrive{0%{opacity:0;translate:0 8px}}.proof{max-width:1200px;margin:0 auto;padding:96px 20px 120px;border-top:1px solid var(--ligne);display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}h2{font:700 clamp(30px,3.4vw,44px)/1.05 var(--titre);letter-spacing:-.025em;margin:0 0 18px}h2 em{display:block;font:italic 300 1.05em/1.1 var(--signature)}.proof-text p{color:var(--graphite);max-width:40ch;margin:0}.compare-wrap{margin:0}.compare{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:960 / 665;box-shadow:0 30px 70px -30px #0006}.compare img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}.compare .after{clip-path:inset(0 0 0 var(--pos))}.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--blanc)}.compare .handle:after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;translate:-50% -50%;border-radius:50%;background:var(--blanc);box-shadow:0 2px 8px #0004}.tag{position:absolute;top:14px;padding:8px 14px;border-radius:999px;background:#fffe;font-size:13px;font-weight:500}.tag.left{left:14px}.tag.right{right:14px}.gain-card{position:relative;width:220px;margin:-48px 20px 0 auto;padding:16px 18px;background:var(--blanc);border-radius:16px;box-shadow:0 20px 40px -20px #0004;display:grid}.gain-card span{font-size:13px;color:var(--graphite)}.gain-card b{font:700 32px/1.1 var(--titre);color:var(--rouille);letter-spacing:-.02em}.gain-card i{height:4px;margin-top:10px;border-radius:4px;background:var(--ligne);overflow:hidden}.gain-card s{display:block;height:100%;background:var(--encre)}figcaption{margin-top:16px;color:var(--graphite);font-size:13px}.reveal{opacity:0;translate:0 24px;transition:opacity .7s ease,translate .7s var(--doux)}.reveal.in{opacity:1;translate:0 0}@media(max-width:900px){.hero{grid-template-columns:1fr;gap:32px;padding-top:8px}.intro{display:grid;justify-items:center;text-align:center}.lead{margin:0 auto}.drop{width:230px}.panel{margin-top:0;padding:20px}.proof{grid-template-columns:1fr;gap:32px;padding:64px 20px 96px}.gain-card{width:180px;margin-right:12px}}@media(max-width:420px){.seg{display:grid;grid-template-columns:1fr;border-radius:20px;width:100%}.seg span{text-align:center}.results li{grid-template-areas:"img name name" "img sizes gain" "dl dl dl" "tip tip tip"}.results .download{justify-self:stretch;justify-content:center;margin-top:8px}}@media(prefers-reduced-motion:reduce){*,*:after{transition:none!important;animation:none!important}.reveal{opacity:1;translate:none}}.foot{max-width:1200px;margin:0 auto;padding:32px 20px 48px;border-top:1px solid var(--ligne);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--graphite);font-size:14px}.foot p{margin:0}.foot a{color:var(--encre);text-underline-offset:3px;display:inline-block;padding:12px 0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}