.dial{position:relative;width:min(320px,88vw);aspect-ratio:1;filter:drop-shadow(0 14px 28px rgba(0,0,0,.22))}.dial--size-fixed{width:var(--dial-size,240px);min-width:var(--dial-size,240px)}.dial__segments{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.dial__segment{fill:#2a2a2a;transition:fill .12s ease,filter .12s ease}.dial__segment.is-active{fill:#ffffff;filter:drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(255,255,255,.55))}.dial__segment-cap{fill:#3a3a3a}.dial__segment-cap.is-active{fill:#e8e8e8}.dial__segment-cap[data-cap=end].is-complete{fill:#5dffa8;filter:drop-shadow(0 0 3px rgba(93,255,168,1)) drop-shadow(0 0 8px rgba(93,255,168,.75)) drop-shadow(0 0 16px rgba(46,220,120,.45))}.dial__assembly{position:absolute;inset:16%;display:grid;place-items:center}.dial__bezel{padding:5px;background:linear-gradient(145deg,#f0f0f0,#9a9a9a 45%,#d8d8d8);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 4px rgba(0,0,0,.25)}.dial__bezel,.dial__well{width:100%;height:100%;border-radius:50%}.dial__well{padding:10px;background:radial-gradient(circle at 50% 35%,#3a3a3a 0,#141414 68%,#050505 100%);box-shadow:inset 0 6px 14px rgba(0,0,0,.65)}.dial__knob{position:relative;width:100%;height:100%;border:none;border-radius:50%;cursor:grab;touch-action:none;transform-origin:center center;overflow:hidden;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.62) 0,transparent 44%),radial-gradient(circle at 68% 72%,rgba(0,0,0,.22) 0,transparent 48%),conic-gradient(from 210deg,#efefef 0deg,#c8c8c8 65deg,#ececec 125deg,#bdbdbd 185deg,#e4e4e4 245deg,#c4c4c4 305deg,#efefef 1turn);box-shadow:inset 0 2px 3px rgba(255,255,255,.65),inset 0 -5px 10px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.2)}.dial__knob:after,.dial__knob:before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 8%,#000 84%,transparent 96%);mask-image:radial-gradient(circle,#000 8%,#000 84%,transparent 96%)}.dial__knob:before{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 2px,rgba(0,0,0,.058) 2px 2.3px,rgba(255,255,255,.042) 2.3px 2.6px),repeating-radial-gradient(circle at 50% 50%,transparent 0 4px,rgba(0,0,0,.05) 4px 4.45px,rgba(255,255,255,.036) 4.45px 4.9px),repeating-radial-gradient(circle at 50% 50%,transparent 0 6.5px,rgba(0,0,0,.044) 6.5px 6.95px,rgba(255,255,255,.03) 6.95px 7.4px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),inset 0 0 12px 4px rgba(0,0,0,.05);mix-blend-mode:multiply;opacity:.95}.dial__knob:after{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 9px,rgba(0,0,0,.04) 9px 9.55px,rgba(255,255,255,.028) 9.55px 10.1px),repeating-radial-gradient(circle at 50% 50%,transparent 0 13px,rgba(0,0,0,.035) 13px 13.45px,rgba(255,255,255,.024) 13.45px 13.9px),repeating-radial-gradient(circle at 50% 50%,transparent 0 17.5px,rgba(0,0,0,.03) 17.5px 17.9px,rgba(255,255,255,.02) 17.9px 18.3px),repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(0,0,0,.026) 22px 22.4px,rgba(255,255,255,.018) 22.4px 22.8px);mix-blend-mode:soft-light;opacity:.88}.dial__knob:active{cursor:grabbing}.dial__knob:focus-visible{outline:2px solid #ffffff;outline-offset:4px}.dial__knob-dot{position:absolute;z-index:2;top:4%;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4a4a,#0a0a0a 70%);box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.15);pointer-events:none}.dial.is-dragging .dial__knob{cursor:grabbing}