.noct-root{--hue:223;--bg:hsl(var(--hue), 90%, 70%);--fg:hsl(var(--hue), 90%, 10%);--primary:hsl(var(--hue), 90%, 50%);--trans-dur:.6s;--track-l1:22;--track-l2:4}.noct-root[data-checked=true]{--hue:223;--bg:hsl(var(--hue), 40%, 8%);--fg:hsl(var(--hue), 90%, 92%);--track-l1:92;--track-l2:58}.noct-copy{text-shadow:0 2px 16px #000000b3,0 1px 3px #000000e6}.noct-tilt-toggle{-webkit-tap-highlight-color:transparent;perspective:480px;filter:drop-shadow(0 .5em 1em #00000073);margin:0 auto;position:relative}.noct-tilt-toggle__input,.noct-tilt-toggle__input:before,.noct-tilt-toggle__input:after,.noct-tilt-toggle__input-ball{animation:.6s ease-in-out forwards noct-tiltOffA;display:block}.noct-tilt-toggle__input,.noct-tilt-toggle__input:before,.noct-tilt-toggle__input:after{border-radius:1em}.noct-tilt-toggle__input{background-image:linear-gradient(90deg, hsla(var(--hue), 90%, 40%, 0) 20%, hsla(var(--hue), 90%, 40%, .5) 30% 70%, hsl(var(--hue), 90%, 40%) 80%), linear-gradient(hsl(var(--hue), 40%, calc(var(--track-l1) * 1%)) 33%, hsl(var(--hue), 40%, calc(var(--track-l2) * 1%)) 67%);filter:grayscale();appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:#0000;width:4em;height:2em;padding:0;font-size:1.25rem;position:relative}.noct-tilt-toggle__input:before,.noct-tilt-toggle__input:after{content:"";position:absolute}.noct-tilt-toggle__input:before{background-color:var(--primary);box-shadow:0 0 max(1px, .05em) max(1px, .05em) var(--primary);width:calc(100% - .25em);height:calc(100% - .25em);animation-name:noct-tiltOffB;top:.125em;left:.125em}.noct-tilt-toggle__input:after{background-color:hsla(var(--hue), 90%, 10%, .7);filter:blur(.15em);transform-origin:1em;z-index:-1;width:100%;height:100%;animation-name:noct-shadowOff;top:.25em;left:.25em}.noct-tilt-toggle__input-ball{background-color:#fff;background-image:radial-gradient(circle at 35% 30%, #fff, hsl(var(--hue), 20%, 88%) 70%);box-shadow:-.05em -.05em .1em hsl(var(--hue), 10%, 80%) inset, -.3em -.3em .3em hsl(var(--hue), 10%, 60%) inset, .18em .18em .1em hsla(var(--hue), 10%, 10%, .7);pointer-events:none;border-radius:50%;width:2em;height:2em;animation-name:noct-rollOff;position:absolute;top:0;left:calc(50% - 1em);transform:translate3d(-1em,0,.4em)}.noct-tilt-toggle__input[aria-checked=true]{animation-name:noct-tiltOnA}.noct-tilt-toggle__input[aria-checked=true]:before{animation-name:noct-tiltOnB}.noct-tilt-toggle__input[aria-checked=true]:after{transform-origin:calc(100% - 1em);animation-name:noct-shadowOn}.noct-tilt-toggle__input[aria-checked=true] .noct-tilt-toggle__input-ball{background-color:hsl(var(--hue), 30%, 14%);background-image:radial-gradient(circle at 35% 30%, hsl(var(--hue), 25%, 28%), hsl(var(--hue), 40%, 6%) 70%);animation-name:noct-rollOn;transform:translate3d(1em,0,.4em);box-shadow:inset -.05em -.05em .1em #ffffff26,inset -.3em -.3em .3em #ffffff14,.18em .18em .15em #000000d9}@keyframes noct-shadowOn{0%{transform:skewY(0)}50%{transform:skewY(-14deg)}to{transform:skewY(0)}}@keyframes noct-shadowOff{0%{transform:skewY(0)}50%{transform:skewY(14deg)}to{transform:skewY(0)}}@keyframes noct-rollOn{0%{transform:rotateY(0)translate3d(-1em,0,.4em)rotateY(0)}50%{transform:rotateY(35deg)translate3d(1em,0,.4em)rotateY(-35deg)}to{transform:rotateY(0)translate3d(1em,0,.4em)rotateY(0)}}@keyframes noct-rollOff{0%{transform:rotateY(0)translate3d(1em,0,.4em)rotateY(0)}50%{transform:rotateY(-35deg)translate3d(-1em,0,.4em)rotateY(35deg)}to{transform:rotateY(0)translate3d(-1em,0,.4em)rotateY(0)}}@keyframes noct-tiltOnA{0%{transform:rotateY(0)}50%{transform:rotateY(28deg)}to{transform:rotateY(0)}}@keyframes noct-tiltOffA{0%{transform:rotateY(0)}50%{transform:rotateY(-28deg)}to{transform:rotateY(0)}}@keyframes noct-tiltOnB{0%{transform:translate(0,0)}50%{transform:translate(.08em)}to{transform:translate(0,0)}}@keyframes noct-tiltOffB{0%{transform:translate(0,0)}50%{transform:translate(-.08em)}to{transform:translate(0,0)}}