@charset "UTF-8";:root{--t: .8s;--ease: cubic-bezier(.25, .46, .45, .94)}@property --p{syntax: "<number>"; initial-value: 0; inherits: true;}@property --v{syntax: "<number>"; initial-value: 0; inherits: true;}.alphabet-page{flex:1;display:flex;flex-direction:column;min-height:100vh;overflow:hidden}.alphabet-wrapper{width:100%;height:100vh;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.alphabet-container{position:relative;width:100%;max-width:1200px;height:100%;min-height:600px;margin-top:-5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;color:#f1f5f9;font:1em poppins,sans-serif;counter-reset:k calc(1 + var(--k)) n var(--n);--p: var(--k);--abs-p: abs(var(--k) - var(--p));--end: clamp(0, var(--abs-p) - 1, 1);--dir: calc((1 - 2 * var(--end)) * sign(var(--k) - var(--p)));--fwd: calc(.5 * (1 + var(--dir)));--v: var(--k);--abs-v: abs(var(--v) - var(--p));--prg: calc(var(--abs-v) / (1 - var(--end) + var(--end) * (var(--n) - 1)));transition:--p 0s var(--t),--v var(--t)}.alphabet-header{text-align:center;z-index:100;margin:30px 0 2%}.alphabet-title{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#818cf8,#6a7fe0,#3d60eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:10px;text-shadow:0 4px 20px rgba(129,140,248,.3)}.content-area{position:relative;margin-top:2rem;display:flex;flex-direction:column;align-items:center;justify-content:start;flex:1;width:100%}.image-container{position:relative;width:600px;height:400px;perspective:1200px;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center}.alphabet-item{--abs-top: abs(var(--k) - var(--i));--not-top: min(1, var(--abs-top));--top: calc(1 - var(--not-top));--val-mov: ((1 - var(--fwd)) * var(--p) + var(--fwd) * var(--k) - var(--i));--abs-mov: abs(var(--val-mov));--not-mov: min(1, var(--abs-mov));--mov: calc(1 - var(--not-mov));--sin: sin(var(--prg) * .5turn);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:mod(calc(var(--n) - 1 + var(--i) - var(--k)),var(--n));transition:z-index var(--t) cubic-bezier(1,-.9,0,1.9)}.alphabet-item:not(.active) .text-content{display:none}.item-image{width:600px;height:400px;object-fit:cover;object-position:center;border-radius:1rem;border:2px solid light-dark(transparent,rgba(129,140,248,.4));backdrop-filter:blur(10px);translate:calc(-100% * var(--mov) * sqrt(var(--sin)));rotate:calc((1 - var(--sin)) * var(--a));will-change:transform,opacity}.text-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;width:100%;max-width:400px;translate:0 0;opacity:var(--top);transition:opacity calc(.5 * var(--t)) calc(var(--top) * .5 * var(--t));position:absolute;bottom:-120px}.letter{font-size:3rem;font-weight:900;text-transform:uppercase;text-shadow:0 4px 20px rgba(129,140,248,.3);background:linear-gradient(145deg,#3b4ad1,#6b7bff,#0c33f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.item-desc{font-size:1.5rem;text-transform:uppercase;color:light-dark(#000000,#ffffff);font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.5);line-height:1.2}.nav-buttons{display:flex;gap:5rem;justify-content:center;align-items:center;z-index:200;margin-top:2rem;width:100%;position:relative}.nav-button{position:relative;border:none;width:3.5rem;height:3.5rem;margin-top:6%;border-radius:50%;background:linear-gradient(135deg,#818cf833,#a5b4fc1a);color:#4f5ff0;font-size:1rem;font-weight:900;transition:all .3s ease-out;cursor:pointer;border:2px solid rgba(129,140,248,.3);backdrop-filter:blur(10px);box-shadow:0 4px 15px #818cf833,inset 0 1px #ffffff1a}.nav-button:before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border:solid 3px currentColor;border-width:0 3px 3px 0;transform:translate(-50%,-50%) rotate(135deg);transition:transform .3s ease-out}.nav-button.next-button:before{transform:translate(-50%,-50%) rotate(-45deg)}.nav-button:hover,.nav-button:focus{background:linear-gradient(135deg,#818cf866,#a5b4fc33);color:#6f84eb;border-color:#818cf899;box-shadow:0 6px 25px #818cf866,inset 0 1px #fff3;transform:translateY(-2px) scale(1.05)}.nav-button:active{transform:translateY(0) scale(.95)}.keyboard-hint{position:absolute;bottom:-2.5rem;left:50%;transform:translate(-50%);color:light-dark(#000000,#ffffff);font-size:.875rem;text-align:center;z-index:1000;padding:.5rem 1rem;background:transparent;border-radius:20px;width:auto;max-width:90%;white-space:nowrap}.sr-only{position:absolute;width:5px;height:10px;padding:10px;margin:-10px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@supports not (scale: Abs(-2)){.alphabet-container{--abs-p: max(var(--k) - var(--p), var(--p) - var(--k));--abs-v: max(var(--v) - var(--p), var(--p) - var(--v))}.alphabet-item{--abs-top: max(var(--k) - var(--i), var(--i) - var(--k));--abs-mov: max(var(--val-mov), -1 * var(--val-mov))}}@supports not (scale: Sign(-2)){.alphabet-container{--dir: clamp(-1, (var(--k) - var(--p)) * 100000, 1)}}@media (max-width: 1200px){.alphabet-wrapper{padding:10rem 1rem;justify-content:flex-start}.alphabet-title{font-size:2rem}.image-container{width:400px;height:380px}.item-image{width:360px;height:260px}.text-content{bottom:-60px}.nav-buttons{gap:3rem;margin-top:1.5rem}.nav-button{width:3rem;height:3rem}}@media (max-width: 768px){.alphabet-wrapper{padding:1.5rem 1rem;justify-content:flex-start}.alphabet-title{font-size:1.75rem}.image-container{width:300px;height:360px}.item-image{width:260px;height:240px}.letter{font-size:2.5rem}.item-desc{font-size:1.25rem}.text-content{bottom:-50px}.nav-buttons{gap:2rem;margin-top:1rem}.nav-button{width:2.8rem;height:2.8rem}.nav-button:before{width:10px;height:10px;border-width:0 2px 2px 0}.keyboard-hint{font-size:.75rem;white-space:normal;padding:.5rem;bottom:10px}}@media (max-width: 480px){.alphabet-wrapper{padding:1rem .5rem;justify-content:flex-start}.alphabet-container{height:600px;gap:0rem}.alphabet-title{font-size:1.5rem}.image-container{width:280px;height:340px}.item-image{width:240px;height:200px}.letter{font-size:2rem}.item-desc{font-size:1.1rem}.text-content{bottom:-40px}.nav-buttons{gap:1.5rem;margin-top:.5rem}.nav-button{width:2.5rem;height:2.5rem}.nav-button:before{width:10px;height:10px;border-width:0 2px 2px 0}.keyboard-hint{font-size:.65rem;padding:.4rem .8rem;bottom:5px}}