._container_n08zz_1,._grid_n08zz_2,._overlay_n08zz_3{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center}._container_n08zz_1 p{font-size:1.6rem;color:#fff;z-index:2;margin-top:.6rem}._container_n08zz_1{background:var(--bg-gradient)}._grid_n08zz_2{position:absolute;background-size:24px 24px;background-image:var(--grid-img);background-repeat:repeat;opacity:.05;z-index:1}._overlay_n08zz_3{opacity:0;position:absolute;z-index:2;background:radial-gradient(60% 60% at 50% 50%,#f4f4f400,#dcdcdcaa)}.digi-light ._container_n08zz_1 p{color:#adaaa8}@property --axis-rotation{syntax: "<angle>"; initial-value: 0deg; inherits: true;}@property --initial-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@property --root-color{syntax: "<color>"; initial-value: orange; inherits: true;}.main{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;--width: 300px;--root-color: orange;transition:--root-color .5s;background-color:#070a11}@media (min-width: 768px){.main{--width: 420px}}*{-webkit-user-select:none;user-select:none}.dial-base{width:var(--width);height:200px;perspective:1200px;position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;font-size:32px;font-weight:700;--color: oklch(from ghostwhite calc(l*1.15) calc(c*1.5) h);color:var(--color);--container-angle: 85deg;--container-incline: 0deg;animation:appear 1s ease-in-out forwards;will-change:transform;touch-action:manipulation}.dial-container{position:absolute;transform-style:preserve-3d;aspect-ratio:1;width:var(--width);display:flex;align-items:center;justify-content:center;transform:rotateX(var(--container-angle)) rotateY(var(--container-incline)) rotate(var(--axis-rotation)) translateZ(0);will-change:transform;outline:1px solid transparent}.dial-tick,.dial-section{--tick-height: 8px;position:absolute;width:2px;height:calc(var(--tick-height));backface-visibility:hidden;border-radius:10px;color:oklch(from var(--root-color) l calc(c*1.2) h);--bb: var(--axis-rotation);--cos-val: cos(var(--bb) + calc(var(--initial-angle)) - 90deg) ;--mix-value: pow(max(0, cos(var(--bb) + calc(var(--initial-angle)) - 90deg)), 16) ;background-color:color-mix(in oklch,oklch(from currentColor calc(l*1.2) c h) calc(var(--mix-value) * 100%),oklch(from currentColor calc(l/2) calc(c/4) h / 30%) calc((1 - var(--mix-value)) * 100%));will-change:transform}.dial-section{width:8px;height:40px;border-radius:0;--mix-value: pow(max(0, cos(var(--bb) + calc(var(--initial-angle)) - 90deg)), 6) ;opacity:calc((var(--mix-value) + .1) * .75);background-position-x:3px;background:url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjgiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDggOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo=)}.dial-tick--focused{opacity:calc(cos(var(--axis-rotation) + calc(var(--initial-angle) * 10) - 90deg)/2)}.dial-tick--large{--tick-height: 16px;width:2px}@keyframes axis{0%{--axis-rotation: 0deg}to{--axis-rotation: 360deg}}.stack-spinners{width:var(--width);aspect-ratio:1;display:flex;flex-direction:column;position:relative;perspective:1000px;transform-style:preserve-3d}.stack-spinners .dial-base{position:absolute;display:flex;color:#fff}.dial-ring{position:absolute;width:var(--width);aspect-ratio:1;transform-style:preserve-3d;background-size:100%;background-position:center;backface-visibility:hidden;outline:1px solid transparent;border-radius:var(--width);box-shadow:0 0 1px transparent;will-change:transform;--stroke: 3%;--start: 60%;--end: calc(var(--start) + var(--stroke));-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) var(--start),rgba(0,0,0,1) var(--end));mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) var(--start),rgba(0,0,0,1) var(--end));clip-path:circle(51% at 50% 50%);background:oklch(from currentColor calc(l*1.2) c h / 20%);transform:translateZ(-11.1px)}.dial-ring img{width:100%;height:100%;image-rendering:smooth;transform:translateZ(0);filter:blur(1px);backface-visibility:hidden}.dial-ring svg{width:100%;height:100%;position:absolute;transform:translateZ(0);stroke:oklch(from currentColor calc(l*1.2) c h / 20%)}.dial-ui{width:100%;position:absolute;top:.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.dial-ui-text{padding:0;margin:0;font-size:14px;font-weight:400;color:oklch(from var(--root-color) calc(l*1.5) calc(c*.35) h)}.dial-tri{width:10px;height:8px;background-color:oklch(from var(--root-color) calc(l*1.1) c h);clip-path:polygon(50% 100%,0 0,100% 0);filter:blur(.1px)}.dial-label{display:grid;grid-template-columns:100px auto 100px;gap:1px;font-size:28px}.dial-label span{text-shadow:0 1px 1px rgba(0,0,0,.5)}.dial-label span:nth-child(1){text-align:right}.dial-label span:nth-child(2){text-align:center}.dial-label span:nth-child(3){text-align:left;opacity:.3}.dial-texture{width:var(--width);height:50px;mask:linear-gradient(to right,transparent 0%,white 50%,transparent 100%);background:url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjgiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDggOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo=);background-repeat:repeat;position:absolute;bottom:100px;background:#3498db;color:#fff;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-weight:700;filter:url(#arch-warp);margin:50px}.dial-inner-ring{position:absolute;width:28px;height:var(--section-length);--ring-color: #222;background-color:var(--ring-color);box-shadow:0 0 0 1px var(--ring-color);transform:rotateX(var(--section-angle)) translateY(var(--section-length));background-repeat:repeat;transform-origin:bottom center;transform-style:preserve-3d;background-position-x:5px;background-position-y:5px;background-image:url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjgiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDggOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo=)}.dial-ring-container{position:absolute;transform:translateY(100px) rotateY(90deg);transform-style:preserve-3d;--section-length: 50px;--section-angle: 45deg}.dial-container-mk2{width:300px;height:300px;transform-style:preserve-3d;position:relative;display:flex;align-items:center;justify-content:center;transform:rotateX(90deg) translateY(-3rem)}.dial-inner-ring-mk2{--angle: 0;height:2rem;border:1px solid transparent;transform-style:preserve-3d;position:absolute;transform:rotateY(var(--angle)) translateZ(200px);background:url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjgiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDggOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo=);opacity:.5}.ring-controls{width:100%;height:70px;transform:translateY(0);opacity:.7;z-index:30;position:absolute;bottom:0;cursor:grab;display:flex;align-items:center;justify-content:center}.ring-controls:after{position:absolute;content:"";width:100px;height:100px;border-radius:300px;opacity:.05;background:radial-gradient(circle at 50%,oklch(from var(--color) calc(l*1.2) c h / 100%) 10%,oklch(from var(--color) l c h / 50%) 35%,oklch(from var(--color) l c h / 0%) 65%);z-index:10}.ring-controls:active{cursor:grabbing}.dial-divider{width:400px;height:400px;background-color:#555;position:absolute;transform-style:preserve-3d;transform-origin:50% 50%;transform:translateZ(0)}.dial-ui-extra{color:oklch(from var(--root-color) calc(l/.8) calc(c*.1) h);position:absolute;bottom:-1rem;width:200px;font-size:12px;font-weight:400;z-index:20;display:grid;grid-template-columns:1fr 1fr;text-shadow:0 1px 1px rgba(0,0,0,.5);opacity:.5}.dial-ui-extra span{text-align:center}.dial-progress-ring{height:400px;z-index:40;position:absolute;width:var(--width);aspect-ratio:1;transform-style:preserve-3d;background-size:100%;background-position:center;backface-visibility:hidden;outline:1px solid transparent;border-radius:var(--width);will-change:transform;box-shadow:0 0 2px currentColor;filter:blur(3px);--stroke: 2%;--start: 63%;--end: calc(var(--start) + var(--stroke));-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) var(--start),rgba(0,0,0,1) var(--end));mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) var(--start),rgba(0,0,0,1) var(--end));clip-path:circle(51% at 50% 50%);--progress-start: 0%;--progress-end: 30%;background:conic-gradient(var(--root-color) 0%,oklch(from var(--root-color) calc(l*.85) calc(c/2) h / 55%) 5%,oklch(from var(--root-color) calc(l/2) calc(c*.1) h / 15%) 10%,oklch(from var(--root-color) calc(l/2) calc(c*.1) h / 15%) 90%,oklch(from var(--root-color) calc(l*.85) calc(c/2) h / 55%) 95%,var(--root-color) 100%);transform:rotateX(var(--container-angle)) rotate(180deg) translateZ(-10px)}.dial-strip{position:absolute;width:2px;height:400px;color:oklch(from var(--root-color) l calc(c*1.1) h);background-image:linear-gradient(to bottom,oklch(from red l c h / 0%) 30%,currentColor 65%,oklch(from blue l c h / 0%) 78%,transparent 80%);opacity:.3;filter:blur(4px);z-index:0}.dial-strip-wide{position:absolute;width:250px;height:400px;color:oklch(from var(--root-color) l calc(c*1.1) h);background-image:linear-gradient(to bottom,oklch(from red l c h / 10%) 30%,currentColor 55%,oklch(from blue l c h / 10%) 75%);opacity:.1;filter:blur(30px);z-index:0;pointer-events:none}.setup-controls{position:fixed;top:2rem;right:2rem;display:flex;justify-content:flex-end;align-items:center;gap:.5rem;opacity:.2;flex-wrap:wrap;max-width:5rem;transition:opacity .5s ease-in-out}.setup-controls:hover{opacity:1}.color{width:32px;height:32px;background-color:red;border:none;border-radius:.5rem;cursor:pointer}.color--red{background-color:#d3256f}.color--cyan{background-color:#0ff}.color--orange{background-color:orange}.color--gray{background-color:#f8f8ff}@keyframes appear{0%{opacity:0;transform:scale(.5) translateY(50dvh)}to{opacity:1;transform:scale(1) translateY(0)}}.btn-sound{width:50px;height:32px;border:none;cursor:pointer;border-radius:.5rem}.styled-select{padding:.35rem;border-radius:.5rem}body{display:grid;place-items:center;font-family:Istok Web,sans-serif;height:100dvh;width:100dvw;overflow:hidden;margin:0;padding:0}#root{width:100%;height:100%}.digi-light{--gradient-angle: 0deg;--grid-img: url(/tile.png);--bg-gradient: linear-gradient(180deg, #f4f4f4 0%, #dcdcdc 100%);--border-gradient: linear-gradient( 45deg, #ededed 0%, #dedede 25%, #fcfcfc 100% );--inset-gradient: linear-gradient(45deg, #ddd 0%, #eee 50%, #fff 100%);--seconds-bg: linear-gradient( 215.9deg, rgba(207, 207, 207, .3) 14.42%, rgba(222, 222, 222, .8) 24.21%, rgba(247, 247, 247, .5) 86.94% );--seconds-color: #999;--time-gradient-start: #888888;--time-gradient-end: #c38d8d;--tick-opacity: .2}.digi-dark{--gradient-angle: 0deg;--grid-img: url(/tile-white.png);--bg-gradient: linear-gradient(180deg, rgb(14, 19, 19) 0%, rgb(0, 2, 15) 100%);--border-gradient: linear-gradient( 45deg, #4e4e4e 0%, #303030 30%, #505050 100% );--inset-gradient: linear-gradient( 45deg, #393939 0%, #2c2c2c 50%, #303030 100% );--seconds-bg: linear-gradient( 215.9deg, rgba(21, 21, 21, .8) 14.42%, rgba(28, 28, 28, .8) 24.21%, rgba(50, 50, 50, .5) 86.94% );--seconds-color: #555;--time-gradient-start: rgb(78, 78, 78);--time-gradient-end: #805a5a;--tick-opacity: .5}::view-transition-group(root){animation-timing-function:var(--expo-out)}::view-transition-new(root){mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="20" cy="20" r="18" fill="white" filter="url(%23blur)"/></svg>') center / 0 no-repeat;animation:scale 1s}::view-transition-old(root),.digi-dark::view-transition-old(root){animation:none;z-index:-1}.digi-dark::view-transition-new(root){animation:scale 1s}@keyframes scale{to{-webkit-mask-size:200vmax;mask-size:200vmax}}.base{width:90vw;aspect-ratio:1;max-width:500px;display:grid;place-items:center;grid-template-columns:1fr;border-radius:50%;z-index:3}.border{padding:min(3vw,20px);border-radius:50%;width:100%;height:100%;background:var(--border-gradient);box-sizing:border-box;z-index:1;box-shadow:0 0 5px -3px #00000040,0 2rem 3rem 1px #0000001a,inset 0 0 3px -1.5px #00000059;overflow:hidden}.inset{width:100%;height:100%;border-radius:50%;box-sizing:border-box;background:var(--inset-gradient);box-shadow:inset 0 0 4px 1.5px #00000026,inset 0 4px 10px #00000026;position:relative;display:flex;justify-content:center;align-items:center}canvas{width:100%;height:100%;background:transparent;position:absolute;z-index:3}.noise{width:100%;height:100%;background-size:200%;background-image:url(noise.jpg);mix-blend-mode:overlay;opacity:.05;position:relative;z-index:2;grid-area:1/-1;border-radius:50%}.time{font-size:min(18vw,96px);color:#292929;width:100%;font-weight:700;text-align:center;position:absolute;--gradient-angle: 45deg;background:linear-gradient(var(--gradient-angle),var(--time-gradient-start) 30%,var(--time-gradient-end) 94.64%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent}.seconds{color:var(--seconds-color);font-size:min(8vw,28px);position:absolute;text-align:right;transform:translate3d(0,72px,0);display:flex;justify-content:center;align-items:center;width:min(14vw,64px);height:min(14vw,64px);background:var(--seconds-bg);box-shadow:0 1px 1px #ffffff40;border-radius:500px}.red-glow{--glow-degree: 45deg;width:150px;height:150px;opacity:.07;mix-blend-mode:color-burn;border-radius:50%;filter:blur(15px);background:red;position:absolute;transform:rotate(calc(var(--gradient-angle) - 90deg)) translate3d(210px,0,0)}.logo{width:auto;height:1.5rem;position:fixed;left:2rem;top:2rem;z-index:10;color:#656565}