:root{font-family:system-ui,sans-serif;color:#e5edea;background:#101820;color-scheme:dark}*{box-sizing:border-box}body{margin:0;padding:18px 28px;height:100dvh;display:flex;flex-direction:column;gap:10px;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center}small{font-size:10px;letter-spacing:2px;color:#92a9b1}h1{font-size:24px;margin:3px 0}a{color:#edc477;text-decoration:none}p{margin:0}.status{font-size:12px;color:#e1ba77}form{display:flex;gap:12px;align-items:end;flex-wrap:wrap;padding:12px;background:#192630;border:1px solid #30424c;border-radius:8px}label{font-size:11px;display:flex;flex-direction:column;gap:5px}select,button{font:inherit;font-size:12px;background:#243640;border:1px solid #425761;border-radius:4px;color:#e5edea;padding:7px}button{cursor:pointer}.check{flex-direction:row;align-items:center;padding-bottom:7px}input[type=range]{width:160px}main{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;min-height:130px}.comparison article{background:#14212b;border:1px solid #30424c;border-radius:8px;display:flex;flex-direction:column;align-items:center;padding:8px;min-height:0;overflow:hidden}h2{font-size:12px;font-weight:500;color:#bccdcf;margin:0 0 8px}article canvas{height:calc(100% - 52px);max-height:320px;max-width:100%;aspect-ratio:1;object-fit:contain;flex-shrink:1;min-height:0}article p{font-size:10px;color:#8ca3ad;margin-top:7px}h2 span{font-size:10px;color:#819ba6;margin-left:10px}.strip{background:#14212b;border:1px solid #30424c;border-radius:8px;padding:9px 14px}.strip>div{display:flex;justify-content:space-around;gap:7px}.sample{text-align:center;font-size:10px;color:#9eb2bb;min-width:0}.sample canvas{width:60px;height:60px;max-width:100%;object-fit:contain;display:block;margin:auto auto 3px}footer{font-size:10px;color:#819ba6;display:flex;justify-content:space-between;gap:12px}@media(max-height:760px){body{padding:10px 20px;gap:6px}.strip{padding:5px 10px}.sample canvas{width:44px;height:44px}h1{font-size:20px}form{padding:8px}h2{margin-bottom:4px}}@media(max-width:650px){body{padding:8px;gap:5px}form{gap:6px}label{font-size:10px}select,button{padding:4px}input[type=range]{width:110px}h1{font-size:19px}header a{font-size:12px}.comparison{gap:6px}.comparison article{padding:5px}.sample canvas{width:40px;height:40px}.strip{padding:5px}.strip>div{gap:3px}h2 span,footer span{display:none}h2{font-size:10px}article p{font-size:8px}}