/* Keep the translated UI flexible without altering source-language exercises. */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .centered,
html[dir="rtl"] .pricing-section .section-head,
html[dir="rtl"] .final-cta,
html[dir="rtl"] .topbar,
html[dir="rtl"] .flags-heading { text-align: center; }
html[dir="rtl"] .brand,
html[dir="rtl"] .yt-practice-brand,
html[dir="rtl"] .price,
html[dir="rtl"] .window-lang,
html[dir="rtl"] .brand-dot,
html[dir="rtl"] .marquee-track { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .flag-chip { direction: rtl; }
html[dir="rtl"] .hero-actions svg,
html[dir="rtl"] .final-cta .button svg,
html[dir="rtl"] .pricing-grid .button svg { transform: scaleX(-1); }
html[dir="rtl"] .dialog-close { right: auto; left: 14px; }
html[dir="rtl"] .yt-practice-header { text-align: right; }
html[dir="rtl"] .scene-info,
html[dir="rtl"] .catalog-language-caption,
html[dir="rtl"] .languages button { text-align: start; }
[dir="auto"], .scene-flashcard-original, .scene-flashcard-translation,
.yt-practice-caption, .yt-practice-translation { unicode-bidi: isolate; }
html[data-site-language] .button { white-space: normal; }
html[data-site-language] .header-nav a { text-align: center; }
html[data-site-language] .catalog-language-caption { min-width: 0; }
html[data-site-language] .catalog-language strong { overflow-wrap: anywhere; }
html[data-site-language] .languages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-site-language] .languages button,
html[data-site-language] .languages button > span { min-width: 0; }
html[data-site-language] .languages strong,
html[data-site-language] .languages small { overflow-wrap: anywhere; }
html[data-site-language="ja"] h1,html[data-site-language="zh"] h1,
html[data-site-language="ko"] h1 { line-height: 1.25; word-break: normal; }
html[data-site-language="ar"] { font-family: "DM Sans", "Segoe UI", Tahoma, sans-serif; }
@media(max-width:640px) {
  html[data-site-language] .yt-practice-actions { flex-wrap: wrap; }
  html[data-site-language] .header-nav { gap: 8px; }
  html[data-site-language] .hero h1 { overflow-wrap: anywhere; }
  html[data-site-language] .languages button { padding: 12px 8px; gap: 7px; }
}
@media(min-width:700px) { html[data-site-language] .languages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(min-width:1040px) { html[data-site-language] .languages { grid-template-columns: repeat(5, minmax(0, 1fr)); } }