:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;max-width:100svw;overflow-x:hidden}@media screen and (min-width:1280px){#app{max-width:1280px}}@media screen and (min-width:1440px){#app{max-width:1280px}}@media screen and (min-width:1920px){#app{max-width:1440px}}h1{font-size:3.2em;line-height:1.1}#app{width:100%;margin:0 auto}.anim-container{width:200px;height:200px;background-color:#21ee7d;margin:25px;overflow:hidden}.anim-container.four-squares{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);background-color:#cc5f20;overflow:visible}.anim-container.rounded{border-radius:100px}.anim-container.flex{display:flex;justify-content:center}.anim-container.flex-both{display:flex;justify-content:center;align-items:center}.anim-container.back-ease{position:relative;left:40px;justify-content:flex-start;align-items:center;background:transparent;overflow:visible}.anim-container svg{width:100%;height:100%}.anim-container svg path{stroke:#d0e9fc;stroke-width:10px;stroke-linecap:round;fill:transparent}.back-ease-bg{position:absolute;border-radius:100px;transform-origin:50% 50%;width:200px;height:200px;background:#da7d26}.ball{position:relative;border-radius:25px;transform-origin:50% 50%;width:50px;height:50px;background:#9efc9b}.staggered-ball{position:relative;border-radius:10px;transform-origin:50% 50%;width:20px;height:20px;background:#c6fa9c}.square{position:relative;transform-origin:50% 50%;width:100px;height:100px}.square.geometry-one{background:#a02521}.ball.bounce-ease{background:#9efc9b}.full-screen-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100svh}@media screen and (min-width:928px){.full-screen-card{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100svh}}.full-screen-card.variant-1{flex-direction:column;width:100%;max-width:100%}.full-screen-card>div{max-width:55%}.full-screen-card>div p{text-wrap:pretty}.full-screen-card>div.title-wrap{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}.title{text-align:center;font-size:48px;color:#c2f3c0}h3.title{font-size:36px;color:#c2f3c0}.title span{opacity:0}@media screen and (min-width:928px){.title{text-align:left}}.header-char{display:inline-flex;transform:translateY(-20px)}.header-char.space{width:10px}.install-cmd{background:#7c1212;border-radius:4px;padding:.25rem .5rem}.anim-container.ripple-container{background:transparent}.ripple-container code{position:relative;font-size:10px;white-space:1rem}.bg-ripple{position:absolute;background:#21ee7d;width:200px;height:200px;border-radius:50%}.ripple{position:absolute;border:4px solid #6bf5a9;width:160px;height:160px;border-radius:50%}.anim-title{z-index:99999}.easings-explained{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 4rem}.easings-explained .ease-diagram{position:relative;width:200px;height:200px;margin:0 auto;border:1px solid #f3eec0;background:#1a1919;border-radius:6px}.easings-explained .ease-diagram-row{position:relative;width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1;gap:2rem}@media screen and (min-width:928px){.easings-explained .ease-diagram-row{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1;gap:2rem}}.ease-diagram .ease-item{width:25px;height:25px;background:#c2f3c0;border-radius:12.5px;transform-origin:50% 5 0%;position:absolute;left:-12.5px;top:-12.5px}.ease-diagram:after{position:absolute;content:"Time 0-1s";top:102%;right:0;font-size:10px;font-family:monospace}.ease-diagram:before{position:absolute;content:"Progress";left:0;top:50%;transform:translate(-110%,-50%);font-size:10px;font-family:monospace}.ease-diagram-row .ease-name{text-align:center;font-weight:700;margin-top:2rem}svg line{stroke:#fff;stroke-width:1px}