@import"https://fonts.googleapis.com/css2?family=Poppins:wght@200;700&display=swap";:root{--anim-duration: 18s;--play-state: running;--span-angle: 12deg}*,*::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:"Poppins",system-ui,sans-serif;background:#1a1a1a;color:#fff;text-transform:uppercase;transform-style:preserve-3d;overflow:hidden;user-select:none}.box{position:relative;transform-style:preserve-3d;transform:perspective(1000px) rotateY(0deg) rotateX(0deg)}.text-container{position:relative;width:38em;height:8em;transform-style:preserve-3d;transform:perspective(1000px) rotateX(0deg);transform-origin:center center;animation:cylinder-spin var(--anim-duration) linear infinite;animation-play-state:var(--play-state)}.text-container span{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:center center;transform-style:preserve-3d;transform:perspective(1000px) rotateX(calc(var(--i) * var(--span-angle))) translateZ(13em)}.text-container span i{position:absolute;top:0;left:0;width:100%;height:100%;font-size:5em;font-weight:700;font-style:normal;letter-spacing:.01em;padding:10px 0;line-height:1.1em}.controls{position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.65);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;text-transform:none;letter-spacing:0;transition:color .2s}.controls__brand a:hover{color:hsla(0,0%,100%,.7)}.controls__brand strong{color:#fff;font-size:1.4rem;font-weight:600;letter-spacing:.04em;text-transform:none}.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;text-transform:none;letter-spacing:0;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}.btn:hover{background:hsla(0,0%,100%,.11);color:#fff}.btn--primary{border-color:hsla(0,0%,100%,.5);color:#fff}.btn--primary:hover{background:hsla(0,0%,100%,.15)}.btn--active{background:hsla(0,0%,100%,.14);color:#fff;border-color:hsla(0,0%,100%,.3)}.btn--icon{padding:.5rem .8rem;font-size:1.3rem;line-height:1}.speed-btn--active{background:hsla(0,0%,100%,.14);color:#fff;border-color:hsla(0,0%,100%,.3)}.text-input-wrap{display:flex;align-items:center;cursor:text}.text-input{background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.14);border-radius:5px;color:hsla(0,0%,100%,.75);font-family:inherit;font-size:1.2rem;text-transform:none;letter-spacing:0;padding:.48rem .8rem;width:22rem;outline:none;transition:border-color .15s,background .15s}.text-input::placeholder{color:hsla(0,0%,100%,.25)}.text-input:focus{border-color:hsla(0,0%,100%,.35);background:hsla(0,0%,100%,.09);color:#fff}.slider-wrap{display:flex;align-items:center;gap:.6rem;color:hsla(0,0%,100%,.5);font-size:1.1rem;text-transform:none;letter-spacing:0}.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:#fff;box-shadow:0 0 5px hsla(0,0%,100%,.5);cursor:pointer}.size-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}.slider-badge{color:hsla(0,0%,100%,.6);font-size:1.1rem;min-width:2.2rem}.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);cursor:default;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;text-transform:none;letter-spacing:.03em;margin-bottom:1.8rem}.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;text-transform:none;letter-spacing:0}.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;text-transform:none;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:hsla(0,0%,100%,.9);margin:0 .1rem;text-transform:none}@keyframes cylinder-spin{from{transform:perspective(1000px) rotateX(0deg)}to{transform:perspective(1000px) rotateX(-360deg)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}