:root{--deep-blue: #0f172a;--navy-blue: #1e293b;--royal-blue: #1d4ed8;--sky-blue: #7dd3fc;--teal-accent: #2dd4bf;--text-primary: #f8fafc;--text-secondary: #94a3b8}.main-header{position:sticky;top:0;border-radius:.75rem;z-index:100;background:light-dark(white,var(--navy-blue));padding-top:1rem;padding-bottom:1rem;box-shadow:0 4px 10px #0003}.main-header.scrolled-header{padding-top:2rem;padding-bottom:.5rem}.language-letters-container{max-width:1400px;margin:1px auto;border-radius:1.5rem;position:relative;&:before{content:"";position:absolute;inset:0;pointer-events:none}}.toggle-container{display:flex;justify-content:center;gap:2rem;position:relative;z-index:2;flex-wrap:wrap;.dropdown-wrapper{position:relative;min-width:240px;margin:.5rem}.dropdown-label{display:block;margin-bottom:.8rem;font-size:1.1rem;background-image:linear-gradient(135deg,#69ff97 10%,#00e4ff);background-clip:border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase;letter-spacing:1px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.1);transition:color .3s ease;&.active{background-image:linear-gradient(135deg,#72edf2 10%,#5151e5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}& select{width:100%;padding:.7rem 1.39rem .7rem .89rem;font-size:1.3rem;text-transform:capitalize;font-variant:small-caps;letter-spacing:2px;border:2px solid rgba(125,211,252,.3);border-radius:.75rem;color:light-dark(black,white);cursor:pointer;appearance:base-select;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;&::picker-icon{color:#806df9;transition:.4s rotate}&:open::picker-icon{rotate:180deg}&:hover{border-color:#7dd3fc;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}&:focus{outline:none;border-color:#2dd4bf;box-shadow:0 0 0 3px #2dd4bf4d}& option{padding:.5rem 1.25rem .5rem .75rem;font-variant:small-caps;text-transform:capitalize;letter-spacing:2px;background:light-dark(white,#1e293b);color:light-dark(black,white);border-bottom:1px solid rgba(125,211,252,.1);&:checked{background:#1d4ed880;font-weight:600}&:nth-of-type(odd){background-color:#b7c4dc80}&::checkmark{order:1;margin-left:auto;content:"✔";color:#806df9}}}}::picker(select){appearance:base-select;border:none}.toggle-button{border:1px solid rgba(125,211,252,.3);border-radius:.75rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:light-dark(black,white);font-size:1.5rem;margin:0 .5rem;align-self:center;position:relative;margin-top:40px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;&:hover{background:light-dark(var(--navy-blue),var(--text-primary));transform:scale(1.1);border-color:#7dd3fc;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}&:active{transform:scale(.95)}&.toggled{transform:rotate(180deg);background:linear-gradient(to right,var(--sky-blue),var(--teal-accent));color:var(--navy-blue)}&.toggled svg{fill:var(--navy-blue)}}.toggle-button.swapping{transform:rotate(180deg);transition:transform .3s ease}.toggle-button i{font-size:1.5rem;transition:transform .2s ease}.toggle-button:hover i{transform:scale(1.1)}.toggle-button:active i{transform:scale(.9)}.language-letters-grid{display:grid;gap:1rem;padding:1rem;position:relative;z-index:1;grid-template-columns:repeat(5,1fr)}.group-heading{color:light-dark(#0e6157,var(--teal-accent));font-size:1.5rem;padding:1rem 0;letter-spacing:.1em;border-bottom:2px solid var(--royal-blue);margin-bottom:1rem;grid-column:1 / -1}.language-letters-separator{grid-column:1 / -1;height:1px;background:linear-gradient(to right,transparent,rgba(125,211,252,.3),transparent);margin:1.5rem 0}.language-letter-card{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;height:15rem;width:100%;padding:1rem .5rem;border-radius:.75rem;background:light-dark(white,var(--navy-blue));border:1px solid rgba(125,211,252,.1);transition:transform .3s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;&:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#7dd3fc1a,#1d4ed80d);opacity:0;transition:opacity .3s ease}&:hover{transform:translateY(-3px);box-shadow:0 8px 16px #0000004d;border-color:#7dd3fc4d;&:before{opacity:1}}.vowel{border-top:2px solid var(--royal-blue)}.consonant{border-top:2px solid var(--teal-accent)}.language-letter-top,.language-letter-bottom{width:100%;height:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,color .3s ease,order .01s ease}.language-letter-top{font-size:71px;font-weight:600;background:linear-gradient(-45deg,#ffa63d,#ff3d77,#338aff,#3cf0c5);background-size:600%;animation:anime 16s linear infinite;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.language-letter-bottom{font-size:50px;font-weight:500;background-image:radial-gradient(circle farthest-corner at 10% 20%,var(--sky-blue) 1%,var(--teal-accent) 90%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:.9}&.reverse{.language-letter-top{order:2;font-size:1.75rem;color:var(--text-secondary);opacity:.9}.language-letter-bottom{order:1;font-size:2.25rem;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}}}@keyframes anime{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.english-text{font-family:sans-serif;letter-spacing:.5px}.transliteration{font-family:sans-serif;font-size:2.2rem}@media (max-width: 1024px){.language-letters-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 768px){.language-letters-grid{grid-template-columns:repeat(3,1fr)}.toggle-container{gap:1rem;& select{width:100%;font-size:1rem;padding:.8rem 2rem .8rem 1rem}}}@media (max-width: 640px){.main-header{position:relative}.toggle-container{flex-direction:column;gap:1rem;align-items:center;.dropdown-wrapper{width:80%;min-width:auto}& select{font-size:1rem;padding:.8rem 2rem .8rem 1rem}}}@media (max-width: 480px){.language-letters-grid{grid-template-columns:repeat(2,1fr)}}.letter-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:1000;justify-content:center;align-items:center}.outer{background:conic-gradient(from var(--gradient-angle),#1ba8e9,#1619b9,#800f86,#ff057c,#800f86,#1619b9,#1ba8e9);animation:rotation 20s linear infinite;border-radius:1rem;padding:.5rem;width:650px;aspect-ratio:1/1;max-width:90%;position:relative;box-shadow:0 10px 25px #00000080;justify-content:center;align-items:center}.outer:after{content:"";position:absolute;inset:0;background:conic-gradient(from var(--gradient-angle),#1ba8e9,#1619b9,#800f86,#ff057c,#800f86,#1619b9,#1ba8e9);animation:rotation 20s linear infinite;filter:blur(4rem);z-index:-1}.middle{background:light-dark(white,var(--deep-blue));border-radius:1rem;padding:.5rem;aspect-ratio:1/1;max-width:100%;position:relative;display:flex;justify-content:center;align-items:center}.popup-content{background:conic-gradient(from var(--gradient-angle),#1ba8e9,#1619b9,#800f86,#ff057c,#800f86,#1619b9,#1ba8e9);animation:rotation 20s linear infinite;border-radius:1rem;aspect-ratio:1/1;width:650px;max-width:100%;display:flex;justify-content:center;align-items:center}.close-button{position:absolute;top:10px;right:15px;background:none;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;transition:color .3s ease}.popup-letter{font-size:25rem;font-weight:700;text-align:center;color:light-dark(white,var(--deep-blue));text-shadow:0 4px 8px rgba(0,0,0,.5)}@property --gradient-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes rotation{0%{--gradient-angle: 0deg}to{--gradient-angle: 360deg}}