:root{--anim-duration: 10s;--color-circle: #00ffe1;--play-state: running;--circle-size: 2rem;--cols: 3}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{font-size:10px}body{display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;background-color:#202020;transform-style:preserve-3d;perspective:100rem;overflow:hidden;cursor:grab}body:active{cursor:grabbing}body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 45%, var(--color-circle), transparent 55%);opacity:.06;animation:bg-pulse 6s ease-in-out infinite;animation-play-state:var(--play-state);pointer-events:none;z-index:0;transition:background .4s}.cube{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;perspective:inherit}.cube__wrapper{position:absolute;transform-style:preserve-3d;perspective:inherit;transform-origin:center center;animation:rotate__row var(--anim-duration) cubic-bezier(0.77, 0, 0.18, 1) infinite;animation-play-state:var(--play-state);animation-delay:calc(var(--i)*.1s)}.cube__row{display:grid;grid-template-columns:repeat(var(--cols), 1fr);transform-style:preserve-3d;perspective:inherit}.cube__block{display:flex;width:calc(var(--circle-size)*2.5);height:calc(var(--circle-size)*2.5);transform-style:preserve-3d;perspective:inherit;justify-content:center;align-items:center}.cube__block__circle{position:absolute;display:inline-block;width:var(--circle-size);height:var(--circle-size);border-radius:50%;background-color:var(--color-circle);box-shadow:0 0 8px var(--color-circle),0 0 20px var(--color-circle);transform-style:preserve-3d;perspective:inherit;transition:background-color .3s,box-shadow .3s}.cube__block__circle--back{animation:rotate__circle__back var(--anim-duration) cubic-bezier(0.77, 0, 0.18, 1) infinite;animation-play-state:var(--play-state)}.cube__block__circle--front{animation:rotate__circle__front var(--anim-duration) cubic-bezier(0.77, 0, 0.18, 1) infinite;animation-play-state:var(--play-state)}.controls{position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid hsla(0,0%,100%,.07);cursor:default}.controls__row{display:flex;align-items:center;gap:1.2rem;padding:1rem 2rem;flex-wrap:wrap}.controls__brand{display:flex;flex-direction:column;line-height:1.3;margin-right:.4rem}.controls__brand a{color:hsla(0,0%,100%,.35);text-decoration:none;font-size:1rem;transition:color .2s}.controls__brand a:hover{color:var(--color-circle)}.controls__brand strong{color:#fff;font-size:1.4rem;font-weight:600;letter-spacing:.04em}.ctrl-group{display:flex;gap:.4rem;align-items:center}.ctrl-group--right{margin-left:auto;gap:.8rem}.btn{padding:.5rem 1.2rem;border:1px solid hsla(0,0%,100%,.14);background:hsla(0,0%,100%,.05);color:hsla(0,0%,100%,.65);border-radius:5px;cursor:pointer;font-size:1.2rem;font-family:inherit;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}.btn:hover{background:hsla(0,0%,100%,.11);color:#fff}.btn--primary{border-color:var(--color-circle);color:var(--color-circle);transition:background .15s,color .15s,border-color .15s}.btn--primary:hover{background:var(--color-circle);color:#202020}.btn--icon{padding:.5rem .8rem;font-size:1.3rem;line-height:1}.speed-btn--active,.size-btn--active{background:hsla(0,0%,100%,.14);color:#fff;border-color:hsla(0,0%,100%,.3)}.swatch{width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid rgba(0,0,0,0);background-color:var(--swatch-color);box-shadow:0 0 8px var(--swatch-color);cursor:pointer;transition:transform .15s,border-color .15s;padding:0}.swatch:hover{transform:scale(1.2)}.swatch--active{border-color:#fff;transform:scale(1.2)}.slider-wrap{display:flex;align-items:center;gap:.6rem;color:hsla(0,0%,100%,.5);font-size:1.1rem;cursor:default}.size-slider{-webkit-appearance:none;appearance:none;width:8rem;height:3px;background:hsla(0,0%,100%,.15);border-radius:2px;outline:none;cursor:pointer}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-circle);box-shadow:0 0 6px var(--color-circle);cursor:pointer;transition:background .2s,box-shadow .2s}.size-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-circle);box-shadow:0 0 6px var(--color-circle);border:none;cursor:pointer}.help-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);animation:fade-in .15s ease}.help-modal.hidden{display:none}.help-modal__box{background:#181818;border:1px solid hsla(0,0%,100%,.1);border-radius:10px;padding:2.8rem 3.2rem 2.4rem;min-width:28rem;position:relative}.help-modal__box h2{color:#fff;font-size:1.6rem;font-weight:600;margin-bottom:1.8rem;letter-spacing:.03em}.help-modal__box table{border-collapse:collapse;width:100%}.help-modal__box tr+tr td{padding-top:1rem}.help-modal__box td{color:hsla(0,0%,100%,.7);font-size:1.3rem;padding-right:2rem;vertical-align:middle}.help-modal__box td:first-child{white-space:nowrap}.help-modal__close{position:absolute;top:1.2rem;right:1.2rem;background:none;border:none;color:hsla(0,0%,100%,.4);font-size:1.6rem;cursor:pointer;line-height:1;padding:.2rem .5rem;border-radius:4px;transition:color .15s}.help-modal__close:hover{color:#fff}kbd{display:inline-block;padding:.15rem .5rem;border:1px solid hsla(0,0%,100%,.2);border-radius:4px;background:hsla(0,0%,100%,.06);font-size:1.15rem;font-family:monospace;color:var(--color-circle);margin:0 .1rem}@keyframes bg-pulse{0%,100%{opacity:.06;transform:scale(1)}50%{opacity:.1;transform:scale(1.25)}}@keyframes rotate__row{0%{transform:rotateY(0) rotateZ(0)}16.6666666667%{transform:rotateY(-90deg) rotateZ(0)}33.3333333334%{transform:rotateY(-90deg) rotateZ(90deg)}50.0000000001%{transform:rotateY(-180deg) rotateZ(90deg)}66.6666666668%{transform:rotateY(-180deg) rotateZ(180deg)}83.3333333335%{transform:rotateY(-360deg) rotateZ(180deg)}100%{transform:rotateY(-360deg) rotateZ(360deg)}}@keyframes rotate__circle__back{0%{transform:translateZ(calc(var(--circle-size) * -2.5)) rotateY(0) rotateX(0)}16.6666666667%{transform:translateZ(calc(var(--circle-size) * -2.5)) rotateY(90deg) rotateX(0)}33.3333333334%{transform:translateZ(calc(var(--circle-size) * -2.5)) rotateY(90deg) rotateX(90deg)}50.0000000001%{transform:translateZ(calc(var(--circle-size) * -2.5)) rotateY(90deg) rotateX(90deg)}66.6666666668%{transform:translateZ(calc(var(--circle-size) * -2.5)) rotateY(180deg) rotateX(180deg)}83.3333333335%{transform:translateZ(calc(var(--circle-size) * -2.5)) rotateY(360deg) rotateX(180deg)}100%{transform:translateZ(calc(var(--circle-size) * -2.5)) rotateY(360deg) rotateX(360deg)}}@keyframes rotate__circle__front{0%{transform:translateZ(calc(var(--circle-size) * 2.5)) rotateY(0) rotateX(0)}16.6666666667%{transform:translateZ(calc(var(--circle-size) * 2.5)) rotateY(90deg) rotateX(0)}33.3333333334%{transform:translateZ(calc(var(--circle-size) * 2.5)) rotateY(90deg) rotateX(90deg)}50.0000000001%{transform:translateZ(calc(var(--circle-size) * 2.5)) rotateY(90deg) rotateX(90deg)}66.6666666668%{transform:translateZ(calc(var(--circle-size) * 2.5)) rotateY(180deg) rotateX(180deg)}83.3333333335%{transform:translateZ(calc(var(--circle-size) * 2.5)) rotateY(360deg) rotateX(180deg)}100%{transform:translateZ(calc(var(--circle-size) * 2.5)) rotateY(360deg) rotateX(360deg)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}