@layer reset,tokens,base,layout,components,state;@layer reset{html{box-sizing:border-box;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}*,*:before,*:after{box-sizing:inherit}*{margin:0}body{line-height:1.5}img,picture,video,canvas,svg{max-width:100%;height:auto;vertical-align:middle}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}ul,ol{list-style:none;padding-inline-start:0}}@layer tokens{:root{--white: #ffffff;--dark-neutral: #002819;--proper-pink: #ff06c1;--color-background: var(--white);--color-indicator: var( --proper-pink );--color-thumb-ring: var(--dark-neutral);--color-text: var(--dark-neutral);--color-focus-ring: var(--dark-neutral);--color-shadow-hsl: 157deg 100% 8%;--scale-1: 1.1111;--scale-3: .8611;--margin: calc(100dvmin / 27);--center-size: calc(100dvmin - var(--margin) * 2);--square-corner-size: calc( var(--center-size) * .14645 );--min-touch-target: max(44px, 2.75rem);--thumb-size-ideal: calc(6 / 50 * var(--center-size));--thumb-size: max(var(--thumb-size-ideal), var(--min-touch-target));--thumb-gap: calc(var(--thumb-size-ideal) / 6);--thumb-position: calc(-1 / 2 * (var(--center-size) - var(--thumb-size)));--thumb-ring-thickness: calc(var(--thumb-size) / 32);--thumb-ring-size: calc( var(--thumb-ring-thickness) + var(--thumb-size) * 2 / 3 );--focus-ring-thickness: calc(var(--thumb-ring-thickness) * 2);--focus-ring-diameter: calc( var(--thumb-size) + var(--thumb-gap) + var(--focus-ring-thickness) );--scale-outer-diameter: calc( var(--center-size) - 2 * var(--thumb-size) - 2 * var(--thumb-gap) );--label-font-size-ideal: calc(1 / 18 * var(--scale-outer-diameter));--label-font-size: max( var(--label-font-size-ideal), calc(var(--min-touch-target) / 2) );--label-breathing-room: calc(2 * var(--label-font-size));--label-position-constrained: calc( -1 / 2 * (var(--scale-outer-diameter) - var(--label-breathing-room)) );--label-position-ideal: calc(-31 / 72 * var(--scale-outer-diameter));--label-position: max( var(--label-position-ideal), var(--label-position-constrained) );--scale-tick-offset: .25rem;--scale-svg-diameter-constrained: calc( 18 / 13 * var(--scale-outer-diameter) - 36 / 13 * var(--label-breathing-room) );--scale-svg-diameter: min( var(--scale-outer-diameter), var(--scale-svg-diameter-constrained) );--tick-major-weight: max(calc(var(--scale-svg-diameter) / 216), .125rem);--tick-minor-weight: max(calc(var(--scale-svg-diameter) / 432), .0625rem);--scale-hub-fraction: .66667;--scale-inner-diameter: calc( var(--scale-hub-fraction) * var(--scale-svg-diameter) - var(--scale-tick-offset) );--touch-control-size: var(--scale-inner-diameter);--button-available-width: calc( var(--square-corner-size) + (100dvw - 2 * var(--margin) - var(--center-size)) / 2 );--button-available-height: calc( var(--square-corner-size) + (100dvh - 2 * var(--margin) - var(--center-size)) / 2 );--button-corner-clearance: calc( ( hypot(50dvw - var(--margin), 50dvh - var(--margin)) - var(--center-size) / 2 - var(--thumb-gap) ) / sqrt(2) );--button-size: min( var(--min-touch-target), var(--button-available-width), var(--button-available-height), var(--button-corner-clearance) );--button-border-radius: 14.2857%;--button-focus-ring-thickness: calc(var(--button-size) / 16);--button-focus-ring-offset: calc( (var(--thumb-gap) - var(--button-focus-ring-thickness)) / 2 );--label-focus-ring-offset: calc(var(--button-focus-ring-offset) / 4);--shadow-depth-1: calc(1 / 150 * var(--scale-outer-diameter));--shadow-depth-2: calc(1 / 75 * var(--scale-outer-diameter));--shadow-depth-3: calc(1 / 40 * var(--scale-outer-diameter));--edge-shadow-large: inset 0px calc(-.15 * var(--shadow-depth-2)) calc(.15 * var(--shadow-depth-2)) calc(.15 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .15);--edge-shadow-small: inset 0px calc(-.15 * var(--shadow-depth-1)) calc(.15 * var(--shadow-depth-1)) calc(.15 * var(--shadow-depth-1)) hsl(var(--color-shadow-hsl) / .15);--drop-shadow-2: 0px calc(-.15 * var(--shadow-depth-2)) calc(.15 * var(--shadow-depth-2)) calc(.15 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .15), 0px calc(.8 * var(--shadow-depth-2)) calc(.7 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .3), 0px calc(1.5 * var(--shadow-depth-2)) calc(1.4 * var(--shadow-depth-2)) calc(-1 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .2), 0px calc(3.4 * var(--shadow-depth-2)) calc(3.1 * var(--shadow-depth-2)) calc(-2 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .15), 0px calc(7.9 * var(--shadow-depth-2)) calc(7.1 * var(--shadow-depth-2)) calc(-4 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .06), 0px calc(16.5 * var(--shadow-depth-2)) calc(14.9 * var(--shadow-depth-2)) calc(-6 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .03);--inner-shadow-1: inset 0px calc(.8 * var(--shadow-depth-1)) calc(.7 * var(--shadow-depth-1)) hsl(var(--color-shadow-hsl) / .3), inset 0px calc(1.5 * var(--shadow-depth-1)) calc(1.4 * var(--shadow-depth-1)) calc(-1 * var(--shadow-depth-1)) hsl(var(--color-shadow-hsl) / .2), inset 0px calc(3.4 * var(--shadow-depth-1)) calc(3.1 * var(--shadow-depth-1)) calc(-2 * var(--shadow-depth-1)) hsl(var(--color-shadow-hsl) / .15), inset 0px calc(7.9 * var(--shadow-depth-1)) calc(7.1 * var(--shadow-depth-1)) calc(-4 * var(--shadow-depth-1)) hsl(var(--color-shadow-hsl) / .06), inset 0px calc(16.5 * var(--shadow-depth-1)) calc(14.9 * var(--shadow-depth-1)) calc(-6 * var(--shadow-depth-1)) hsl(var(--color-shadow-hsl) / .03);--inner-shadow-2: inset 0px calc(.8 * var(--shadow-depth-2)) calc(.7 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .3), inset 0px calc(1.5 * var(--shadow-depth-2)) calc(1.4 * var(--shadow-depth-2)) calc(-1 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .2), inset 0px calc(3.4 * var(--shadow-depth-2)) calc(3.1 * var(--shadow-depth-2)) calc(-2 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .15), inset 0px calc(7.9 * var(--shadow-depth-2)) calc(7.1 * var(--shadow-depth-2)) calc(-4 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .06), inset 0px calc(16.5 * var(--shadow-depth-2)) calc(14.9 * var(--shadow-depth-2)) calc(-6 * var(--shadow-depth-2)) hsl(var(--color-shadow-hsl) / .03);--inner-shadow-3: inset 0px calc(.8 * var(--shadow-depth-3)) calc(.7 * var(--shadow-depth-3)) hsl(var(--color-shadow-hsl) / .3), inset 0px calc(1.5 * var(--shadow-depth-3)) calc(1.4 * var(--shadow-depth-3)) calc(-1 * var(--shadow-depth-3)) hsl(var(--color-shadow-hsl) / .2), inset 0px calc(3.4 * var(--shadow-depth-3)) calc(3.1 * var(--shadow-depth-3)) calc(-2 * var(--shadow-depth-3)) hsl(var(--color-shadow-hsl) / .15), inset 0px calc(7.9 * var(--shadow-depth-3)) calc(7.1 * var(--shadow-depth-3)) calc(-4 * var(--shadow-depth-3)) hsl(var(--color-shadow-hsl) / .06), inset 0px calc(16.5 * var(--shadow-depth-3)) calc(14.9 * var(--shadow-depth-3)) calc(-6 * var(--shadow-depth-3)) hsl(var(--color-shadow-hsl) / .03);--inner-shadow-large-2: var(--edge-shadow-large), var(--inner-shadow-2);--inner-shadow-small-1: var(--edge-shadow-small), var(--inner-shadow-1);--inner-shadow-small-2: var(--edge-shadow-small), var(--inner-shadow-2);--inner-shadow-small-3: var(--edge-shadow-small), var(--inner-shadow-3)}}@layer tokens{@media(max-width:21em),(max-height:21em),(max-width:336px),(max-height:336px){:root{--labels-minor-display: none;--tick-minor-display: none;--tick-major-weight: var(--tick-minor-weight);--scale-hub-fraction: .69444}}@media not (min-width:20em),not (min-height:20em),not (min-width:320px),not (min-height:320px){:root{--labels-display: none;--scale-svg-diameter: var(--scale-outer-diameter)}}@media(max-width:15em),(max-height:15em),(max-width:240px),(max-height:240px){:root{--thumb-size: 1.25rem;--thumb-mark-size: calc(var(--thumb-size) / 3);--thumb-mark-border-width: 0;--thumb-mark-fill: var(--color-thumb-ring);--touch-control-width: 100dvw;--touch-control-height: 100dvh;--touch-control-radius: 0}}@media(max-width:12em),(max-height:12em),(max-width:192px),(max-height:192px){:root{--scale-display: none;--corner-button-display: none;--scale-hub-fraction: .66667}}@media(max-width:8em),(max-height:8em),(max-width:128px),(max-height:128px){:root{--thumb-size: 6dvmin;--thumb-shadow-display: none;--thumb-background: transparent;--thumb-pointer-events: none;--thumb-position: calc( -1 * (var(--scale-outer-diameter) + var(--scale-inner-diameter)) / 4 );--thumb-mark-size: calc( (var(--scale-outer-diameter) - var(--scale-inner-diameter)) / 6 )}}}@layer base{html,body{height:100%;overflow:hidden}html{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;text-rendering:optimizeLegibility;color:var(--color-text);background-color:var(--color-background)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}button{background:none;border:none;padding:0;color:inherit}}@layer layout{.page-container{position:absolute;inset:0;overflow:clip;display:grid;grid-template-columns:var(--margin) [top-left-corner-start bottom-left-corner-start] minmax(0,1fr) [center-start] var(--square-corner-size) [top-left-corner-end bottom-left-corner-end] calc(var(--center-size) - 2 * var(--square-corner-size)) [top-right-corner-start bottom-right-corner-start] var(--square-corner-size) [center-end] minmax(0,1fr) [top-right-corner-end bottom-right-corner-end] var(--margin);grid-template-rows:var(--margin) [top-left-corner-start top-right-corner-start] minmax(0,1fr) [center-start] var(--square-corner-size) [top-left-corner-end top-right-corner-end] calc(var(--center-size) - 2 * var(--square-corner-size)) [bottom-left-corner-start bottom-right-corner-start] var(--square-corner-size) [center-end] minmax(0,1fr) [bottom-left-corner-end bottom-right-corner-end] var(--margin)}tvt-surface-visual{position:absolute;inset:0;display:block}.dial-container{grid-area:center;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center}.dial-container>*{grid-area:1 / 1}.clock-face{width:var(--scale-outer-diameter);height:var(--scale-outer-diameter);border-radius:50%;background-color:var(--color-background);box-shadow:var(--inner-shadow-large-2);display:grid;place-items:center;pointer-events:none;-webkit-mask:radial-gradient(circle,transparent calc(var(--scale-inner-diameter) / 2 - .5px),#000 calc(var(--scale-inner-diameter) / 2));mask:radial-gradient(circle,transparent calc(var(--scale-inner-diameter) / 2 - .5px),#000 calc(var(--scale-inner-diameter) / 2))}.clock-face>*,.clock-face:after{grid-area:1 / 1}.clock-face:after{content:"";width:calc(var(--scale-inner-diameter) - 2px);height:calc(var(--scale-inner-diameter) - 2px);border-radius:50%;box-shadow:var(--drop-shadow-2)}}@layer components{.shadow-main,.shadow-interaction{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.shadow-main{box-shadow:var(--inner-shadow-small-2)}.shadow-interaction:before,.shadow-interaction:after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none}.shadow-interaction:before{box-shadow:var(--inner-shadow-small-1)}.shadow-interaction:after{box-shadow:var(--inner-shadow-small-3)}.pressable{cursor:pointer}@media(hover:hover){:where(html:not([data-drag])) .pressable:hover .shadow-main{opacity:0}:where(html:not([data-drag])) .pressable:hover .shadow-interaction:before{opacity:1}}.pressable:active .shadow-main{opacity:0}.pressable:active .shadow-interaction:before{opacity:0}.pressable:active .shadow-interaction:after{opacity:1}@media(hover:hover){:where(html:not([data-drag])) .pressable:hover .pressable-content{scale:var(--scale-1)}}.pressable:active .pressable-content{scale:var(--scale-3)}@media(prefers-reduced-motion:no-preference){.shadow-main,.shadow-interaction:before,.shadow-interaction:after{transition:opacity .1s ease-in-out}.pressable-content{transition:scale .1s ease}}.button{position:relative;width:var(--button-size);height:var(--button-size);border-radius:var(--button-border-radius);background-color:var(--color-background);display:grid;place-items:center}.button>*{grid-area:1 / 1}.button-content{position:relative;width:100%;height:100%;border-radius:inherit;display:flex;align-items:center;justify-content:center}.focus-ring:before{content:"";position:absolute;inset:0;border-radius:inherit;outline:var(--button-focus-ring-thickness) solid var(--color-focus-ring);outline-offset:var(--button-focus-ring-offset);opacity:0;scale:var(--scale-1);pointer-events:none}.focus-ring:focus-visible{outline:none}.focus-ring:focus-visible:before{opacity:1;scale:none}@media(prefers-reduced-motion:no-preference){.focus-ring:before{transition:opacity .3s ease-in-out,scale .3s ease-in-out}}}@layer components{tvt-surface-visual canvas{display:block}}@layer components{tvt-scale{display:var(--scale-display, block);width:var(--scale-svg-diameter);height:var(--scale-svg-diameter);color:var(--color-text)}tvt-scale svg{display:block;width:100%;height:100%}.tick-major,.tick-minor{vector-effect:non-scaling-stroke}.tick-major{stroke-width:var(--tick-major-weight)}.tick-minor{display:var(--tick-minor-display, inline);stroke-width:var(--tick-minor-weight)}}@layer components{tvt-touch-control{width:var(--touch-control-width, var(--touch-control-size));height:var(--touch-control-height, var(--touch-control-size));border-radius:var(--touch-control-radius, 50%);cursor:pointer}}@layer components{tvt-track-labels{grid-area:center;place-self:center;position:relative;width:var(--scale-inner-diameter);height:var(--scale-inner-diameter);pointer-events:none;display:var(--labels-display, block)}.track-label:not(:nth-child(3n+1)){display:var(--labels-minor-display, flex)}.track-label{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;min-width:var(--min-touch-target);min-height:var(--min-touch-target);border-radius:25%;font-size:var(--label-font-size);line-height:var(--label-font-size);color:var(--color-text);display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:auto;cursor:pointer;--button-focus-ring-offset: var(--label-focus-ring-offset)}@media(hover:hover){:where(html:not([data-drag])) .track-label:hover .track-label-text{scale:1.1}@media(prefers-reduced-motion:no-preference){.track-label-text{transition:scale .1s ease}:where(html:not([data-drag])) .track-label:hover .track-label-text{scale:1.2}}}}@layer components{tvt-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background-color:var(--thumb-background, var(--color-background));pointer-events:var(--thumb-pointer-events, auto);display:grid;place-items:center;outline:none;cursor:pointer;transform:rotate(var(--thumb-angle, 0rad)) translateY(var(--thumb-position))}tvt-thumb>*{grid-area:1 / 1}tvt-thumb:after{content:"";position:absolute;inset:50%;translate:-50% -50%;width:max(var(--thumb-size),var(--min-touch-target));height:max(var(--thumb-size),var(--min-touch-target));border-radius:50%}.thumb-shadow{display:var(--thumb-shadow-display, block);width:100%;height:100%;border-radius:inherit;transform:rotate(calc(-1 * var(--thumb-angle, 0rad)))}.thumb-ring{width:var(--thumb-mark-size, var(--thumb-ring-size));height:var(--thumb-mark-size, var(--thumb-ring-size));border-radius:50%;border:var(--thumb-mark-border-width, var(--thumb-ring-thickness)) solid var(--color-thumb-ring);background-color:var(--thumb-mark-fill, transparent)}@media(hover:hover){:where(html:not([data-drag])) tvt-thumb:hover .thumb-ring,:where(html:not([data-drag])) tvt-touch-control:hover~tvt-thumb .thumb-ring{scale:var(--scale-1)}:where(html:not([data-drag])) tvt-thumb:hover .shadow-main,:where(html:not([data-drag])) tvt-touch-control:hover~tvt-thumb .shadow-main{opacity:0}:where(html:not([data-drag])) tvt-thumb:hover .shadow-interaction:before,:where(html:not([data-drag])) tvt-touch-control:hover~tvt-thumb .shadow-interaction:before{opacity:1}}html[data-drag=live] tvt-thumb .thumb-ring{scale:var(--scale-3)}html[data-drag=live] tvt-thumb .shadow-main{opacity:0}html[data-drag=live] tvt-thumb .shadow-interaction:before{opacity:0}html[data-drag=live] tvt-thumb .shadow-interaction:after{opacity:1}tvt-thumb:before{content:"";position:absolute;inset:50%;translate:-50% -50%;width:var(--focus-ring-diameter);height:var(--focus-ring-diameter);border:var(--focus-ring-thickness) solid var(--color-focus-ring);border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;opacity:0;pointer-events:none}tvt-thumb:focus-visible:before{opacity:1;border-radius:50%;scale:1}@media(prefers-reduced-motion:no-preference){.thumb-ring{transition:scale .1s ease}tvt-thumb:before{border-radius:25%/50%;scale:1.15;transition:opacity .3s ease-in-out,border-radius .3s ease-in-out,scale .15s ease-in-out .15s}}}@layer components{tvt-fullscreen-toggle{grid-area:bottom-right-corner;display:var(--corner-button-display, flex);justify-content:end;align-items:end}tvt-fullscreen-toggle[hidden]{display:none}.fullscreen-icon{position:relative;width:50%;height:50%}.fullscreen-icon span{position:absolute;width:40%;height:40%}.fullscreen-icon span:nth-child(1){top:0;left:0;border-top:var(--thumb-ring-thickness) solid var(--color-text);border-left:var(--thumb-ring-thickness) solid var(--color-text)}.fullscreen-icon span:nth-child(2){top:0;right:0;border-top:var(--thumb-ring-thickness) solid var(--color-text);border-right:var(--thumb-ring-thickness) solid var(--color-text)}.fullscreen-icon span:nth-child(3){bottom:0;left:0;border-bottom:var(--thumb-ring-thickness) solid var(--color-text);border-left:var(--thumb-ring-thickness) solid var(--color-text)}.fullscreen-icon span:nth-child(4){bottom:0;right:0;border-bottom:var(--thumb-ring-thickness) solid var(--color-text);border-right:var(--thumb-ring-thickness) solid var(--color-text)}button[aria-pressed=true] .fullscreen-icon span:nth-child(1){translate:150% 150%}button[aria-pressed=true] .fullscreen-icon span:nth-child(2){translate:-150% 150%}button[aria-pressed=true] .fullscreen-icon span:nth-child(3){translate:150% -150%}button[aria-pressed=true] .fullscreen-icon span:nth-child(4){translate:-150% -150%}@media(prefers-reduced-motion:no-preference){.fullscreen-icon span{transition:translate .3s ease-in-out .3s}}}@layer state{html[data-drag],html[data-drag] *{cursor:grabbing}}