*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--s: 1;--hue: 220;--intensity: 50;--si-bg: calc(var(--intensity) * .24%);--si-low: calc(var(--intensity) * .6%);--si-mid: calc(var(--intensity) * .8%);--si-med: calc(var(--intensity) * 1%);--si-high: calc(var(--intensity) * 1.1%);--si-max: calc(var(--intensity) * 1.2%)}html,body,#root{width:100%;height:100%}body{background:hsl(var(--hue),var(--si-bg),6%);font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.clock-shell{width:100vw;height:100vh;background:hsl(var(--hue),var(--si-bg),6%);position:relative;overflow:hidden;transition:background .3s ease}.date-label{position:absolute;top:calc(var(--s) * 30px);left:calc(var(--s) * 48px);font-size:calc(var(--s) * 11px);font-weight:400;letter-spacing:calc(var(--s) * 3px);text-transform:uppercase;color:hsla(var(--hue),var(--si-mid),82%,.22);-webkit-user-select:none;user-select:none}.digital-wrap{position:absolute;top:50%;left:calc(var(--s) * 58px);transform:translateY(-50%) scale(1);transform-origin:top left;opacity:1;transition:top .6s cubic-bezier(.65,0,.35,1),left .6s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),opacity .5s cubic-bezier(.65,0,.35,1)}.digital-wrap.in-corner{top:calc(var(--s) * 28px);left:calc(100% - var(--s) * 182px);transform:translateY(0) scale(.25);opacity:.28;cursor:pointer}.digital-display{display:flex;align-items:baseline;gap:calc(var(--s) * 16px);animation:mode-fade-in .4s ease both}.digital-time{font-size:calc(var(--s) * 108px);font-weight:100;letter-spacing:calc(var(--s) * -3px);line-height:1;color:hsla(var(--hue),var(--si-max),92%,.88);-webkit-user-select:none;user-select:none}.digital-seconds{font-size:calc(var(--s) * 26px);font-weight:200;letter-spacing:calc(var(--s) * 5px);color:hsla(var(--hue),var(--si-med),82%,.22);-webkit-user-select:none;user-select:none;padding-bottom:calc(var(--s) * 12px)}.analog-clock{position:absolute;width:calc(var(--s) * 90px);height:calc(var(--s) * 90px);border-radius:50%;top:calc(var(--s) * 28px);left:calc(100% - var(--s) * 182px);opacity:.28;border:1px solid hsla(var(--hue),var(--si-mid),80%,.16);background:hsla(var(--hue),var(--si-low),70%,.03);transform:none;cursor:pointer;transition:left .6s cubic-bezier(.65,0,.35,1),top .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),height .6s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),opacity .5s cubic-bezier(.65,0,.35,1),border-color .5s ease}.analog-clock.expanded{width:calc(var(--s) * 270px);height:calc(var(--s) * 270px);top:50%;left:calc(var(--s) * 58px);transform:translateY(-50%);opacity:1;border-color:hsla(var(--hue),var(--si-mid),80%,.26);cursor:pointer}.accent-line{position:absolute;width:1px;height:calc(var(--s) * 180px);bottom:calc(var(--s) * 36px);left:calc(var(--s) * 48px);background:linear-gradient(180deg,transparent 0%,hsla(var(--hue),var(--si-mid),78%,.1) 35%,hsla(var(--hue),var(--si-mid),78%,.05) 65%,transparent 100%);pointer-events:none}.right-panel{position:absolute;top:0;right:0;width:calc(var(--s) * 72px);height:100%;display:flex;flex-direction:column;align-items:center;border-left:1px solid hsla(var(--hue),var(--si-low),75%,.08)}.mode-items{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:calc(var(--s) * 22px)}.mode-nav-item{font-size:calc(var(--s) * 10px);font-weight:400;letter-spacing:calc(var(--s) * 2px);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);color:hsla(var(--hue),var(--si-mid),82%,.2);cursor:default;-webkit-user-select:none;user-select:none}.mode-nav-item.active{color:hsla(var(--hue),var(--si-high),88%,.72)}.mode-nav-item.clickable{cursor:pointer}.mode-nav-item.clickable:hover{color:hsla(var(--hue),var(--si-mid),82%,.45)}.panel-divider{width:calc(var(--s) * 24px);height:1px;background:hsla(var(--hue),var(--si-low),75%,.08);margin-bottom:calc(var(--s) * 16px)}.settings-toggles{display:flex;flex-direction:column;align-items:center;gap:calc(var(--s) * 10px);padding-bottom:calc(var(--s) * 28px)}.toggle-item{all:unset;font-size:calc(var(--s) * 10px);font-weight:400;letter-spacing:calc(var(--s) * 1.5px);text-transform:uppercase;color:hsla(var(--hue),var(--si-mid),82%,.2);cursor:pointer;-webkit-user-select:none;user-select:none;padding:calc(var(--s) * 4px) calc(var(--s) * 6px);border-radius:calc(var(--s) * 4px);transition:color .2s ease,background .2s ease}.toggle-item.on{color:hsla(var(--hue),var(--si-high),88%,.75);background:hsla(var(--hue),var(--si-mid),75%,.07)}.toggle-item:hover{color:hsla(var(--hue),var(--si-high),88%,.5)}.color-swatch{all:unset;width:calc(var(--s) * 14px);height:calc(var(--s) * 14px);border-radius:50%;background:hsl(var(--hue),var(--si-high),52%);cursor:pointer;margin-bottom:calc(var(--s) * 22px);opacity:.6;transition:opacity .2s ease,transform .2s ease;flex-shrink:0}.color-swatch:hover{opacity:1;transform:scale(1.15)}.wheel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10}.wheel-popover{position:absolute;right:calc(var(--s) * 80px);bottom:calc(var(--s) * 14px);z-index:11;background:hsla(var(--hue),var(--si-bg),9%,.92);border:1px solid hsla(var(--hue),var(--si-low),70%,.12);border-radius:calc(var(--s) * 12px);padding:calc(var(--s) * 14px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.color-wheel{position:relative;width:calc(var(--s) * 140px);height:calc(var(--s) * 140px);border-radius:50%;background:conic-gradient(#d14747,#d18c47,#d1d147,#8cd147,#47d147,#47d18c,#47d1d1,#478cd1,#4747d1,#8c47d1,#d147d1,#d1478c,#d14747);cursor:crosshair}.color-wheel:after{content:"";position:absolute;top:28%;right:28%;bottom:28%;left:28%;border-radius:50%;background:hsl(var(--hue),var(--si-bg),9%)}.color-wheel-dot{position:absolute;width:calc(var(--s) * 8px);height:calc(var(--s) * 8px);border-radius:50%;background:#fff;border:1.5px solid rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none;z-index:1}.timer-display-editable{cursor:pointer;position:relative}.timer-display-editable:after{content:"";position:absolute;left:0;bottom:calc(var(--s) * -6px);width:100%;height:1px;background:hsla(var(--hue),var(--si-mid),70%,.22)}@keyframes picker-rise{0%{opacity:0;transform:translateY(calc(var(--s) * 12px))}to{opacity:1;transform:translateY(0)}}.timer-picker{position:absolute;top:calc(50% + var(--s) * 62px);left:calc(var(--s) * 58px);width:calc(var(--s) * 230px);background:hsla(var(--hue),var(--si-bg),9%,.94);border:1px solid hsla(var(--hue),var(--si-low),70%,.12);border-radius:calc(var(--s) * 10px);padding:calc(var(--s) * 12px) calc(var(--s) * 14px) calc(var(--s) * 10px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20;animation:picker-rise .28s cubic-bezier(.34,1.2,.64,1) both}.picker-section-label{font-size:calc(var(--s) * 9px);font-weight:400;letter-spacing:calc(var(--s) * 2.5px);text-transform:uppercase;color:hsla(var(--hue),var(--si-mid),75%,.35);margin-bottom:calc(var(--s) * 8px);-webkit-user-select:none;user-select:none}.picker-drums{display:flex;align-items:center;gap:0}.picker-sep{font-size:calc(var(--s) * 26px);font-weight:100;color:hsla(var(--hue),var(--si-mid),80%,.3);line-height:1;-webkit-user-select:none;user-select:none;padding:0 calc(var(--s) * 2px)}.drum-wrap{flex:1;position:relative;height:calc(var(--s) * 108px);overflow:hidden;cursor:ns-resize}.drum-scroll{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.drum-scroll::-webkit-scrollbar{display:none}.drum-pad{height:calc(var(--s) * 36px);flex-shrink:0}.drum-item{height:calc(var(--s) * 36px);display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-size:calc(var(--s) * 22px);font-weight:100;letter-spacing:calc(var(--s) * 1px);color:hsla(var(--hue),var(--si-mid),80%,.28);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .12s ease}.drum-item.selected{color:hsla(var(--hue),var(--si-max),95%,.92);font-weight:200}.drum-fade-top,.drum-fade-bottom{position:absolute;left:0;right:0;height:calc(var(--s) * 36px);pointer-events:none;z-index:1}.drum-fade-top{top:0;background:linear-gradient(to bottom,hsl(var(--hue),var(--si-bg),8%) 10%,transparent 100%)}.drum-fade-bottom{bottom:0;background:linear-gradient(to top,hsl(var(--hue),var(--si-bg),8%) 10%,transparent 100%)}.drum-selector{position:absolute;top:calc(var(--s) * 36px);height:calc(var(--s) * 36px);left:0;right:0;pointer-events:none;border-top:1px solid hsla(var(--hue),var(--si-mid),70%,.2);border-bottom:1px solid hsla(var(--hue),var(--si-mid),70%,.2);z-index:2}.picker-divider{height:1px;background:hsla(var(--hue),var(--si-low),70%,.1);margin:calc(var(--s) * 10px) 0}.picker-sound-row{display:flex;justify-content:space-between;align-items:center;font-size:calc(var(--s) * 10px);letter-spacing:calc(var(--s) * 1.5px);text-transform:uppercase;color:hsla(var(--hue),var(--si-mid),80%,.35);padding:calc(var(--s) * 2px) 0;cursor:default;-webkit-user-select:none;user-select:none}.picker-chevron{font-size:calc(var(--s) * 12px);opacity:.5}.picker-done-btn{all:unset;display:block;width:100%;text-align:center;font-size:calc(var(--s) * 10px);font-weight:400;letter-spacing:calc(var(--s) * 2.5px);text-transform:uppercase;color:hsla(var(--hue),var(--si-high),88%,.7);cursor:pointer;padding:calc(var(--s) * 4px) 0;transition:color .2s ease}.picker-done-btn:hover{color:hsla(var(--hue),var(--si-max),95%,.9)}@keyframes sw-pop-in{0%{opacity:0;transform:translateY(calc(var(--s) * 10px))}to{opacity:1;transform:translateY(0)}}@keyframes mode-fade-in{0%{opacity:0}to{opacity:1}}.sw-controls{position:absolute;bottom:calc(var(--s) * 72px);left:calc(var(--s) * 58px);display:flex;gap:calc(var(--s) * 12px);animation:sw-pop-in .35s cubic-bezier(.34,1.2,.64,1) both}.sw-btn{all:unset;font-size:calc(var(--s) * 10px);font-weight:400;letter-spacing:calc(var(--s) * 2.5px);text-transform:uppercase;padding:calc(var(--s) * 5px) calc(var(--s) * 14px);border-radius:calc(var(--s) * 3px);cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .2s ease,background .2s ease}.sw-btn.start{color:#78be82d9;background:#50965a1a;border:1px solid rgba(80,150,90,.2)}.sw-btn.stop{color:#c86e6ed9;background:#a046461a;border:1px solid rgba(160,70,70,.2)}.sw-btn.start:hover{background:#50965a2e}.sw-btn.stop:hover{background:#a046462e}.sw-btn.dim{opacity:.25;pointer-events:none}.clock-tick-major{stroke:hsla(var(--hue),var(--si-mid),82%,.32)}.clock-tick-minor{stroke:hsla(var(--hue),var(--si-mid),82%,.16)}.clock-numeral{fill:hsla(var(--hue),var(--si-mid),82%,.38)}.clock-hand-hour{stroke:hsla(var(--hue),var(--si-high),90%,.85)}.clock-hand-minute{stroke:hsla(var(--hue),var(--si-med),86%,.62)}.clock-hand-second{stroke:hsla(var(--hue),var(--si-mid),80%,.42)}.clock-center-dot{fill:hsla(var(--hue),var(--si-high),90%,.85)}.intensity-row{margin-top:calc(var(--s) * 12px);display:flex;align-items:center;justify-content:center}.intensity-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:calc(var(--s) * 3px);border-radius:calc(var(--s) * 2px);background:hsla(var(--hue),var(--si-mid),70%,.2);outline:none;cursor:pointer}.intensity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(var(--s) * 12px);height:calc(var(--s) * 12px);border-radius:50%;background:hsl(var(--hue),var(--si-high),65%);cursor:pointer;transition:transform .15s ease}.intensity-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.intensity-slider::-moz-range-thumb{width:calc(var(--s) * 12px);height:calc(var(--s) * 12px);border-radius:50%;border:none;background:hsl(var(--hue),var(--si-high),65%);cursor:pointer}