/* Logical properties do most of the work; only direction-sensitive glyphs are mirrored here. */
[dir="rtl"] .flip-rtl{transform:scaleX(-1)}
[dir="rtl"] .ring svg{direction:ltr}
[dir="rtl"] .hero-text{text-align:right}
[dir="rtl"] input[type="range"]{direction:rtl}
[dir="rtl"] .timer,[dir="rtl"] .letter,[dir="rtl"] .qnav .dot{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] body,[dir="rtl"] button,[dir="rtl"] input,[dir="rtl"] select{font-family:var(--hw-font-fa),var(--hw-font)}
[dir="rtl"] .brand-name{direction:ltr}
/* a browser's page translation (Chrome/Edge) marks the page with html.translated-rtl|ltr */
html.translated-rtl body{direction:rtl}
html.translated-ltr body{direction:ltr}