html,body{margin:0;padding:0}body{min-height:100vh;background:#fff;--bgc: #e7e1d8;background:var(--bgc);font-family:Aboreto,cursive;height:100dvh;overflow:hidden}body:has(.dark){--bgc: #202126}body:has(.trans.dark){--bgc: transparent;background:#202126}body:has(.trans){--bgc: transparent;background:#e7e1d8}.scene{width:100vw;height:100vh;position:relative;overflow:hidden;cursor:pointer}.progress{position:fixed;bottom:1rem;right:1rem;width:1rem;height:1rem;transform:rotate(-90deg);display:none}.progress circle{fill:none;stroke:#202126;stroke-width:4;stroke-dasharray:283;stroke-dashoffset:-283;animation:fill var(--timer, 1s) linear infinite}:has(.dark) .progress circle{stroke:#fff}@keyframes fill{to{stroke-dashoffset:0}}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:1}}.inner{width:75vmin;aspect-ratio:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.inner:after{content:"";position:absolute;inset:.15rem;background:repeating-radial-gradient(#202126 0 1px,transparent 1px 2px,#e7e1d8 2px 3px);border-radius:50%;mix-blend-mode:overlay;display:none;-webkit-mask-image:radial-gradient(transparent 10%,#000 50%);mask-image:radial-gradient(transparent 10%,#000 50%)}.notches.inner:after{display:block}.notches.dark.trans.inner:after{background:repeating-radial-gradient(#202126 0 1px,transparent 1px 2px,#202126 2px 3px)}.notches.trans.inner:after{background:repeating-radial-gradient(#e7e1d8 0 1px,transparent 1px 2px,#e7e1d8 2px 3px)}.ring{position:absolute;top:50%;left:50%;width:calc(100% - 50% * var(--iR));aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--s));border-radius:50%;background:conic-gradient(var(--g))}.lighten .ring{mix-blend-mode:lighten}.darken .ring{mix-blend-mode:darken}.difference .ring{mix-blend-mode:difference}.doge.dark .ring{mix-blend-mode:color-dodge}.doge .ring{mix-blend-mode:color-burn}.soft.dark .ring{mix-blend-mode:soft-light}.luminosity .ring{mix-blend-mode:luminosity}.ring:nth-child(1){transform:translate(-50%,-50%) scale(1);width:200vmax}.rndRing .ring{transform:translate(-50%,-50%) scale(calc(var(--s) + (-.25 + var(--rnd) / 4)))}.rndRing .ring:nth-child(1){transform:translate(-50%,-50%) scale(1)}.invert-scale .ring{transform:translate(-50%,-50%) scale(calc(var(--s) - var(--iR) / 2))}.invert-scale .ring:nth-child(1){transform:translate(-50%,-50%) scale(1)}.show-rings .ring{box-shadow:0 0 0 1px #000}.show-rings .ring:nth-child(1){box-shadow:none}.notches.show-rings .ring{box-shadow:0 0 0 1px #000}.show-rings.dark .ring{box-shadow:0 0 0 1px #fff}.show-rings.dark .ring:nth-child(1){box-shadow:none}.notches.show-rings.dark .ring{box-shadow:0 0 0 1px #fff}.blur .ring:nth-child(1){box-shadow:none;filter:blur(40px)}@keyframes move{to{transform:translate(-50%,-50%) scale(1) rotate(360deg)}}.labels{position:absolute;inset:-5%}.labels__label{position:absolute;height:50%;width:5%;top:50%;left:50%;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc(var(--i) * 360deg))}.labels__label:after{content:"";position:absolute;width:1px;background:#000;left:50%;top:5%;bottom:90%;transform:translate(-50%)}.show-rings .labels__label:after{bottom:45.9%}.dark .labels__label:after{background:#fff}.info{position:absolute;bottom:0;left:0;padding:1rem;color:#202126;font-size:.8rem;max-width:30ch;transform:translateY(calc(100% - 3rem));transition:.3s transform cubic-bezier(.3,.7,0,1)}.info a{color:inherit;text-decoration:none}.info i,.info .beam{font-family:Work Sans;line-height:1.6;font-weight:300;opacity:0;transform:translateY(5rem);max-height:12em;overflow:hidden;transition:.3s transform cubic-bezier(.3,.7,0,1) 50ms,.2s opacity linear .1s,.3s max-height cubic-bezier(.3,.7,0,1),.3s margin cubic-bezier(.3,.7,0,1);display:block;font-style:normal;margin-top:1em}.info i span{font-family:Aboreto,cursive}.info .beam{display:flex}.info:hover,.info:focus-within{transform:translateY(0)}.info:hover i,.info:hover .beam,.info:focus-within i,.info:focus-within .beam{opacity:1;transform:translateY(0)}.info strong{font-size:1rem}.info.is-live{transform:translateY(0)}.info.is-live .beam{opacity:1;transform:translateY(0)}.info.is-live:not(:hover,:focus-within) i{max-height:0;margin-top:0;opacity:0}:has(.dark) .info{color:#fff}[data-fullscreen]{position:absolute;right:1.05rem;bottom:1.05rem;width:.82rem;aspect-ratio:1;padding:0;border:none;box-shadow:inset 0 0 0 1px #202126;background:transparent}[data-fullscreen]:after{content:"";position:absolute;inset:-1px;transform:scale(0);transition:.2s transform cubic-bezier(.3,.7,0,1);box-shadow:0 0 0 1px #202126}[data-fullscreen]:hover:after{transform:scale(1)}body:has(.dark) [data-fullscreen]{box-shadow:inset 0 0 0 1px #e7e1d8}body:has(.dark) [data-fullscreen]:after{box-shadow:0 0 0 1px #e7e1d8}.beam{display:flex;align-items:baseline;gap:.75rem;font-size:.75rem}.beam input{font:inherit;letter-spacing:.12em;width:22ch;color:inherit;background:transparent;border:0;border-bottom:1px solid currentColor;padding:.2rem 0;outline:none;opacity:.5;transition:.2s opacity}.beam input::placeholder{color:inherit}.beam input:focus,.beam input:not(:placeholder-shown){opacity:1}.beam span{opacity:.6}.beam button{align-self:center;display:grid;color:inherit;background:none;border:0;padding:.25rem 0;cursor:pointer;transition:.2s transform cubic-bezier(.3,.7,0,1)}.beam svg{grid-area:1 / 1;height:.6rem;fill:none;stroke:currentColor;stroke-width:1px;overflow:visible}.beam svg path{vector-effect:non-scaling-stroke}.beam__connect{width:1.2rem}.beam__disconnect,.is-live .beam__connect{display:none}.is-live .beam__disconnect{display:block;width:.6rem}.beam button:hover{transform:translate(2px)}.is-live .beam button:hover{transform:rotate(90deg)}