*{box-sizing:border-box}html,body{margin:0;padding:0;-webkitwebkit-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0a;color:#fff}#root{height:100%;width:100%}.app{height:100%;display:flex;flex-direction:column;padding:.4rem;max-width:480px;margin:0 auto}.display-section{height:40%;min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center}.kph-display{text-align:center}.kph-value{font-size:4rem;font-weight:700;color:#00d4aa;display:block;line-height:1}.kph-label{font-size:1rem;color:#666;text-transform:uppercase;letter-spacing:.1em}.pace-display{display:flex;align-items:baseline;gap:.25rem;justify-content:center;margin-top:.25rem}.pace-value{font-size:2rem;font-weight:600}.pace-unit{font-size:.9rem;color:#666}.presets{height:25%;min-height:110px;display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;width:100%;align-content:start}.preset-btn{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:6px;padding:.6rem .15rem;color:#fff;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;align-items:center;gap:.1rem;outline:none;-webkit-tap-highlight-color:transparent}.preset-btn:focus{outline:none}.preset-btn:hover{background:#252525;border-color:#00d4aa}.preset-btn:active{transform:scale(.97)}.preset-btn .label{font-size:.55rem;color:#888;font-weight:500}.preset-btn .preset-pace{font-size:.7rem;font-weight:600;color:#00d4aa}.dial-section{height:35%;min-height:160px;display:flex;flex-direction:column}.dial-container{flex:1;display:flex;align-items:center;justify-content:center;gap:.2rem;background:#151515;border-radius:10px;padding:.3rem;width:100%}.dial{display:flex;flex-direction:column;align-items:center;height:100%}.dial-label{font-size:.55rem;color:#444;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.1rem}.dial-separator{font-size:1.5rem;font-weight:300;color:#333;margin:0 .15rem;padding-top:.4rem}.dial-wheel{height:160px;width:50px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}.dial-wheel::-webkit-scrollbar{display:none}.dial-spacer{height:55px;flex-shrink:0}.dial-item{height:45px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-size:1.3rem;font-weight:500;color:#444;transition:color .15s ease}.dial-item.active{color:#fff;font-size:1.5rem;font-weight:600}@media(min-width:768px){.kph-value{font-size:5rem}.kph-label{font-size:1.25rem}.pace-value{font-size:2.5rem}.dial-wheel{width:55px}.dial-item{height:50px;font-size:1.5rem}.dial-item.active{font-size:1.7rem}.dial-separator{font-size:1.75rem}.preset-btn{padding:.4rem .2rem}.preset-btn .label{font-size:.65rem}.preset-btn .preset-pace{font-size:.8rem}}