:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#202621;background:#f1f3ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}header{max-width:1400px;margin:auto;padding:29px 48px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #242c2415}header a{font-size:21px;font-weight:650;letter-spacing:-.7px;text-decoration:none;color:inherit}header a span{font-size:12px;margin-left:9px;color:#68756c;letter-spacing:0}.device{margin-left:auto;font-size:12px;color:#758078}.tag{border:1px solid #c9d1c9;border-radius:20px;padding:6px 11px;font-size:11px;color:#637068}main{max-width:1280px;min-height:740px;margin:auto;display:grid;grid-template-columns:minmax(520px,1.4fr) minmax(300px,.8fr);align-items:center;gap:50px;padding:40px 55px 50px}.stage{min-height:580px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 52%,#dce3db44,transparent 65%)}.screen-wrap{position:relative;width:466px;height:466px;border-radius:50%;background:#000;box-shadow:0 26px 45px #14241713,0 0 0 1px #07150c0d;transition:width .3s,height .3s}canvas{display:block;width:100%;height:100%;border-radius:50%}#touch{position:absolute;inset:0;border:0;border-radius:50%;background:transparent;touch-action:manipulation}.scale-line{display:flex;gap:17px;margin-top:33px;color:#818c82;font-size:10px;letter-spacing:.3px}.scale-line span+span::before{content:"/";margin-right:17px;color:#b4bdb4}aside{max-width:340px}.section-label{font-size:10px;color:#748679;letter-spacing:1px}h1{font-size:40px;font-weight:500;line-height:1.35;letter-spacing:1px;margin:20px 0 16px}.intro p{font-size:13px;color:#778078;margin-bottom:33px}.settings{border-top:1px solid #cad2c9;padding-top:24px}.settings>label{font-size:11px;color:#7e8a7f}#task{display:block;width:100%;padding:10px 0 14px;border:0;border-bottom:1px solid #d7ddd4;background:transparent;font-size:16px;outline-offset:4px}.setting-row{display:flex;align-items:center;justify-content:space-between;margin:20px 0;font-size:12px}.setting-row label{color:#717d73}select{background:transparent;border:0;color:#344b3b;outline-offset:5px;padding:4px}.actions{display:flex;gap:10px;margin:23px 0 28px}.actions button{padding:12px 22px;border:1px solid #bac7ba;border-radius:24px;background:transparent;font-size:12px}.actions #start{background:#233e2f;border-color:#233e2f;color:#eff6ef;min-width:142px}.actions button:hover{filter:brightness(1.12)}.scrub-label{display:flex;justify-content:space-between;font-size:11px;color:#79877b}#progress{width:100%;margin:12px 0 4px;accent-color:#426f55;height:4px}.hint{font-size:11px;line-height:1.9;color:#8a938a}.connection{display:flex;gap:10px;border-top:1px solid #cad2c9;margin-top:25px;padding-top:20px}.connection i{width:6px;height:6px;border-radius:50%;background:#87988a;margin-top:6px}.connection strong{font-size:11px;font-weight:500;color:#67776a}.connection p{font-size:10px;color:#9aa39a;margin:6px 0}footer{display:flex;justify-content:space-between;max-width:1304px;margin:auto;border-top:1px solid #242c2415;padding:22px 48px;color:#919b92;font-size:10px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #58886a;outline-offset:5px}@media(max-width:900px){header{padding:22px;gap:10px}.device{font-size:9px}.tag{display:none}main{grid-template-columns:1fr;padding:18px 20px 40px;gap:25px}.stage{min-height:500px}.screen-wrap{max-width:88vw;max-height:88vw}aside{max-width:466px;width:100%;margin:auto}h1{font-size:30px}h1 br{display:none}footer{padding:20px;gap:15px}.scale-line{gap:9px;font-size:9px}.scale-line span+span::before{margin-right:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}