/* Language switch, same shape as on makemotion.studio, in the editor's dark colours (src/i18n.js). */
.lang { position: relative; }
.lang-btn { color: var(--dim, #9a9aa3); cursor: pointer; background: transparent; border: 0; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 7px; font: 600 13px var(--sans, Inter, sans-serif); transition: background 0.15s, color 0.15s; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.07); color: var(--text, #f2f2f4); }
.lang .flag { width: 20px; height: 20px; border-radius: 50%; flex: none; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.lang .chev { width: 12px; height: 12px; transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; z-index: 70; top: calc(100% + 8px); right: 0; min-width: 196px; padding: 6px; border-radius: 14px; background: rgba(26, 26, 30, 0.98); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--line2, #2e2e35), 0 18px 40px -10px rgba(0, 0, 0, 0.6); transform-origin: 100% 0; animation: langIn 0.2s cubic-bezier(.2, .8, .2, 1); }
.lang-menu button { width: 100%; height: 40px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text, #f2f2f4); font: 400 14.5px var(--sans, Inter, sans-serif); text-align: left; cursor: pointer; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.lang-menu .tick { width: 14px; height: 14px; margin-left: auto; color: var(--violet, #8b6cff); opacity: 0; }
.lang-menu button[aria-checked="true"] .tick { opacity: 1; }
@keyframes langIn { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } .lang .chev { transition: none; } }