:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#202020;background:#fff;font-size:16px;--preview:#fff;--preview-text:#222;--accent:#0099ba}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header{max-width:1600px;margin:auto;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.brand{font-weight:850;font-size:28px;letter-spacing:-1px;display:flex;align-items:center;gap:17px}.brand-line{font-size:12px;letter-spacing:2px;font-weight:600;color:#666;border-left:1px solid #ccc;padding-left:18px}.context{font-size:14px;color:#666}main{max-width:1600px;margin:auto;padding:34px 40px 25px}.heading{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:end;margin-bottom:28px}.eyebrow{color:#007e99;font-size:12px;letter-spacing:2px;font-weight:700;margin:0 0 10px}h1{font-size:clamp(28px,3vw,42px);line-height:1.08;letter-spacing:-1.5px;margin:0}.intro{color:#646464;line-height:1.55;margin:0}.controls{display:flex;align-items:start;gap:28px;padding:21px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.product-label{width:260px;flex-shrink:0}.controls label,legend{font-size:14px;font-weight:600}select{display:block;margin-top:9px;width:100%;padding:10px 28px 10px 10px;border:1px solid #bbb;background:#fff;color:#222}fieldset{border:0;padding:0;margin:0;flex:1}legend{padding:0;margin:0 0 9px}#backgrounds{display:flex;flex-wrap:wrap;gap:5px}#backgrounds button{border:1px solid #ccc;background:#fff;padding:10px 12px;font-size:14px}#backgrounds button[aria-pressed=true]{background:#222;color:#fff;border-color:#222}.range-label{width:265px;flex-shrink:0}output{float:right;color:#007e99;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent);display:block;margin:14px 0 7px}small{font-size:12px;color:#777;font-weight:400;line-height:1.4;display:block}.sample-strip{display:flex;gap:7px;overflow-x:auto;padding:16px 1px 12px}.sample-strip button{padding:0;width:65px;height:63px;border:1px solid #ddd;flex-shrink:0;background:#f0f0f0}.sample-strip button[aria-pressed=true]{border:2px solid var(--accent)}.sample-strip img{display:block;width:100%;height:100%;object-fit:contain}.status-line{font-size:13px;display:flex;justify-content:space-between;gap:15px;margin:3px 0 18px;color:#666}#photo-name{font-weight:600;color:#222}.comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 22px}.card-title{display:flex;align-items:center;gap:10px;margin:0 0 10px;min-height:26px}.card-title span{font-size:12px;color:#888;font-variant-numeric:tabular-nums}.card-title h2{font-size:16px;letter-spacing:-.25px;margin:0;font-weight:600}.card-title em{margin-left:auto;font-style:normal;color:#007e99;font-size:12px}.stage{display:flex;align-items:center;justify-content:center;border:0;padding:0;width:100%;aspect-ratio:1.2;background:var(--preview);overflow:hidden;isolation:isolate;cursor:zoom-in;position:relative}.stage img,.stage canvas{width:100%;height:100%;object-fit:contain;display:block}.stage[data-variant=current]{background:#f5f5f1}.stage[data-variant=current] img,.stage[data-variant=css] img{mix-blend-mode:multiply}.stage[data-variant=matching]{background:var(--photo-bg,#f0f0f0)}article>p{font-size:13px;line-height:1.5;color:#696969;margin:10px 0 0}aside{border-top:1px solid #ccc;display:grid;grid-template-columns:200px 1fr;gap:30px;padding:25px 0;margin-top:35px;font-size:14px}aside strong{font-weight:600}aside p{line-height:1.6;color:#646464;margin:0;max-width:850px}footer{font-size:12px;color:#777;padding-top:15px;border-top:1px solid #ddd;line-height:1.5}body[data-background=white]{--preview:#fff}body[data-background=warm]{--preview:#f5f5f1}body[data-background=gray]{--preview:#f0f0f0}body[data-background=dark]{--preview:#252525}body[data-background=check]{--preview:conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0) 0 0/20px 20px}dialog{border:0;width:min(920px,94vw);padding:22px;max-height:95dvh;overflow-y:auto;box-shadow:0 10px 90px #0005}dialog::backdrop{background:#0008}.zoom-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.zoom-heading h2{font-size:20px;margin:0}.zoom-heading button{border:1px solid #bbb;background:#fff;padding:9px 14px}#zoom-stage .stage{max-height:72dvh;aspect-ratio:1.1;cursor:default}dialog>p{font-size:13px;color:#666;margin-bottom:0}@media(min-width:1500px){.stage{aspect-ratio:1.35}}@media(max-width:1050px){.controls{flex-wrap:wrap}.product-label{flex:1;min-width:240px}fieldset{flex:2;min-width:350px}.range-label{width:100%}.heading{grid-template-columns:1fr 300px;gap:25px}.comparison{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){header{padding:20px}.context{display:none}main{padding:25px 20px}.heading{grid-template-columns:1fr;gap:17px}.intro{font-size:14px}.controls{gap:17px}.product-label,fieldset{min-width:0;width:100%;flex:initial}.comparison{gap:24px 12px}.card-title{gap:6px;flex-wrap:wrap;min-height:42px;align-content:end}.card-title h2{font-size:14px}.card-title em{display:none}.stage{aspect-ratio:.85}article>p{font-size:12px}aside{grid-template-columns:1fr;gap:10px}.status-line{display:block;line-height:1.7}.brand{font-size:25px}h1{letter-spacing:-.8px}}