@font-face{font-family:'IBM Plex Sans Arabic';src:url('./assets/ibm-plex-sans-arabic-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('./assets/ibm-plex-sans-arabic-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('./assets/ibm-plex-sans-arabic-600.ttf') format('truetype');font-weight:600 700;font-display:swap}
.site-header{gap:22px}.site-header>.brand{order:0}.site-header>#navigation{order:1}.site-header>.header-link{order:2}.site-header>.language-toggle{order:3}.site-header>.menu-toggle{order:4}
.language-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 13px;background:transparent;border:1px solid #a1c6b647;border-radius:3px;color:var(--paper);font-size:.875rem;white-space:nowrap;flex-shrink:0;line-height:1.4}.language-toggle[lang=ar]{font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif}.language-toggle[lang=en]{font-family:Satoshi,Arial,sans-serif}.language-toggle:hover{background:#8eb9a114;border-color:#a7cab980}.footer-links{align-items:center;flex-wrap:wrap}.product-motion-control{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:-18px;margin-bottom:25px;color:#8aafa0}.product-motion-control>.study-pause{font-family:var(--font)}.site-footer{padding-bottom:30px}.product-open{text-align:start}.diagram-tick{direction:ltr;unicode-bidi:isolate;margin-left:0;margin-inline-start:auto}.product-name h3,.hero-product-links strong,#dialog-title,.closing-top>.mono{direction:ltr;unicode-bidi:isolate}.titan-art{direction:ltr}.product-name>span[lang=ar]{font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif}.study-pause:disabled,#motion-toggle:disabled{cursor:default;opacity:.8}
html[lang=ar]{--font:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;--mono:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif}
html[lang=ar] body{line-height:1.85}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,html[lang=ar] .eyebrow,html[lang=ar] .product-name>h3,html[lang=ar] .portfolio-core>strong,html[lang=ar] .portfolio-core>span{letter-spacing:0}
html[lang=ar] .hero h1{font-size:clamp(4rem,7.3vw,7.3rem);line-height:1.5;font-weight:500;margin-top:15px}
html[lang=ar] .hero-content{padding-top:168px}
html[lang=ar] .hero-bottom{margin-top:28px}
html[lang=ar] .hero-shade{background:linear-gradient(270deg,#0a1317ed 0%,#0a131790 37%,transparent 75%),linear-gradient(0deg,#0a1317 0%,#0a131744 25%,transparent 80%)}
html[lang=ar] .brand{margin-left:0;margin-right:-15px}
html[lang=ar] .footer-brand{margin-left:0;margin-right:-18px}
html[lang=ar] .hero-description>p,html[lang=ar] .intro-bottom>p,html[lang=ar] .principles-intro>p,html[lang=ar] .product-card-copy>p,html[lang=ar] .principle-list p{line-height:1.95}
html[lang=ar] .intro h2{line-height:1.65;font-size:clamp(2.15rem,3.3vw,3.5rem)}
html[lang=ar] .section-title-row h2{font-size:clamp(2.5rem,3.7vw,4rem);line-height:1.55}
html[lang=ar] .product-card h4{line-height:1.65;font-size:2rem;margin-bottom:13px}
html[lang=ar] .product-name>h3,html[lang=ar] .hero-product-links strong,html[lang=ar] #dialog-title,html[lang=ar] .closing-top>.mono{font-family:var(--font);direction:rtl;letter-spacing:0}
html[lang=ar] .product-art{direction:ltr}
html[lang=ar] .data-node{font-size:.8rem;padding:4px 10px;line-height:1.7}
html[lang=ar] .portfolio-core>span,html[lang=ar] .portfolio-core>strong{line-height:1.5;font-size:.9rem}
html[lang=ar] .portfolio-core .core-cross{font-size:.7rem}
html[lang=ar] .product-art-note{text-align:start;line-height:1.9}
html[lang=ar] .principles-intro h2,html[lang=ar] .closing h2{line-height:1.55}
html[lang=ar] .principles-intro>img{margin-left:0;margin-right:-20px}
html[lang=ar] .principle-list h3{line-height:1.7}
html[lang=ar] .dialog-heading h2{letter-spacing:0;line-height:1.5}
html[lang=ar] #dialog-description,html[lang=ar] .dialog-feature p,html[lang=ar] .dialog-note p{line-height:1.95}
html[lang=ar] .dialog-feature>.mono{direction:ltr;unicode-bidi:isolate}
html[lang=ar] .dialog-top>.eyebrow{font-size:.8rem}
html[lang=ar] .diagram-step{font-size:.78rem}
html[lang=ar] .diagram-tick{font-family:Consolas,'Courier New',monospace;font-size:.65rem}
html[lang=ar] .validation-label,html[lang=ar] .chart-caption,html[lang=ar] .train-zone,html[lang=ar] .test-zone{font-size:.8rem;letter-spacing:0}
@media(max-width:1150px){.site-header{gap:15px}.site-header .brand{width:240px}.site-header .header-link{display:none}html[lang=ar] .hero h1{font-size:7.5vw}.hero-product-links{min-width:0}}
@media(max-width:900px){.site-header .brand{width:225px}.site-header nav{gap:20px}html[lang=ar] .hero h1{font-size:8vw}html[lang=ar] .intro h2{font-size:2.7rem}html[lang=ar] .product-card h4{font-size:1.65rem}html[lang=ar] .product-card-copy p{min-height:0}html[lang=ar] .section-title-row{gap:25px}html[lang=ar] .section-title-row h2{font-size:2.5rem}html[lang=ar] .product-card-top{gap:8px}html[lang=ar] .diagram-step{flex-wrap:wrap;font-size:.7rem}.product-motion-control>.eyebrow{font-size:.7rem}}
@media(max-width:650px){.site-header{gap:9px}.site-header .brand{width:220px;min-width:0;flex-shrink:1;margin-left:-14px}.site-header>.language-toggle{font-size:.8rem;padding-inline:10px;min-height:40px}.site-header .menu-toggle{width:40px;height:40px;padding:10px}.site-header nav.is-open{top:87px}.product-motion-control{margin-top:-8px;margin-bottom:22px;align-items:flex-start;flex-wrap:wrap;gap:13px}.product-motion-control>.eyebrow{padding-top:8px}.product-motion-control>.study-pause{font-size:.72rem}.footer-links{gap:20px}.footer-links .language-toggle{min-height:38px;font-size:.8rem}.site-footer{padding-bottom:25px}html[lang=ar] .site-header .brand{margin-left:0;margin-right:-14px}html[lang=ar] .hero-content{padding-top:152px}html[lang=ar] .hero h1{font-size:clamp(2.8rem,10vw,4.3rem);line-height:1.6;margin-top:20px}html[lang=ar] .hero-bottom{margin-top:25px}html[lang=ar] .hero-shade{background:linear-gradient(0deg,#0a1317 0%,#0a131766 46%,#0a131722 100%)}html[lang=ar] .hero-product-links>a{row-gap:4px;padding-block:15px}html[lang=ar] .hero-description>p{font-size:1rem}html[lang=ar] .hero-edge{gap:15px}html[lang=ar] #motion-toggle{font-size:.75rem}html[lang=ar] .scroll-cue{font-size:.72rem;gap:10px}html[lang=ar] .intro h2{font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.8}html[lang=ar] .section-title-row h2{font-size:2.1rem}html[lang=ar] .product-card h4{font-size:1.95rem}html[lang=ar] .product-card-copy>p{font-size:1rem}html[lang=ar] .principles-intro h2{font-size:2.8rem}html[lang=ar] .closing h2{font-size:clamp(1.8rem,6.9vw,2.8rem);line-height:1.6}html[lang=ar] .footer-brand{margin-right:-16px}html[lang=ar] .back-to-top{right:auto;left:0}html[lang=ar] .diagram-step{font-size:.76rem}html[lang=ar] .diagram-tick{font-size:.65rem}}
@media(max-width:370px){.site-header{padding-inline:14px;gap:7px}.site-header>.language-toggle{padding-inline:8px;font-size:.75rem}.site-header .brand{width:182px}.site-header .menu-toggle{width:38px;height:38px;padding:9px}html[lang=ar] .hero h1{font-size:10.8vw}html[lang=ar] .section-title-row h2{font-size:1.9rem}html[lang=ar] .product-card h4{font-size:1.7rem}.footer-links{gap:16px}html[lang=ar] .data-node{font-size:.7rem;padding-inline:7px}html[lang=ar] .portfolio-core{width:132px}}
html[lang=ar] .hero-product-links strong{text-align:right}