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}a{position:absolute;bottom:0;left:0;padding:1rem;color:#202126;font-size:.8rem;max-width:30ch;color:inherit;text-decoration:none;transform:translateY(calc(100% - 3rem));transition:.3s transform cubic-bezier(.3,.7,0,1)}a i{font-family:Work Sans;line-height:1.6;font-weight:300;opacity:0;transform:translateY(5rem);transition:.3s transform cubic-bezier(.3,.7,0,1) 50ms,.2s opacity linear .1s;display:block;font-style:normal;margin-top:1em}a span{font-family:Aboreto,cursive}a:hover{transform:translateY(0)}a:hover i{opacity:1;transform:translateY(0)}a strong{font-size:1rem}:has(.dark) a{color:#fff}button{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}button: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}button:hover:after{transform:scale(1)}body:has(.dark) button{box-shadow:inset 0 0 0 1px #e7e1d8}body:has(.dark) button:after{box-shadow:0 0 0 1px #e7e1d8}