:root{--vowel-gradient:linear-gradient(135deg,gold,#ff8c00);--consonant-gradient:linear-gradient(135deg,#00d2ff,#3a7bd5);--special-gradient:linear-gradient(135deg,#e040fb,#651fff);--glass-bg:hsla(0,0%,100%,.1);--glass-border:hsla(0,0%,100%,.2)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(circle at center,#1e2a38 0,#0f172a 100%);color:#fff;min-height:100vh}.main-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:40px 20px}h1{font-weight:300;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 15px hsla(0,0%,100%,.3);margin-bottom:5px;font-size:2.5rem}.subtitle{color:#94a3b8;margin-bottom:40px;font-size:.9rem}.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));max-width:900px;width:100%;grid-gap:12px;gap:12px;margin-bottom:50px}.element{height:100px;border-radius:12px;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--glass-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;box-shadow:0 4px 30px rgba(0,0,0,.1)}.element:hover{transform:translateY(-10px) scale(1.1);z-index:10;border-color:hsla(0,0%,100%,.5);box-shadow:0 0 20px hsla(0,0%,100%,.2)}.vowel:hover{background:var(--vowel-gradient);box-shadow:0 0 30px rgba(255,215,0,.4)}.consonant:hover{background:var(--consonant-gradient);box-shadow:0 0 30px rgba(0,210,255,.4)}.special:hover{background:var(--special-gradient);box-shadow:0 0 30px rgba(224,64,251,.4)}.symbol{font-size:2.2rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.label{font-size:.7rem;opacity:.8;margin-top:5px;font-weight:600}.tooltip{visibility:hidden;width:150px;background:rgba(15,23,42,.95);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;text-align:center;padding:12px;border-radius:8px;border:1px solid hsla(0,0%,100%,.1);position:absolute;z-index:20;bottom:120%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .3s;pointer-events:none;font-size:.85rem}.element:hover .tooltip{visibility:visible;opacity:1}.section-header{grid-column:1/-1;padding:10px;font-size:1.1rem;color:#38bdf8;border-left:4px solid #38bdf8;background:rgba(56,189,248,.1);margin:20px 0 10px;border-radius:0 4px 4px 0}