*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,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;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:#0c0c0c}.container{max-width:1200px;margin:0 auto;padding:20px;width:100%}.bg-green-50{background-color:#f0fdf4}.bg-green-100{background-color:#dcfce7}.m-0{margin:0}.flex{display:flex}.min-h-screen{min-height:100vh}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.text-[#ffba03]{color:#ffba03}.outline{outline:1px solid}.outline-1{outline-width:1px}.outline-purple-400{outline-color:#9f7aea}.cards-list{display:grid;gap:8px}@media screen and (min-width: 1024px){.cards-list{grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:20px;min-height:100vh}.cards-list>div{grid-column:1/2}.cards-list>:nth-child(2n){margin-top:250px;left:initial;grid-column:2/3}}.anim-container{outline:1px solid red;position:relative;display:grid;justify-items:center;overflow-x:clip;row-gap:20px}@media screen and (min-width: 1024px){.anim-container{justify-items:initial;grid-template-rows:minmax(auto,100vh) auto minmax(auto,100vh)}}.anim-container__list{grid-row:2/3;counter-reset:card}.anim-container__list .big-card{counter-increment:card}.anim-container__list .big-card h3{display:flex;align-items:flex-start}.anim-container__list .big-card h3:before{content:counter(card);flex-shrink:0;margin-right:10px;background:linear-gradient(101deg,#ffba03 15.82%,#e9d98f 51.56%,#ffba03 85.23%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.anim-container__title{z-index:0;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#ffba03;font-weight:700;font-size:52px;line-height:1.3;grid-area:title}@media screen and (min-width: 1024px){.anim-container__pinned-content{padding-bottom:32px;height:100vh;position:absolute;grid-column:1/3;width:100%;display:grid;grid-template-areas:".." "title" "pagination";grid-template-rows:auto 1fr auto;gap:12px}}@media screen and (min-width: 1439px){.anim-container__pinned-content{padding-inline:32px;grid-template-areas:"pagination title ...";grid-template-columns:auto 1fr auto;grid-template-rows:1fr}.anim-container__pagination{display:flex;flex-direction:column}}.anim-container__pagination{display:none}@media screen and (min-width: 1024px){.anim-container__pagination{justify-content:center;align-items:center;gap:12px;grid-area:pagination;display:flex}}.anim-container__pagination-item{display:flex;aspect-ratio:1;line-height:1;align-items:center;justify-content:center;color:#e1c68080;text-align:center;border-radius:8px;border:1px solid rgba(225,198,128,.5);padding:5px 7px;font-size:18px;font-weight:700;min-width:36px;transition:background .3s,color .3s}.anim-container__pagination-item:hover{background:#ffba03;color:#000}.anim-container__pagination-item.active{border:1px solid #ffba03;background:#ffba03;color:#000}.big-card{display:inline-flex;flex-direction:column;gap:20px;padding:40px;aspect-ratio:1;width:100%;max-width:400px;border-radius:16px;background:var(--gradient-back, linear-gradient(180deg, #1c1b1b 0%, rgba(28, 27, 27, 0) 100%));position:relative}.big-card:after{-webkit-user-select:none;user-select:none;pointer-events:none;content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(180deg,#fff,#0c0c0c) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}@media screen and (min-width: 1024px){.big-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}.gradient-title{background:var( --gradient-heading, linear-gradient(101deg, #ffba03 15.82%, #e9d98f 51.56%, #ffba03 85.23%) );background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
