html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--shadow-color: 220 3% 15%;--shadow-strength: 1%}@media(prefers-color-scheme:dark){:root{--shadow-color: 220 40% 2%;--shadow-strength: 25%}}*,*:after,*:before{box-sizing:border-box}@property --open{syntax: "<number>"; inherits: true; initial-value: 0;}@property --spread{syntax: "<number>"; inherits: true; initial-value: 0;}@property --pop{syntax: "<number>"; inherits: true; initial-value: 0;}:root{--hue: 280;--base: hsl(210 16% 93%);--shade-one: hsl(210 16% 86%);--shade-three: hsl(210 16% 90%);--shade-two: hsl(210 16% 97%);--count: 7;--transition: .25s;--transition-step: .1s;--size-multiplier: 1.8;--total-time: calc((var(--count) * var(--transition-step)) + var(--transition))}body{display:grid;place-items:center;align-content:center;min-height:100vh;font-family:Google Sans,sans-serif,system-ui;background:var(--base);gap:1.25rem}#dial-select{--padding: 1.25rem;--font-size: 1.1rem;--height: calc((var(--padding) * 2) + var(--font-size));--width: 200px;--open: 0;--exit-delay: var(--transition);--exit-stagger: calc(var(--count) * var(--transition-step));--total-time: calc(var(--exit-stagger) + var(--transition));--exit-time: calc(var(--exit-delay) + var(--transition));--chrome-delay: var(--exit-delay);--hold: 3s}.dial{-webkit-appearance:none;-moz-appearance:none;appearance:none;anchor-name:--dial;aspect-ratio:1;padding:var(--padding);font-size:var(--font-size);line-height:1;width:var(--width);display:flex;gap:1.25rem;border-radius:50%;border:0;outline-width:0;cursor:pointer;position:relative;box-shadow:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));background:var(--surface-1);outline-color:var(--color)}.dial__backdrop{width:calc(var(--width) * var(--size-multiplier));aspect-ratio:1;border-radius:50%;position:absolute;background:var(--shade-one);box-shadow:0 0 1rem .25rem #00000040 inset;top:50%;left:50%;translate:-50% -50%;scale:var(--open, 0);transition:scale var(--transition) var(--chrome-delay)}#dial-select:has([popover]:popover-open) .dial__backdrop{--open: 1}.dial__surround{border-radius:50%;position:absolute;inset:0;background:var(--base);transition:box-shadow var(--transition) var(--chrome-delay);box-shadow:0 1px 2px #ffffff80 inset,0 calc(var(--open, 0) * 10px) 10px -5px #1a1a1a80}#dial-select:has([popover]:popover-open){--open: 1;--chrome-delay: 0s}.dial__surround:after{content:"";position:absolute;inset:1rem;background:var(--shade-one);box-shadow:0 0 8px 8px #1a1a1a26 inset,0 0 2px 2px #80808080 inset;border-radius:50%}.dial__knob-wrapper{position:absolute;inset:2rem;border-radius:50%}.dial__knob-wrapper:after{content:"";box-shadow:0 0 2px 2px #1a1a1a40,0 0 4px 2px #1a1a1a40,0 1px 2px #ffffffbf inset,0 -1px 2px #1a1a1abf inset;position:absolute;inset:0;border-radius:50%}.dial__knob{height:100%;width:100%;display:inline-block;border-radius:50%;background:radial-gradient(var(--shade-three) 50%,transparent),var(--shade-two);transition:rotate var(--transition);rotate:calc((var(--active-index, 0) * (360 / var(--count))) * 1deg)}.dial__knob:after{content:"";border-radius:999px;filter:brightness(1.2);box-shadow:0 1px 4px 1px #1a1a1a80 inset;width:6px;aspect-ratio:1 / 3;background:hsl(var(--hue, 10) 80% 50%);position:absolute;left:50%;top:10%;transform:translate(-50%)}#dial-select [popover]{overflow:visible;border-radius:50%;border:0;outline-width:0;color:inherit;inset:auto;position:fixed;top:anchor(--dial center);left:anchor(--dial center);aspect-ratio:1;min-height:0;margin:0;padding:0;background:transparent;--hole: calc(var(--width) * .5 / max(var(--pop, 1), .001));-webkit-mask:radial-gradient(transparent 0 var(--hole),white var(--hole) 100%);mask:radial-gradient(transparent 0 var(--hole),white var(--hole) 100%);height:calc(var(--width) * var(--size-multiplier));width:calc(var(--width) * var(--size-multiplier));transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(270deg) scale(var(--pop, 0));transition:--pop var(--transition) var(--exit-delay),display var(--exit-time) allow-discrete,overlay var(--exit-time) allow-discrete}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;top:50%;left:50%}:where(svg){stroke:currentColor;fill:none}#dial-select [role=option]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;font:inherit;color:inherit;cursor:pointer;position:absolute;display:grid;place-items:center;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%) rotate(calc((var(--spread, 0) * (((360 / var(--count)) * var(--index)))) * 1deg));border-radius:50%;opacity:var(--spread, 0);transition:--spread .01s var(--hold),outline-offset var(--transition)}.option__icon{width:calc(var(--width) * .3);position:absolute;display:grid;aspect-ratio:1;border-radius:50%;place-items:center;transform:rotate(90deg) translateY(calc((.5 + (var(--spread, 0) * .5)) * (var(--width) * -.68)));opacity:var(--spread, 0);transition:background var(--transition)}#dial-listbox:popover-open [role=option]:is(:hover,.active) .option__icon{--active: 1;background:#bec7d080}[role=option][aria-selected=true]{--active: 1}.option__icon svg{stroke:#333;opacity:calc(.25 + var(--active, 0));width:65%;rotate:calc((1 * (((360 / var(--count)) * var(--index)))) * -1deg);transition:opacity var(--transition)}[behavior=button]{outline:2px hsl(var(--hue) 80% 50%)}#dial-select [role=option]{outline-offset:0}#dial-listbox:popover-open [role=option].active .option__icon{outline:.2rem solid hsl(var(--hue) 80% 50%);outline-offset:.2rem}#dial-select [popover]:popover-open{--open: 1;--pop: 1;transition:display var(--total-time) allow-discrete,overlay var(--total-time) allow-discrete}#dial-select [popover]:popover-open [role=option]{--pop: 1;--spread: 1;transition:--spread var(--transition) calc(var(--index, 0) * var(--transition-step)),outline-offset var(--transition)}@starting-style{#dial-select [popover]:popover-open [role=option]{--spread: 0}}#dial-select [role=option]:is(:hover,.active){--highlight: .75}#dial-select [role=option][aria-selected=true]{--highlight: 1}