:root{font-family:Arial,"PingFang SC",sans-serif;color:#231d19;background:#f3ede1}*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(90deg,transparent 49.9%,#e1d7c6 50%,transparent 50.1%),#f3ede1}button,input{font:inherit}button{cursor:pointer}main{max-width:1180px;margin:auto;padding:0 34px}header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c8bcaa}.logo{color:inherit;text-decoration:none;font:800 20px Georgia,serif}.logo span{font:9px Arial,sans-serif;letter-spacing:.16em;margin-left:10px;color:#81766a}.best{font-size:11px;color:#786e63}.best b{font:700 18px Georgia,serif;color:#e94d35;margin-left:7px}.hero{display:grid;grid-template-columns:1.08fr .92fr;min-height:500px;border-bottom:1px solid #c8bcaa}.copy{padding:70px 60px 60px 0}.kicker,.resultHead p{font:10px monospace;letter-spacing:.18em;color:#e04d36}.copy h1{font:500 clamp(56px,7vw,96px)/.91 Georgia,serif;letter-spacing:-.055em;margin:25px 0}.copy h1 i{color:#e64b34;font-weight:400}.lede{max-width:510px;color:#6e6258;line-height:1.8;font-size:15px}.stage{border-left:1px solid #c8bcaa;display:grid;place-items:center;position:relative;padding:40px}.dial{width:280px;height:280px;border:1px solid #9c8e7d;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.dial:before,.dial:after{content:"";position:absolute;background:#9c8e7d}.dial:before{width:1px;height:328px}.dial:after{height:1px;width:328px}.dial span{z-index:1;background:#f3ede1;padding:10px;font:500 58px Georgia,serif}.dial small{z-index:1;background:#f3ede1;padding:0 10px;color:#85786c}.stage.calibrating .dial{animation:pulse .625s ease-out infinite}.stage.tapping .dial{opacity:.18}.stage.done .dial{border-color:#e64b34}.stage.done .dial:before,.stage.done .dial:after{background:#e64b34}@keyframes pulse{50%{transform:scale(.9);border-color:#e64b34}}#tap{position:absolute;inset:34px;border:0;background:#e64b34;color:#fff;font:700 clamp(32px,4vw,54px) Georgia,serif;opacity:0;pointer-events:none}#tap small{font:11px Arial,sans-serif;letter-spacing:.08em;font-weight:400}#tap:active{background:#c93a27;transform:scale(.99)}.stage.tapping #tap{opacity:1;pointer-events:auto}.controls{display:grid;grid-template-columns:160px 1fr auto;gap:15px 26px;padding:34px 0 45px;border-bottom:1px solid #c8bcaa;align-items:center}.controls>div:first-child{display:flex;flex-direction:column}.controls label{font-size:11px;color:#766b60}.controls output{font:500 29px Georgia,serif;margin-top:3px}.controls input[type=range]{accent-color:#e64b34;width:100%}.presets{display:flex;gap:5px}.presets button{border:1px solid #b8aa98;background:transparent;padding:9px 11px;font-size:10px}.presets button.active{background:#27211d;color:#fff}.remember{grid-column:2}.start{grid-column:3;grid-row:2;background:#27211d;color:#fff;border:0;padding:13px 24px;font-weight:700}.results{padding:55px 0}.resultHead{display:flex;justify-content:space-between;align-items:end}.resultHead h2{font:500 44px Georgia,serif;margin:8px 0}.resultHead button{border:1px solid #9f9283;background:transparent;padding:10px 17px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #bdb09f;margin:25px 0}.metrics article{padding:20px 24px;border-right:1px solid #bdb09f}.metrics article:last-child{border:0}.metrics span{display:block;font-size:10px;color:#75695e}.metrics b{font:500 42px Georgia,serif;color:#e64b34}.metrics small{margin-left:5px}.chart{border:1px solid #bdb09f;background:#f8f4eb;padding:18px}.legend{display:flex;justify-content:space-between;font-size:9px;color:#82776c}.legend i{display:inline-block;width:7px;height:7px;background:#e64b34;margin-right:5px}.legend span:last-child i{background:#263a55}.chart canvas{width:100%;height:320px;display:block}#tapList{display:grid;grid-template-columns:repeat(12,1fr);padding:0;margin:16px 0;list-style:none;gap:3px}#tapList li{text-align:center;padding:9px 2px;border-top:2px solid #aaa;font:10px monospace}#tapList li.early{border-color:#e64b34;color:#b63624}#tapList li.late{border-color:#263a55;color:#263a55}footer{padding:25px 0 40px;display:flex;justify-content:space-between;font:9px monospace;color:#84796d;letter-spacing:.1em}@media(max-width:760px){main{padding:0 18px}.hero{grid-template-columns:1fr}.copy{padding:45px 0}.copy h1{font-size:58px}.stage{border-left:0;border-top:1px solid #c8bcaa;min-height:390px}.dial{width:220px;height:220px}.dial:before{height:260px}.dial:after{width:260px}.controls{grid-template-columns:1fr}.controls>*{grid-column:1!important;grid-row:auto!important}.presets{display:grid;grid-template-columns:1fr 1fr}.start{width:100%}.metrics{grid-template-columns:1fr}.metrics article{border-right:0;border-bottom:1px solid #bdb09f}.chart canvas{height:230px}#tapList{grid-template-columns:repeat(6,1fr)}footer{gap:15px}.best{display:none}}