/* ===================================================================== RSIG ARABIC EDITION STYLES (/assets/ar.css?v=). Linked by the /ar/ pages only, after site.css (and learn.css, scroller.css). GENERATED by work.nosync/arabic/build/build_ar.py from ar.base.css (the hand-written rules) and the mirror layer it computes from the current stylesheets: edit the source, never assets/ar.css. Every selector is scoped to html[dir="rtl"] or html[lang="ar"], so nothing here can reach an English page (the owner's rule: the English site as it was). Plan: work.nosync/arabic/inv/css-rtl.md. Order: 1 the Arabic type 2 the islands (drawings never mirror) 3 numbers, codes, addresses [the generated mirror layer] 4 components 5 motion and the page turn 6 the CSS words (generated at the end) ===================================================================== */ /* ---------- 1. THE ARABIC TYPE. The system Arabic faces (no download: the CSP allows only our own fonts, and none is needed), after the brand's Latin faces, whose unicode-range is Latin only: Latin words and every digit keep Antonio, IBM Plex Sans and Garet. ---------- */ html[lang="ar"]{ --f-ar:"SF Arabic","Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",system-ui,sans-serif; --f-display:'Antonio',"SF Arabic","Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",system-ui,sans-serif; --f-head:'IBM Plex Sans',"SF Arabic","Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",system-ui,sans-serif; --f-body:'Garet',"SF Arabic","Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",system-ui,sans-serif; --f-mono:'IBM Plex Sans',"SF Arabic","Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",system-ui,sans-serif} /* letter-spacing breaks the joining of Arabic letters, and Arabic has no case: both off for every element in Arabic (a Latin island marked lang="en" keeps the house tracking and capitals) */ html[lang="ar"] :not(:lang(en)){letter-spacing:0 !important;text-transform:none !important} /* the body weight: Garet's 300 is too thin for Arabic on the dark page */ html[lang="ar"] body{font-weight:400;line-height:1.85} /* display headings: a heavier weight and room for the dots and marks above and below the line (the masks clip at 1.04: جيّد reads حسّد) */ html[lang="ar"] .t-title{font-weight:700;line-height:1.35} html[lang="ar"] .t-sub{font-weight:700;line-height:1.4} html[lang="ar"] :is(h1,h2,h3):not(.t-title):not(.t-sub){line-height:1.45} html[lang="ar"] .t-card{line-height:1.45} /* sizes at the lowest specificity (:where), so a rule that sets its own size (an icon button's font-size:0) still wins */ :where(html[lang="ar"]) .t-mono{font-size:13px;font-weight:500;line-height:1.6} html[lang="ar"] .lede{line-height:1.8} html[lang="ar"] .kin .ln{clip-path:inset(-.6em -.6em -.4em -.6em)} html[lang="ar"] .pcap__h .ln{clip-path:inset(-.6em -1em -.2em -1em)} /* the smallest labels (10 to 11 px) get a floor: Arabic dots and marks need it */ :where(html[lang="ar"]) :is(.sheet__end,.sheet__here,.sheet__fol,.jr__f,.jr__here){font-size:12px} /* ---------- 2. THE ISLANDS. Drawings, plates, films, canvases and instruments keep their own left and right: a left lung stays on the left (the owner's accuracy rule). The island is the frame, never its caption, so captions stay right to left. ---------- */ html[dir="rtl"] :is(svg,canvas,video, .hplate__frame,.ist__cam,.ist__box,.pp__cam,.sp,.mnote__read,.arx__stage,.mvd__fig,.gap__scale,.alm__svg,#almPlate,.nxcal__dial, .jd__frame,.gw__frame,.gw__lay,.rsp__frame,.rs-next__frame,.lens8__plate,.bdc__plate,.prl__cam,.spec__left,.spec__brush,.sut__frame, .tri8__plate,.tri8__g,.d8arm__plate,.abr__plate,.abx__plate,.glb,.scope,.dseal,.prule,.pend__pl,.study__img,.pgx__plate,.afx__plate, .ctl__stage,.reg__plate,.door__set,.door__btn,.stage,#film,.shero__film,.impx__fig,section.pl,.nf2__box,.dd__plate,.lf,.trav,.ret,.cur, .day__plate,.ros__pl,.cfn__orm,.inkw){direction:ltr} /* SVG text: the anchors stay where the drawing put them; a label orders itself by its own first letter */ html[dir="rtl"] svg :is(text,tspan,textPath){unicode-bidi:plaintext;letter-spacing:0} /* the three left-to-right components until their scripts learn RTL scrolling: the home showcase, the events scroller, the booklet (pictures of the English programmes); the words on their cards read right to left */ html[dir="rtl"] :is(.acts,.scr,.bk){direction:ltr} html[dir="rtl"] :is(.acts,.scr) :is(.slide__cap,.slide__txt,.scr__cap,.scr__hint,figcaption){direction:rtl;text-align:start} /* the robot plate (fx/davinci, another workstream) splits its words into letters: inside its LTR island Latin reads in order */ html[dir="rtl"] section.pl .pl__words,html[dir="rtl"] section.pl [dir="rtl"]{direction:rtl} /* ---------- 3. NUMBERS, CODES, ADDRESSES: one left-to-right run each, so "+966 50 649 8079" never reads "8079 649 50 966+" ---------- */ html[dir="rtl"] :is(a[href^="tel:"],a[href^="mailto:"],.ftr__pphone,.ftr__pmail,.sheet__row > span:last-child,.person__mail,.person__post, .t-num,.cfr__a,.adv-e__a.adv-e__doi,bdi[dir="ltr"]){direction:ltr;unicode-bidi:isolate} html[dir="rtl"] :is(.adv-e__d,time.t-mono){unicode-bidi:isolate} html[dir="rtl"] .cfe__line{unicode-bidi:plaintext;text-align:start} html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="url"]{direction:ltr;text-align:right} html[dir="rtl"] .cfp__in{unicode-bidi:plaintext} /* ===================================================================== GENERATED MIRROR LAYER (build_ar.py; edit the generator or ar.base.css, never here): 564 declarations (site.css 466, learn.css 98, scroller.css 0), every physical left/right declaration of the stylesheets outside the drawings, mirrored inside its own @media. The components below win. ===================================================================== */ /* ---- from site.css ---- */ html[dir="rtl"] .btn::before{background:linear-gradient(var(--t),var(--t)) right top/9px 1px,linear-gradient(var(--t),var(--t)) right top/1px 9px, linear-gradient(var(--t),var(--t)) left top/9px 1px,linear-gradient(var(--t),var(--t)) left top/1px 9px, linear-gradient(var(--t),var(--t)) right bottom/9px 1px,linear-gradient(var(--t),var(--t)) right bottom/1px 9px, linear-gradient(var(--t),var(--t)) left bottom/9px 1px,linear-gradient(var(--t),var(--t)) left bottom/1px 9px;background-repeat:no-repeat} html[dir="rtl"] .js-sound::before{margin-right:0;margin-left:.7em} html[dir="rtl"] .reveal .part--left{transform:translateX(26px)} html[dir="rtl"] .divider__rule{transform-origin:right center;background:linear-gradient(var(--hair),var(--hair)) right bottom/100% 1px no-repeat, repeating-linear-gradient(to left,var(--tick) 0 1px,transparent 1px 40px) right bottom/100% 5px no-repeat, repeating-linear-gradient(to left,var(--tick-strong) 0 1px,transparent 1px 200px) right bottom/100% 11px no-repeat} html[dir="rtl"] .skew{transform-origin:right center} html[dir="rtl"] .study__labels span{transform:translateX(50%)} html[dir="rtl"] .context{padding-left:0;padding-right:20px;border-left:none;border-right:1px solid var(--rule-strong)} html[dir="rtl"] .act{padding:0 24px 4px 8px;border-left:none;border-right:1px solid var(--rule)} html[dir="rtl"] .faq__scan{left:auto;right:-18px} html[dir="rtl"] .faq__q button{text-align:right} html[dir="rtl"] .faq__q button:hover{padding-left:0;padding-right:12px} html[dir="rtl"] .faq__ico::before,html[dir="rtl"] .faq__ico::after{left:auto;right:0} html[dir="rtl"] .prose ul li{padding-left:0;padding-right:26px} html[dir="rtl"] .prose ul li::before{left:auto;right:0} html[dir="rtl"] .quote{padding-left:0;padding-right:22px;border-left:none;border-right:1px solid var(--rule-strong)} html[dir="rtl"] .status--soon::before{background:linear-gradient(to left,currentColor 50%,transparent 50%)} html[dir="rtl"] .field select{padding-right:0;padding-left:38px} html[dir="rtl"] .tabs__tab::after{transform-origin:right center} html[dir="rtl"] .fallback{border-left:none;border-right:1px solid var(--accent)} html[dir="rtl"] .slide__num{left:auto;right:clamp(16px,2.4vw,32px)} html[dir="rtl"] .evrole{border-left:none;border-right:1px solid var(--accent)} html[dir="rtl"] .sigd__remit li{padding-left:0;padding-right:26px} html[dir="rtl"] .sigd__remit li::before{left:auto;right:0} html[dir="rtl"] .subhead .t-mono,html[dir="rtl"] .ab-mvh .t-mono{margin-right:0;margin-left:.5em} html[dir="rtl"] .reg .pg-soc{text-align:right} html[dir="rtl"] .person::before{left:auto;right:-12px} html[dir="rtl"] .people{padding:12px 12px 0 0} html[dir="rtl"] .soc::before{transform-origin:right center} html[dir="rtl"] .dev__cov{transform-origin:50% 0} html[dir="rtl"] .rs-feat::before{left:auto;right:-1px;border-left:none;border-right:1px solid var(--line)} html[dir="rtl"] .rs-feat__auth .rs-lab{margin-right:0;margin-left:.6em} html[dir="rtl"] .rs-note{border-left:1px solid var(--rule);border-right:2px solid var(--line)} html[dir="rtl"] .rs-note .rs-lab{margin-right:0;margin-left:.6em} html[dir="rtl"] .rs-ev{padding:clamp(20px,2.8vw,32px) clamp(14px,1.6vw,22px) clamp(20px,2.8vw,32px) 0} html[dir="rtl"] .rs-ev--otcoe::before{left:auto;right:0} html[dir="rtl"] .rs-gaps li{padding-left:0;padding-right:2.6em} html[dir="rtl"] .rs-gaps li::before{left:auto;right:0} html[dir="rtl"] .hdr::before{transform-origin:50% 0} html[dir="rtl"] .hdr__rsig .hdr__emb{left:auto;right:0;clip-path:inset(0 0 0 61.5%)} html[dir="rtl"] .hdr > .hdr__nav{margin-left:0;margin-right:auto} html[dir="rtl"] .dcyl--3d .dcyl__refl{transform-origin:50% 50%} html[dir="rtl"] .sut.sut--on{padding-left:0;padding-right:var(--sut-pad,64px)} html[dir="rtl"] .sut--closed .sut__edge--l{transform:translateX(-1px)} html[dir="rtl"] .sut--closed .sut__edge--r{transform:translateX(1px)} html[dir="rtl"] .sut__sq.is-tight .sut__tail--l{transform:translate(3px,1px)} html[dir="rtl"] .sut__sq.is-tight .sut__tail--r{transform:translate(-3px,1px)} html[dir="rtl"] .sut__drv{left:auto;right:0} html[dir="rtl"] .prule__bar{left:auto;right:0} html[dir="rtl"] .prule__dots i{margin-left:0;margin-right:-.5px} @media (max-width:767px){html[dir="rtl"] .prule__bar{left:auto;right:var(--gutter)}} @media (max-width:767px){html[dir="rtl"] .prule__st{text-align:left}} @media (max-width:767px){html[dir="rtl"] .prule__st li.is-on{text-align:left}} html[dir="rtl"] .gh-a,html[dir="rtl"] .gh-b{transform-origin:50% 49.4%} html[dir="rtl"] .gp-origin{left:auto;right:0;margin:-7.5px -7.5px 0 0} html[dir="rtl"] .gp-target{left:auto;right:0} html[dir="rtl"] .gp-target i{left:auto;right:-12px} html[dir="rtl"] #paths.gp-stacked .gp-target i{left:auto;right:-7px} html[dir="rtl"] .gp-note{margin-left:0;margin-right:auto} html[dir="rtl"] .nf-tgt{transform-origin:50% 50%} html[dir="rtl"] .vq__cap{padding-left:0;padding-right:64px} html[dir="rtl"] .vq__lead{left:auto;right:0} html[dir="rtl"] .vq__src:hover .vq__arr,html[dir="rtl"] .vt__card:hover .vq__arr{transform:translate(-2px,-2px)} @media (max-width:720px){html[dir="rtl"] .vq__cap{padding-left:0;padding-right:44px}} html[dir="rtl"] .vfa__in{transform-origin:50% 0} html[dir="rtl"] .vt__board{background:radial-gradient(ellipse 70% 120% at 88% 50%,rgba(217,138,75,.16),rgba(217,138,75,0) 70%),var(--panel)} html[dir="rtl"] .vt__trunk{left:auto;right:50%;transform-origin:50% 0} html[dir="rtl"] .vt__bus{transform-origin:50% 50%} html[dir="rtl"] .vt__item::before{left:auto;right:50%;transform-origin:50% 0} html[dir="rtl"] .vt__num{left:auto;right:14px} @media (max-width:1099px){html[dir="rtl"] .vt__list{padding-left:0;padding-right:26px}} @media (max-width:1099px){html[dir="rtl"] .vt__list::before{left:auto;right:0}} @media (max-width:1099px){html[dir="rtl"] .vt__trunk{left:auto;right:0}} @media (max-width:1099px){html[dir="rtl"] .vt__item::after{left:auto;right:-26px}} @media (max-width:640px){html[dir="rtl"] .vt__list{padding-left:0;padding-right:18px}} @media (max-width:640px){html[dir="rtl"] .vt__item::after{left:auto;right:-18px}} html[dir="rtl"] .hdr__ab{text-align:right} @media (min-width:1001px) and (max-width:1240px){html[dir="rtl"] .hdr__nav > .motion::after{right:auto;left:0}} html[dir="rtl"] .sheet__ab::before{background:linear-gradient(var(--t),var(--t)) right top/9px 1px,linear-gradient(var(--t),var(--t)) right top/1px 9px, linear-gradient(var(--t),var(--t)) left top/9px 1px,linear-gradient(var(--t),var(--t)) left top/1px 9px, linear-gradient(var(--t),var(--t)) right bottom/9px 1px,linear-gradient(var(--t),var(--t)) right bottom/1px 9px, linear-gradient(var(--t),var(--t)) left bottom/9px 1px,linear-gradient(var(--t),var(--t)) left bottom/1px 9px;background-repeat:no-repeat} html[dir="rtl"] .sheet__ab:hover .sheet__aba{transform:translateX(-4px)} html[dir="rtl"] .rs-jump__card{padding:18px 22px 20px 18px} html[dir="rtl"] .rs-jump__card::before{left:auto;right:-1px;transform-origin:50% 0} @media (max-width:560px){html[dir="rtl"] .rs-jump__card{padding:16px 20px 18px 16px}} html[dir="rtl"] .helm__cam{transform-origin:50% 50%} html[dir="rtl"] .person__ini-t{margin-right:0;margin-left:-.08em} html[dir="rtl"] .w5arm{border-left:1px solid var(--rule);border-right:2px solid var(--accent)} @media (max-width:1000px){html[dir="rtl"] .hdr__nav > .hdr__sound::after{right:auto;left:0}} @media (hover:none){html[dir="rtl"] .vt__card.is-press .vq__arr{transform:translate(-2px,-2px)}} @media (hover:none){html[dir="rtl"] .sheet__ab:active .sheet__aba,html[dir="rtl"] .sheet__ab.is-press .sheet__aba{transform:translateX(-4px)}} html[dir="rtl"] .dbd__go .vq__arr{margin-left:0;margin-right:8px} html[dir="rtl"] .dbd__go:hover .vq__arr,html[dir="rtl"] .dbd__go:focus-visible .vq__arr{transform:translate3d(-2px,-2px,0)} html[dir="rtl"] .dbd .people{padding:6px 6px 0 0} html[dir="rtl"] .vfa__tgt{left:auto;right:0} @media (max-width:900px){html[dir="rtl"] #teams .vt__item::before{left:auto;right:-20px}} html[dir="rtl"] .tri8__keys{padding-left:0;padding-right:18px} html[dir="rtl"] .tri8__k{text-align:right} html[dir="rtl"] .tri8__c{padding-left:0;padding-right:16px;border-left:none;border-right:1px solid rgba(168,67,46,.7)} html[dir="rtl"] .tri8__pc{margin-right:0;margin-left:4px} @media (max-width:900px){html[dir="rtl"] .tri8--live .tri8__k{padding:4px 0 8px 6px}} html[dir="rtl"] .ftr8 .ftr__pl > li::before{left:auto;right:0} html[dir="rtl"] .ftr8 .ftr__pphone::after,html[dir="rtl"] .ftr8 .ftr__pmail::after{transform-origin:right center} html[dir="rtl"] .plg__go{margin-left:0;margin-right:auto} @media (hover:hover){html[dir="rtl"] .plr:hover .plr__arr{transform:translate3d(-4px,0,0)}} html[dir="rtl"] .ecard__arr{right:auto;left:18px} @media (hover:hover){html[dir="rtl"] .ecard:hover .ecard__arr{transform:translate3d(-4px,0,0)}} html[dir="rtl"] .ecard__meta{padding-right:0;padding-left:32px} html[dir="rtl"] .reg__lab{text-align:right} html[dir="rtl"] .ab-pull::before,html[dir="rtl"] .ab-pull::after{left:auto;right:0} html[dir="rtl"] .ab-pull::before{background:linear-gradient(to left,#D0694E 0 36px,var(--rule-strong) 36px)} html[dir="rtl"] .pidx__a .nrow__arr{margin-left:0;margin-right:.45em} html[dir="rtl"] .pidx__i:is(:hover,.is-press) .nrow__arr{transform:translate(-3px,-3px)} html[dir="rtl"] .tidx__n{left:auto;right:12px} html[dir="rtl"] .tidx__name .nrow__arr{margin-left:0;margin-right:.4em} html[dir="rtl"] .tidx__a:is(:hover,.is-press) .nrow__arr{transform:translate(-3px,-3px)} @media (max-width:700px){html[dir="rtl"] .tidx__n{left:auto;right:10px}} html[dir="rtl"] .jd__room,html[dir="rtl"] .jd__gap{left:auto;right:30%} html[dir="rtl"] .jd__cart{left:auto;right:-4%;transform-origin:50% 70%} html[dir="rtl"] .jd__seam{left:auto;right:50%;margin-left:0;margin-right:-1px} html[dir="rtl"] .jd__spill{left:auto;right:18%} html[dir="rtl"] .gi-open{padding:clamp(20px,2.4vw,28px) clamp(18px,2vw,26px) clamp(20px,2.4vw,28px) 0} html[dir="rtl"] .gi-open::before{left:auto;right:0} html[dir="rtl"] .tms__cam{transform-origin:50% 50%} html[dir="rtl"] #in-their-words .vq:not(.vq--written) .vq__q::before{left:auto;right:-.2em} html[dir="rtl"] #in-their-words .vq--written .vq__q{padding-left:0;padding-right:clamp(16px,1.8vw,24px);border-left:none;border-right:2px solid rgba(168,67,46,.75)} html[dir="rtl"] #in-their-words .vq__q p{transform:translate3d(14px,0,0)} @media (max-width:720px){html[dir="rtl"] #in-their-words .vq:not(.vq--written) .vq__q::before{left:auto;right:-.06em}} html[dir="rtl"] .ab-sw__wash{left:-36px;right:0} html[dir="rtl"] .ab-sw__wash::before{left:auto;right:0} html[dir="rtl"] .day__b{transform-origin:50% 0} @media (min-width:768px){html[dir="rtl"] .vqx__b{padding:12px 20px 12px 0;text-align:right}} @media (min-width:768px){html[dir="rtl"] .vqx__b::before{left:auto;right:-1px}} @media (min-width:768px) and (max-width:1099px){html[dir="rtl"] .vqx__b{padding:14px 0 4px 8px}} @media (min-width:768px) and (max-width:1099px){html[dir="rtl"] .vqx__b::before{left:8px;right:0}} html[dir="rtl"] .ldg__seg{left:calc(-1 * clamp(18px,2.4vw,34px));right:0} html[dir="rtl"] .ldg__e:last-child .ldg__seg{right:auto;left:0} html[dir="rtl"] .ldg__tk{left:auto;right:0;transform-origin:50% 0} html[dir="rtl"] .ldg__tk::after{left:auto;right:-3px} html[dir="rtl"] .ldg__n{left:auto;right:12px} html[dir="rtl"] .ldg__tgt{left:auto;right:-20px} html[dir="rtl"] .ldg__e--ev .ldg__n{left:auto;right:26px} @media (max-width:1023px){html[dir="rtl"] .ldg__seg{right:auto;left:-24px}} html[dir="rtl"] .armj__lad{right:auto;left:14px} html[dir="rtl"] .armj__rule,html[dir="rtl"] .armj__fill{right:auto;left:0} html[dir="rtl"] .armj__fill{right:auto;left:-.5px;transform-origin:50% 100%} html[dir="rtl"] .armj__ticks i{right:auto;left:0;padding-right:0;padding-left:9px} html[dir="rtl"] .armj__ticks i::after{right:auto;left:0} html[dir="rtl"] .armj__ticks i::before{right:auto;left:-4px} html[dir="rtl"] .armj__ct{left:auto;right:16px} html[dir="rtl"] .spec__chip{background:radial-gradient(ellipse 80% 70% at 52% 46%,var(--slip),color-mix(in srgb,var(--slip) 86%,#8a6a45) 100%)} html[dir="rtl"] .spec__sw li[style*="--slip"] .spec__chip{background:radial-gradient(ellipse 80% 70% at 52% 46%,#2E2620,#1C1713 100%)} html[dir="rtl"] .day__hfig::before{background:radial-gradient(ellipse at 48% 48%,rgba(168,67,46,.14),transparent 62%)} html[dir="rtl"] .prog__cover{padding:10px 6px 12px 12px} html[dir="rtl"] .prog__cover img{box-shadow:3px 0 0 #D8CDB8,5px 1px 0 #B9AE98,-16px 22px 30px -10px rgba(0,0,0,.75)} html[dir="rtl"] .prog__cover::after{left:auto;right:6px} html[dir="rtl"] .arms5__no::before{left:calc(-1 * clamp(10px,1.4vw,20px));right:0} html[dir="rtl"] .arms5__i:last-child .arms5__no::before{right:auto;left:0} html[dir="rtl"] .arms5__no::after{left:auto;right:0} @media (max-width:900px){html[dir="rtl"] .arms5__pos i{left:auto;right:0}} html[dir="rtl"] .csheet__n{left:auto;right:10px} html[dir="rtl"] .nextband .dband__pl::after{background:radial-gradient(ellipse at 30% 50%,rgba(242,186,120,.08),transparent 55%)} html[dir="rtl"] .nxcal{background:radial-gradient(ellipse at 86% 50%,rgba(168,67,46,.12),transparent 55%),#0E0B08} @media (max-width:640px){html[dir="rtl"] .jr__tg::before,html[dir="rtl"] .jr__tg::after{left:auto;right:50%;margin:-.5px -5.5px 0 0}} @media (max-width:640px){html[dir="rtl"] .jr__sub:not([hidden]){padding:0 44px 0 0}} html[dir="rtl"] .vqp__n{left:auto;right:0} @media (max-width:700px){html[dir="rtl"] [data-more="1"] .person{text-align:right}} html[dir="rtl"] .mvd__fig{background:radial-gradient(90% 85% at 56% 46%,rgba(92,64,44,.34),rgba(59,43,36,.14) 55%,rgba(38,32,26,0) 82%)} html[dir="rtl"] .mvd__fig::before{left:auto;right:6px} html[dir="rtl"] .mvd__fig::after{right:auto;left:6px} html[dir="rtl"] .mv-spread > div .quote::before{left:auto;right:-1px;transform-origin:50% 0} html[dir="rtl"] .ab-sw__chip::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cg fill='none' stroke='%233B2B24' stroke-width='.8' stroke-opacity='.6'%3E%3Ccircle cx='338' cy='50' r='36' stroke-dasharray='2 3'/%3E%3Ccircle cx='338' cy='50' r='22' stroke-opacity='.35'/%3E%3Cpath d='M292 50H388M338 6V94'/%3E%3Cpath d='M14 88H262M14 83V93M262 83V93M76 88V85M138 88V85M200 88V85'/%3E%3C/g%3E%3Ccircle cx='338' cy='50' r='4' fill='none' stroke='%23A8432E' stroke-width='1.1'/%3E%3C/svg%3E") left 4% center/auto 100% no-repeat,radial-gradient(ellipse at 50% 50%,rgba(59,43,36,0) 52%,rgba(59,43,36,.34) 100%)} html[dir="rtl"] .evf__kn::after{left:auto;right:-7px} @media (max-width:767px){html[dir="rtl"] .prule__st{text-align:right}} @media (max-width:767px){html[dir="rtl"] .prule__st li.is-on{text-align:right}} html[dir="rtl"] .ros__kn::after{left:auto;right:-7px} html[dir="rtl"] .socs .soc::before{transform-origin:50% 50%} html[dir="rtl"] .gw-vk__l li::before{transform-origin:right center} html[dir="rtl"] .sheet__list a.sheet__m.has-tg{padding-right:0;padding-left:52px} html[dir="rtl"] .sheet__tg{right:auto;left:0} html[dir="rtl"] .sheet__tg::before,html[dir="rtl"] .sheet__tg::after{left:auto;right:50%;margin:-.5px -6px 0 0} @media (max-width:420px){html[dir="rtl"] .sheet__list a.has-tg .sheet__fol{margin-left:0;margin-right:auto}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .context{padding-left:0;padding-right:1.25rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .act{padding-left:0.5rem;padding-right:1.5rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .faq__scan{left:auto;right:-1.125rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .faq__q button:hover{padding-left:0;padding-right:0.75rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .prose ul li{padding-left:0;padding-right:1.625rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .quote{padding-left:0;padding-right:1.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .field select{padding-right:0;padding-left:2.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .slide__num{left:auto;right:clamp(1rem, 2.4vw, 2rem)}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .sigd__remit li{padding-left:0;padding-right:1.625rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .person::before{left:auto;right:-0.75rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .people{padding-left:0;padding-right:0.75rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .rs-ev{padding-left:0;padding-right:clamp(0.875rem, 1.6vw, 1.375rem)}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .sut.sut--on{padding-left:0;padding-right:var(--sut-pad,4rem)}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .gp-origin{margin-left:0;margin-right:-0.4688rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .gp-target i{left:auto;right:-0.75rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] #paths.gp-stacked .gp-target i{left:auto;right:-0.4375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .vq__cap{padding-left:0;padding-right:4rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .vt__num{left:auto;right:0.875rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .rs-jump__card{padding-left:1.125rem;padding-right:1.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .dbd__go .vq__arr{margin-left:0;margin-right:0.5rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .dbd .people{padding-left:0;padding-right:0.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .tri8__keys{padding-left:0;padding-right:1.125rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .tri8__c{padding-left:0;padding-right:1rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .tri8__pc{margin-right:0;margin-left:0.25rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ecard__arr{right:auto;left:1.125rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ecard__meta{padding-right:0;padding-left:2rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .tidx__n{left:auto;right:0.75rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .gi-open{padding-left:0px;padding-right:clamp(1.125rem, 2vw, 1.625rem)}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] #in-their-words .vq--written .vq__q{padding-left:0;padding-right:clamp(1rem, 1.8vw, 1.5rem)}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ab-sw__wash{right:auto;left:-2.25rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .day__b::before{left:auto;right:-1px}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){@media (min-width: 768px){html[dir="rtl"] .vqx__b{padding-left:0;padding-right:1.25rem}}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ldg__seg{right:auto;left:calc(-1 * clamp(1.125rem, 2.4vw, 2.125rem))}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ldg__e:last-child .ldg__seg{right:auto;left:0px}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ldg__tk::after{left:auto;right:-0.1875rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ldg__n{left:auto;right:0.75rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ldg__tgt{left:auto;right:-1.25rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ldg__e--ev .ldg__n{left:auto;right:1.625rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .armj__lad{right:auto;left:0.875rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .armj__ticks i{padding-right:0;padding-left:0.5625rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .armj__ticks i::before{right:auto;left:-0.25rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .armj__ct{left:auto;right:1rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .prog__cover{padding-left:0.75rem;padding-right:0.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .prog__cover::after{left:auto;right:0.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .arms5__no::before{right:auto;left:calc(-1 * clamp(0.625rem, 1.4vw, 1.25rem))}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .arms5__i:last-child .arms5__no::before{right:auto;left:0px}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .csheet__n{left:auto;right:0.625rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .mvd__fig::before{left:auto;right:0.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .mvd__fig::after{right:auto;left:0.375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .evf__kn::after{left:auto;right:-0.4375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .ros__kn::after{left:auto;right:-0.4375rem}} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .plt__eye::before{margin-right:0;margin-left:0.875rem}} html[dir="rtl"] .plt__eye::before{margin-right:0;margin-left:14px} html[dir="rtl"] .plt__btn:hover .plt__ar,html[dir="rtl"] .plt__btn:active .plt__ar,html[dir="rtl"] .plt__btn:focus-visible .plt__ar{transform:translateX(-.25em)} html[dir="rtl"].mph:not(.still) .vqp__ly--t{transform-origin:50% 47.17%} html[dir="rtl"].mph:not(.still) .vqp__ly--d{transform-origin:50% 96.23%} html[dir="rtl"].mph:not(.still) .vqp__ly--g{transform-origin:50% 86.79%} @media (hover:hover) and (pointer:fine) and (min-width:1441px){html[dir="rtl"] .vfa__tgt svg{transform-origin:50% 50%}} @media (hover:hover) and (pointer:fine){html[dir="rtl"] .nib{left:auto;right:0}} @media (hover:hover) and (pointer:fine){html[dir="rtl"] .nib-ring{left:auto;right:0;margin:-52px -52px 0 0;translate:400px -400px}} html[dir="rtl"].dsk.lux-hover .lx__g{text-align:right} html[dir="rtl"].dsk.lux-hover:not(.still) .nrow:hover .nrow__num,html[dir="rtl"].dsk.lux-hover:not(.still) .pidx__i:hover .pidx__n,html[dir="rtl"].dsk.lux-hover:not(.still) .plr:hover .plr__n,html[dir="rtl"].dsk.lux-hover:not(.still) .tidx__a:hover .tidx__n{translate:-4px 0} html[dir="rtl"].dsk.lux-hover:not(.still) .nrow:hover .nrow__arr,html[dir="rtl"].dsk.lux-hover:not(.still) .pidx__i:hover .nrow__arr,html[dir="rtl"].dsk.lux-hover:not(.still) .tidx__a:hover .nrow__arr{transform:translate(-4.24px,-4.24px)} html[dir="rtl"].dsk.lux-hover:not(.still) .plr:hover .plr__arr{transform:translate3d(-6px,0,0)} html[dir="rtl"] .lx-nib{left:auto;right:0;margin:-1.5px -1.5px 0 0} @media (max-width:640px){html[dir="rtl"] .lx-nib{left:auto;right:14.5px}} html[dir="rtl"].mph.lx-menu .sheet__iris{left:auto;right:0;margin:-128px -128px 0 0} html[dir="rtl"] .lx-ddh{left:auto;right:0} @media (pointer:coarse),(hover:none),(max-width:1023px){html[dir="rtl"] #leadership:not(.lead8) #sig-lead .people{padding:14px 14px 0 0}} html[dir="rtl"].dsk .lb__fly > img{transform-origin:50% 50%} html[dir="rtl"] .evclk__u{border-left:none;border-right:1px solid var(--rule)} html[dir="rtl"] .kfol__rs{transform-origin:50% 50%} html[dir="rtl"] .kfol__fig{transform-origin:50% 50%} html[dir="rtl"] .kfol__ring{transform-origin:50% 50%} html[dir="rtl"] .kfol__ring svg{transform-origin:50% 50%} html[dir="rtl"] .irl{left:auto;right:0} html[dir="rtl"] .irl__in{left:auto;right:95px} html[dir="rtl"] .irl__cv{left:auto;right:0} /* ---- from learn.css ---- */ html[dir="rtl"] .cfe__v::after,html[dir="rtl"] .cf__play::after{background:linear-gradient(var(--k),var(--k)) right top/1rem 1px no-repeat,linear-gradient(var(--k),var(--k)) right top/1px 1rem no-repeat, linear-gradient(var(--k),var(--k)) left top/1rem 1px no-repeat,linear-gradient(var(--k),var(--k)) left top/1px 1rem no-repeat, linear-gradient(var(--k),var(--k)) right bottom/1rem 1px no-repeat,linear-gradient(var(--k),var(--k)) right bottom/1px 1rem no-repeat, linear-gradient(var(--k),var(--k)) left bottom/1rem 1px no-repeat,linear-gradient(var(--k),var(--k)) left bottom/1px 1rem no-repeat} html[dir="rtl"] .cfc__mk{margin-left:0;margin-right:auto} html[dir="rtl"] .cfc::before{transform-origin:right center} html[dir="rtl"] .cfo{padding:.5rem 1.125rem .5rem 1rem} html[dir="rtl"] .cfo.is-active::before{left:auto;right:0} html[dir="rtl"] .cfp__msg.is-err,html[dir="rtl"] .cfp__msg.is-warm,html[dir="rtl"] .cfp__msg.is-miss{padding-left:0;padding-right:.875rem;border-left:none;border-right:2px solid var(--rule-strong)} html[dir="rtl"] .cfp__msg.is-err{border-left-color:none;border-right-color:var(--accent)} html[dir="rtl"] .cfp__msg.is-warm{border-left-color:none;border-right-color:var(--accent)} html[dir="rtl"] .cfe__v{background:radial-gradient(120% 90% at 15% 0%,rgba(168,67,46,.16),transparent 60%),rgba(59,43,36,.4)} html[dir="rtl"] .cfe__stats dd small{margin-left:0;margin-right:.1em} html[dir="rtl"] .cfe__pmsg.is-err{padding-left:0;padding-right:.875rem;border-left:none;border-right:2px solid var(--accent)} html[dir="rtl"] .cfn__orm{right:auto;left:clamp(1rem,2.5vw,2rem)} html[dir="rtl"] .cfb__p .t-mono{margin-left:0;margin-right:.25rem} html[dir="rtl"] .cfb__r.is-me::before{left:auto;right:-.75rem} html[dir="rtl"] .cfa__s{text-align:left} html[dir="rtl"] .cfa__r:hover .cf-arr,html[dir="rtl"] .cfa__r:focus-within .cf-arr{transform:translateX(-.25rem)} html[dir="rtl"] .cf-pts caption{text-align:right} html[dir="rtl"] .cf-pts th,html[dir="rtl"] .cf-pts td{text-align:right} html[dir="rtl"] .cf-pts td{text-align:left} html[dir="rtl"] .cf-pts thead th:last-child{text-align:left} html[dir="rtl"] .cfd__bar i{left:auto;right:0} html[dir="rtl"] .cfd__v{text-align:left} html[dir="rtl"] .lrn .nrow:hover .cf-arr{transform:translateX(-.25rem)} @media (max-width:640px){html[dir="rtl"] .cfa__s{text-align:right}} html[dir="rtl"] .adv-yr__rule{transform-origin:right center} @media (max-width:640px){html[dir="rtl"] .adv-e__src dt{margin-right:0;margin-left:.625rem}} html[dir="rtl"] .ax-key--l{left:auto;right:calc(5.5% - 22px)} html[dir="rtl"] .ax-key--r{right:auto;left:calc(5.5% - 22px)} @container axp (max-width:460px){html[dir="rtl"] .ax-key__ring{margin:15px .25rem 15px .5rem}} html[dir="rtl"] .ax-step__b{text-align:right} html[dir="rtl"] .ax-step__o{margin-left:0;margin-right:1rem} html[dir="rtl"] .ax-step__x{margin:.625rem 3rem 0 0} html[dir="rtl"] .ax-cite{margin-left:0;margin-right:.15em} html[dir="rtl"] .ax-robo::after{background:linear-gradient(var(--k),var(--k)) right top/.875rem 1px no-repeat,linear-gradient(var(--k),var(--k)) right top/1px .875rem no-repeat, linear-gradient(var(--k),var(--k)) left bottom/.875rem 1px no-repeat,linear-gradient(var(--k),var(--k)) left bottom/1px .875rem no-repeat} html[dir="rtl"] .ax-var{padding:.25rem 1.375rem .25rem 0;border-left:none;border-right:1px dashed var(--rule-strong)} html[dir="rtl"] .ax-papers:hover .ax-papers__a,html[dir="rtl"] .ax-papers:focus-visible .ax-papers__a{transform:translateX(-.25rem)} html[dir="rtl"] .ax-ext{margin-left:0;margin-right:.375rem} html[dir="rtl"] .ax-dock{padding:.375rem calc(var(--gutter) - .375rem) .375rem var(--gutter);text-align:right} @media (max-width:599px){html[dir="rtl"] .ax-step__x{margin-left:0;margin-right:2.25rem}} @media (max-width:599px){html[dir="rtl"] .ax-help{text-align:right}} html[dir="rtl"] .ax-why{margin:.875rem 3rem 0 0} html[dir="rtl"] .ax-step__s{margin:.75rem 3rem 0 0} html[dir="rtl"] .ax-step__sl{margin-right:0;margin-left:.25rem} html[dir="rtl"] .ax-pearls__l{padding-left:0;padding-right:1.1rem} html[dir="rtl"] .ax-src__k{margin-right:0;margin-left:.25rem} html[dir="rtl"] .ax-lead{left:auto;right:0} html[dir="rtl"] .ax-face__b + .ax-face__b{border-left:none;border-right:1px solid var(--rule-strong)} html[dir="rtl"] .ax-3d__flush{left:auto;right:0;margin:-23% -23% 0 0} @media (max-width:599px){html[dir="rtl"] .ax-why,html[dir="rtl"] .ax-step__s{margin-left:0;margin-right:2.25rem}} html[dir="rtl"] .a3dw{left:auto;right:0} html[dir="rtl"] .a3dw__o,html[dir="rtl"] .a3dw__m{left:auto;right:0} html[dir="rtl"] .a3d__pin{left:auto;right:0} html[dir="rtl"] .a3d__dot{left:auto;right:-3px} html[dir="rtl"] .a3d__lb{left:auto;right:0} html[dir="rtl"] .a3d__pin.is-l .a3d__lb{transform-origin:left;translate:100% 0} html[dir="rtl"] .ax-b3ui{left:auto;right:0} html[dir="rtl"] .ax-3d__tip{left:auto;right:.75rem} /* ---- from scroller.css ---- */ /* END GENERATED MIRROR LAYER */ /* ---------- 4. COMPONENTS (after the generated layer, so these win where both speak) ---------- */ /* the header: the nav slides left (not right) while the film HUD shows its own Sound */ html[dir="rtl"].hud-sound .hdr > .hdr__nav{transform:translate3d(calc(-1 * var(--hdr-snd,0px)),0,0)} html[dir="rtl"].hud-sound:not(.logo-fly) .hdr--cond > .hdr__nav{transform:translate3d(calc(-1 * var(--hdr-snd,0px)),calc((var(--hdr-hc) - var(--hdr-h)) / 2),0)} @media (max-width:1000px){html[dir="rtl"].hud-sound .hdr > .hdr__nav{transform:none}html[dir="rtl"].hud-sound:not(.logo-fly) .hdr--cond > .hdr__nav{transform:translate3d(0,calc((var(--hdr-hc) - var(--hdr-h)) / 2),0)}} /* the Departments menu (600 px with its plate) opens centred under its button: anchored at the button's right edge it ran 25 to 86 px past the left edge at 1100 to 1440 px (m56 test), anchored at its left edge it would cover the lockup; centred it stays clear of both. Its hover nudge goes the reading way. */ html[dir="rtl"] .dd__menu{left:50%;right:auto;transform:translate(-50%,-6px)} html[dir="rtl"] .dd.open .dd__menu{transform:translate(-50%,0)} html[dir="rtl"] .dd__menu a:hover,html[dir="rtl"] .dd__menu a:focus-visible{padding-left:18px;padding-right:24px} html[dir="rtl"] .hdr__links > li > a::after,html[dir="rtl"] .dd__btn::after{transform-origin:right center} /* the atlas's YOU ARE HERE counter (03 / 04) reads left to right, like every spaced counter on /ar/ (isolate()); the dock's "المتبرع 03/04" keeps the page's direction (the word first) and its 03/04 holds together by itself */ html[dir="rtl"] .ax-hud__n{direction:ltr;unicode-bidi:isolate} /* the phone sheet: the route down the right, its ticks and folios mirrored */ html[dir="rtl"] .sheet__list{padding-left:0;padding-right:30px} html[dir="rtl"] .sheet__list::before{left:auto;right:8px} html[dir="rtl"] .sheet__tk{left:auto;right:-22px} html[dir="rtl"] .sheet__list a.is-here .sheet__tk{left:auto;right:-26px} html[dir="rtl"] :is(.sheet__fol,.sheet__here){margin-left:0;margin-right:auto} html[dir="rtl"] .sheet__here + .sheet__fol{margin-left:0;margin-right:12px} /* LEARN: ADVANCES, the spine and its nodes on the reading side */ html[dir="rtl"] .adv-yr__list{padding-left:0;padding-right:var(--adv-in)} html[dir="rtl"] .adv-e::before{left:auto;right:calc(-1 * var(--adv-in))} html[dir="rtl"] .adv-e__node{left:auto;right:calc(-1 * var(--adv-in) - .75rem + .5px)} html[dir="rtl"] .adv-e__node::after{left:auto;right:1.3125rem} html[dir="rtl"] .adv-yr__rule{transform-origin:right center} html[dir="rtl"] .adv-ext{scale:-1 1} /* LEARN: THE DIFFERENTIAL, the scoring table: words at the start, points at the end, "+ 20" with its sign on the left */ html[dir="rtl"] .cf-pts caption,html[dir="rtl"] .cf-pts th,html[dir="rtl"] .cf-pts td{text-align:start} html[dir="rtl"] .cf-pts td,html[dir="rtl"] .cf-pts thead th:last-child{text-align:end} html[dir="rtl"] .cf-pts td{direction:ltr;unicode-bidi:isolate;text-align:left} html[dir="rtl"] .cf-pts .cf-pts__b{direction:rtl;text-align:left} /* arrows point the reading way (the independent scale property, so each hover transform still composes) */ html[dir="rtl"] :is(.sheet__aba,.nrow__arr,.ecard__arr,.vq__arr,.plr__arr,.nextplate__arr,.helm__arr,.gi-slip__arr,.cf-arr,.ring__chev,.go-l svg,.go-s svg,.ev-arr,.prog__arr){scale:-1 1} /* the corner instruments trade margins: the folio caption reads up the start (right) margin, the scrubber stands in the end (left) one */ html[dir="rtl"] .cap{left:auto;right:calc(var(--side) / 2 - 8px)} html[dir="rtl"] .scrub{right:auto;left:calc(var(--side) / 2 - 12px)} @media (max-width:767px){html[dir="rtl"] .scrub{right:auto;left:max(1px,env(safe-area-inset-left))}} /* the event page's kind separator (an inline style of the view pages) */ html[dir="rtl"] .evkind span + span::before{margin-right:0;margin-left:14px} /* the board page's full-board figure (its inline margin-left:auto is mirrored in the Arabic HTML; this keeps it if the HTML changes) */ html[dir="rtl"] figure.fbd{margin-left:0} /* ---------- 5. MOTION. The page turns the other way (an Arabic book): the forward wipe uses the back brush and the back wipe the forward one. Letters are never split on Arabic pages (site.js H7); this is the safety net for a module that still does. ---------- */ html[dir="rtl"]::view-transition-old(root){-webkit-mask-image:url(/assets/brush/wipe-h-back.png);mask-image:url(/assets/brush/wipe-h-back.png); -webkit-mask-position:0% 0;mask-position:0% 0;animation-name:inkWipeBack} html[dir="rtl"].vt-back::view-transition-old(root){-webkit-mask-image:url(/assets/brush/wipe-h.png);mask-image:url(/assets/brush/wipe-h.png); -webkit-mask-position:100% 0;mask-position:100% 0;animation-name:inkWipe} html[dir="rtl"] .vis .c{display:inline !important;transform:none !important} /* ---------- 6. THE WORDS IN CSS content: (generated from the ui memory; the text observer cannot see pseudo-elements) ---------- */ @media (min-width:1001px) and (max-width:1240px){html[lang="ar"] .hdr__nav > .js-motion::after{content:"الحركة: مفعّلة"}} @media (min-width:1001px) and (max-width:1240px){html[lang="ar"].still .hdr__nav > .js-motion::after{content:"الحركة: متوقفة"}} @media (min-width:1001px) and (max-width:1240px){html[lang="ar"] .hdr__nav > .hdr__sound::after{content:"الصوت: متوقف"}} @media (min-width:1001px) and (max-width:1240px){html[lang="ar"] .hdr__nav > .hdr__sound[aria-pressed="true"]::after{content:"الصوت: مفعّل"}} @media (min-width:1001px) and (max-width:1240px) and (prefers-reduced-motion:reduce){html[lang="ar"]:not(.motion-on) .hdr__nav > .js-motion::after{content:"الحركة: متوقفة"}} @media (max-width:1000px){html[lang="ar"] .hdr__nav > .hdr__sound::after{content:"الصوت: متوقف"}} @media (max-width:1000px){html[lang="ar"] .hdr__nav > .hdr__sound[aria-pressed="true"]::after{content:"الصوت: مفعّل"}} /* the last rule: the browser test checks it was parsed, so a broken rule above (which would hide every rule after it) is caught */ html[dir="rtl"] .ar-css-end{--ar-css-end:1}