@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{@property --shadow-depth-1{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --shadow-depth-2{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --shadow-depth-3{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --depth{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --cut-out-edge{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --press-duration{syntax: "<time>"; inherits: true; initial-value: 0s;}@property --shadow-key-offset{syntax: "<number>"; inherits: true; initial-value: 0;}@property --shadow-key-blur{syntax: "<number>"; inherits: true; initial-value: 0;}@property --shadow-sky-offset{syntax: "<number>"; inherits: true; initial-value: 0;}@property --shadow-sky-blur{syntax: "<number>"; inherits: true; initial-value: 0;}@property --shadow-sky-spread{syntax: "<number>"; inherits: true; initial-value: 0;}@property --shadow-key-color{syntax: "<color>"; inherits: true; initial-value: transparent;}@property --shadow-sky-color{syntax: "<color>"; inherits: true; initial-value: transparent;}@property --shadow-edge-color{syntax: "<color>"; inherits: true; initial-value: transparent;}: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;--press-easing: linear( 0, .045, .154, .292, .438, .576, .698, .799, .879, .939, .981, 1.009, 1.026, 1.034, 1.037, 1.035, 1.031, 1.026, 1.021, 1.016, 1.011, 1.007, 1.004, 1.002, 1 );--press-duration: .35s;--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));--shadow-key-offset: .78;--shadow-key-blur: 1.1;--shadow-key-color: hsl(var(--color-shadow-hsl) / .52);--shadow-sky-offset: 2;--shadow-sky-blur: 3.6;--shadow-sky-spread: -1;--shadow-sky-color: hsl(var(--color-shadow-hsl) / .16);--shadow-edge-color: hsl(var(--color-shadow-hsl) / .15)}}@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 base{.cut-out{--depth: var(--shadow-depth-2);--cut-out-edge: var(--shadow-depth-1);box-shadow:inset 0 calc(-.15 * var(--cut-out-edge)) calc(.15 * var(--cut-out-edge)) calc(.15 * var(--cut-out-edge)) var(--shadow-edge-color),inset 0 calc(var(--depth) * var(--shadow-key-offset)) calc(var(--depth) * var(--shadow-key-blur)) var(--shadow-key-color),inset 0 calc(var(--depth) * var(--shadow-sky-offset)) calc(var(--depth) * var(--shadow-sky-blur)) calc(var(--depth) * var(--shadow-sky-spread)) var(--shadow-sky-color)}.raised,.clock-face:after{--depth: var(--shadow-depth-2);box-shadow:0 calc(-.15 * var(--depth)) calc(.15 * var(--depth)) calc(.15 * var(--depth)) var(--shadow-edge-color),0 calc(var(--depth) * var(--shadow-key-offset)) calc(var(--depth) * var(--shadow-key-blur)) var(--shadow-key-color),0 calc(var(--depth) * var(--shadow-sky-offset)) calc(var(--depth) * var(--shadow-sky-blur)) calc(var(--depth) * var(--shadow-sky-spread)) var(--shadow-sky-color)}}@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);--cut-out-edge: var(--shadow-depth-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%}}@layer components{.pressable{cursor:pointer}@media(hover:hover){:where(html:not([data-drag])) .pressable:hover{--depth: var(--shadow-depth-1)}:where(html:not([data-drag])) .pressable:hover .pressable-content{scale:var(--scale-1)}}.pressable:active{--depth: var(--shadow-depth-3)}.pressable:active .pressable-content{scale:var(--scale-3)}@media(prefers-reduced-motion:no-preference){.pressable{transition:--depth var(--press-duration) var(--press-easing)}.pressable-content{transition:scale var(--press-duration) var(--press-easing)}}.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 var(--press-duration) var(--press-easing)}:where(html:not([data-drag])) .track-label:hover .track-label-text{scale:1.2}}}}@layer components{@property --thumb-angle{syntax: "<angle>"; inherits: true; initial-value: 0rad;}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:translate(calc(-1 * var(--thumb-position) * sin(var(--thumb-angle, 0rad))),calc(var(--thumb-position) * cos(var(--thumb-angle, 0rad))))}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}.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 .thumb-shadow,:where(html:not([data-drag])) tvt-touch-control:hover~tvt-thumb .thumb-shadow{--depth: var(--shadow-depth-1)}}html[data-drag=live] tvt-thumb .thumb-ring{scale:var(--scale-3)}html[data-drag=live] tvt-thumb .thumb-shadow{--depth: var(--shadow-depth-3)}tvt-thumb:before{content:"";position:absolute;inset:50%;translate:-50% -50%;rotate:var(--thumb-angle, 0rad);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-shadow{transition:--depth var(--press-duration) var(--press-easing)}.thumb-ring{transition:scale var(--press-duration) var(--press-easing)}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}}