*{box-sizing:border-box}body{margin:0;background:#fff;color:#17191d;font-family:"Segoe UI Variable","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:#f3f4f5;color:#292c31;border-radius:5px;padding:9px 16px;font-size:12px}button:hover{background:#e8ebef}button:focus-visible,a:focus-visible{outline:2px solid #1764d5;outline-offset:4px}header{max-width:1280px;margin:auto;padding:30px 42px 12px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:20px;letter-spacing:-.8px;font-weight:750;color:#105ec7;text-decoration:none}header button{background:transparent;color:#72767e;padding-right:0}main{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:40px;padding:0 50px}#stage{position:relative;height:calc(100vh - 145px);min-height:620px;max-height:980px;touch-action:none;cursor:grab;outline:none;min-width:0}#stage:focus-visible{outline:2px solid #e9edf4;outline-offset:-2px}canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:45%;width:100%;text-align:center;color:#8b9097;font-size:13px}.hint{position:absolute;bottom:0;left:0;width:100%;font-size:11px;color:#9a9ea6;text-align:center;pointer-events:none}aside{align-self:center;padding:0 0 20px}h1{font-size:30px;font-weight:550;letter-spacing:-1px;margin:0 0 10px;line-height:1.3}.intro{font-size:12px;color:#8a8f97;margin:0 0 28px;line-height:1.7}.states{display:flex;gap:8px;margin:0 0 25px}.states button{flex:1;font-size:13px;padding:10px}.states button[aria-pressed=true]{background:#1764d5;color:#fff}label{display:block;font-size:12px;color:#656b75;margin:16px 0}output{float:right;color:#999fa7;font-size:11px}input[type=range]{appearance:none;display:block;width:100%;height:3px;border:0;background:#eceef1;margin-top:14px;accent-color:#1764d5;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#737b87;border-radius:50%}.toolbar{display:flex;justify-content:space-between;margin:26px -6px 0}.toolbar button{background:transparent;font-size:11px;padding:7px 6px;color:#747a84}.toolbar button:hover{color:#1764d5}.effects{margin-top:35px}h2{font-size:12px;font-weight:600;margin:0 0 21px;color:#454b54}.effects label{margin:19px 0}.effects button{font-size:10px;background:transparent;color:#9298a2;padding:0;margin-top:9px}.note{font-size:10px;color:#abb0b7;line-height:1.9;margin:31px 0 0}footer{max-width:1280px;margin:0 auto;padding:24px 42px;display:flex;justify-content:space-between;font-size:10px;color:#b0b4bb}dialog{border:0;width:min(94vw,1050px);max-height:94vh;padding:22px;background:#fff;border-radius:8px}dialog::backdrop{background:rgba(255,255,255,.93)}#close-compare{display:block;margin-left:auto}.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:16px}figure{margin:0;text-align:center}figure img{max-height:75vh;width:100%;object-fit:contain}figcaption{font-size:12px;color:#7b828c;padding-top:10px}@media(max-width:760px){header{padding:23px 24px 6px}.brand{font-size:18px}main{display:block;padding:0 22px}#stage{height:68vh;min-height:470px;max-height:750px}aside{max-width:420px;margin:35px auto 0;padding:0 12px}h1{font-size:27px}.intro{margin-bottom:22px}.effects{margin-top:28px}.note{display:none}footer{padding:28px 24px;font-size:9px;gap:15px}.pair{gap:8px;padding:10px 0}dialog{padding:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}