:root{color:#111;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#f4d35e99,#0000 34%),linear-gradient(#f7f1e8 0%,#efe4d4 100%);font-family:IBM Plex Sans,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer;border:0}#app{min-height:100vh}.shell{place-items:center;min-height:100vh;padding:24px;display:grid}.panel{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffcf7b8;border:1px solid #11111114;border-radius:32px;justify-items:center;gap:32px;width:min(420px,100%);padding:36px 28px;display:grid;box-shadow:0 22px 50px #5237121f,inset 0 1px #ffffffa6}.transport{color:#fffaf0;letter-spacing:.04em;text-transform:uppercase;background:#111;border-radius:999px;min-width:148px;padding:16px 28px;font-size:1.1rem;transition:transform .14s,box-shadow .14s,background-color .14s;box-shadow:0 10px 24px #1111112e}.transport:hover{transform:translateY(-1px);box-shadow:0 14px 28px #1113}.transport[aria-pressed=true]{background:#c2410c}.tempo{justify-items:center;gap:24px;display:grid}.version{letter-spacing:.12em;text-transform:uppercase;color:#11111185;margin:0;font-size:.78rem}.notice{color:#111111b3;text-align:center;margin:-16px 0 0;font-size:.95rem;line-height:1.5}.notice a{color:#111;text-underline-offset:.18em}.status{color:#1111119e;text-align:center;min-height:1.5em;margin:0;font-size:.95rem}.tempo-readout{justify-items:center;gap:8px;display:grid}.tempo-label{letter-spacing:.16em;text-transform:uppercase;color:#1111118f;font-size:.78rem}.tempo-input{text-align:center;color:#111;background:0 0;border:0;border-bottom:2px solid #11111129;width:132px;padding:0 0 8px;font-size:clamp(2.5rem,8vw,4rem);line-height:1}.tempo-input:focus{border-bottom-color:#111;outline:none}.dial{--dial-rotation:-45deg;place-items:center;width:208px;height:208px;display:grid;position:relative}.dial-face{background:linear-gradient(145deg,#fffffff5,#ecdfd0eb);border:1px solid #11111114;border-radius:50%;width:100%;height:100%;box-shadow:inset -14px -14px 26px #875c1a14,inset 14px 14px 26px #ffffffd1,0 18px 38px #52371224}.dial-marker{transform-origin:50% 86px;width:6px;height:60px;transform:rotate(var(--dial-rotation));background:#111;border-radius:999px;transition:transform .1s linear;position:absolute;top:18px;left:calc(50% - 3px)}.dial-input{opacity:0;cursor:grab;margin:0;position:absolute;inset:0}.dial-input:active{cursor:grabbing}.dial:focus-within .dial-face{outline-offset:8px;outline:2px solid #111}@media (width<=520px){.panel{border-radius:24px;gap:24px;padding:28px 20px}.dial{width:180px;height:180px}.dial-marker{transform-origin:50% 75px;height:50px;top:15px}}