:root{--bg-dark:#1e1e24;--bg-light:#262633;--text-100:#ffffff;--text-60:rgba(255, 255, 255, 0.6);--short:#ab759b;--long:#674079;--dip:#3c3b82;--unvoiced:#49815d;--voiced:#1f7a54;--radius:10px;--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.12);--shadow-lg:0 6px 18px rgba(0, 0, 0, 0.18);--duration:0.5s;--text-color:#fff;--short-color:#ab759b;--long-color:#674079;--dip-color:#44437c;--unvoiced-color:#49815d;--voiced-color:#204c32;--back-color:#333;--background-color:#333;--card-border-radius:8px;--transition-duration:0.6s;--box-shadow-default:0 4px 6px rgba(0, 0, 0, 0.1);--box-shadow-hover:0 8px 15px rgba(0, 0, 0, 0.2)}.ipa-card,.ipa-card__back,.ipa-card__front{width:100%;border-radius:var(--card-border-radius)}*{box-sizing:border-box;margin:0;padding:0}body{padding:1rem;font-family:Arial,sans-serif;line-height:1.6}.ipa-chart-wrapper{max-width:1200px;margin:0 auto;padding:1rem}.ipa-chart{display:flex;flex-direction:column;gap:1rem;color:var(--text-100)}.ipa-vowels{display:flex;flex-wrap:wrap;gap:9.3rem}.ipa-consonants,.ipa-vowels--diphthong,.ipa-vowels--single{display:grid;gap:.5rem;grid-template-rows:repeat(3,1fr)}.ipa-vowels--single{grid-template-columns:repeat(4,minmax(120px,1fr))}.ipa-vowels--diphthong{grid-template-columns:repeat(2,minmax(120px,1fr))}.ipa-consonants{grid-template-columns:repeat(9,minmax(120px,1fr))}.ipa-card{position:relative;padding-top:100%;background-color:var(--short-color);overflow:hidden;box-shadow:var(--box-shadow-default);cursor:pointer;perspective:1000px;transition:box-shadow var(--transition-duration),transform var(--transition-duration)}.ipa-card:hover{box-shadow:var(--box-shadow-hover)}.ipa-card__inner{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--transition-duration)}.ipa-card:hover .ipa-card__inner,.ipa-card__back{transform:rotateY(180deg)}.ipa-card__back,.ipa-card__front{position:absolute;display:flex;justify-content:center;align-items:center;height:100%;padding:1rem;box-sizing:border-box;backface-visibility:hidden}.ipa-card__front{font-size:2rem;color:var(--text-color);background-color:inherit}.ipa-card__back{flex-direction:column;text-align:center;color:#fff;background-color:#50355a}.ipa-card__phoneme{font-size:2.2rem;font-weight:700}.ipa-card__back .ipa-card__phoneme,.ipa-card__word{font-size:1.2rem}.ipa-card__word{margin-bottom:.1rem}.ipa-card__play-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;font-size:.8rem;color:#fff;border-radius:10%;transition:background-color .3s}.icon{margin-right:.5rem;font-size:1rem}.ipa-card--long{background-color:var(--long-color)}.ipa-card--short{background-color:var(--short-color)}.ipa-card--diphthong{background-color:var(--dip-color)}.ipa-card--unvoiced{background-color:var(--unvoiced-color)}.ipa-card--voiced{background-color:var(--voiced-color)}.hidden{visibility:hidden;opacity:0;transition:opacity .5s}.ipa-chart__header{margin-bottom:1.5rem;text-align:center}.ipa-chart__filter{padding:.5rem 1rem;font-size:1rem;text-transform:uppercase;color:var(--text-color);background-color:#444;border-radius:8px;cursor:pointer}.ipa-chart__filters:hover{opacity:.8}.ipa-chart__filters.active{font-weight:700;border-bottom:2px solid #fff}.ipa-chart__heading{margin-bottom:1rem;font-size:2rem}.ipa-chart__filters{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}.ipa-chart__filter--short{background-color:var(--short-color)}.ipa-chart__filter--long{background-color:var(--long-color)}.ipa-chart__filter--dip{background-color:var(--dip-color)}.ipa-chart__filter--unvoiced{background-color:var(--unvoiced-color)}.ipa-chart__filter--voiced{background-color:var(--voiced-color)}