@font-face{font-family:NotoArabic;src:url('assets/noto-arabic.ttf') format('truetype');font-weight:100 900;font-display:swap}
html[lang=ar]{font-family:NotoArabic,Tahoma,Arial,sans-serif}
[lang=ar] body,[lang=ar] button,[lang=ar] .label,[lang=ar] .fine{font-family:NotoArabic,Tahoma,Arial,sans-serif;letter-spacing:0}
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] .label,[lang=ar] .guide-sticker{font-family:NotoArabic,Tahoma,Arial,sans-serif;letter-spacing:0}
[lang=ar] h2{line-height:1.4;font-weight:700;font-size:clamp(36px,4.7vw,68px)}
[lang=ar] h3{line-height:1.55;font-weight:700}
[lang=ar] p{line-height:1.9}
[lang=ar] .hero h1{font-family:NotoArabic,Tahoma,sans-serif;letter-spacing:-2px;line-height:1.55;font-size:clamp(65px,7vw,112px)}
[lang=ar] .hero .line{overflow:visible}
[lang=ar] .wordmark,[lang=ar] .footer-logo,[lang=ar] .studio-mark{direction:ltr;font-family:Syne,Arial,sans-serif}
[lang=ar] .header nav{margin-left:0;margin-right:auto}
[lang=ar] .header-caption{margin-left:0;margin-right:12px;letter-spacing:0}
[lang=ar] .menu-trigger{margin-left:0;margin-right:8px}
[lang=ar] .theme-track,[lang=ar] .native-board,[lang=ar] .gem-targets{direction:ltr}
[lang=ar] .hero-art{left:-70px;right:auto}
[lang=ar] .hero-title{margin-top:36px}
[lang=ar] .hero-film{text-align:right}
[lang=ar] .hero-film b{margin-left:0;margin-right:20px}
[lang=ar] .art-caption{right:auto;left:56px}
[lang=ar] .scroll-cue{left:auto;right:56px;letter-spacing:0}
[lang=ar] .status-dot{margin-right:0;margin-left:8px}
[lang=ar] .path-card,[lang=ar] .tutorial-choices>button,[lang=ar] .faqs summary{text-align:right}
[lang=ar] .path-foot,[lang=ar] .back-top,[lang=ar] .level-size{letter-spacing:0}
[lang=ar] .guide-sticker{line-height:1.55;left:-25px;right:auto}
[lang=ar] .guide-label{left:auto;right:30px;text-align:right}
[lang=ar] .game-heading>p{text-align:left}
[lang=ar] .puzzle-instructions p{line-height:1.75}
[lang=ar] .puzzle-instructions strong{font-size:17px}
[lang=ar] .studio-left h2{line-height:1.5}
[lang=ar] .studio-right>p{line-height:1.85}
[lang=ar] .studio-marquee{direction:ltr}
[lang=ar] .studio-marquee span{font-family:NotoArabic,Tahoma,sans-serif;letter-spacing:0;font-size:.8em}
[lang=ar] .contact-link{direction:ltr;unicode-bidi:isolate}
[lang=ar] .menu-body>a>span{margin-left:0;margin-right:auto}
[lang=ar] .menu-body>a>small{margin-right:0;margin-left:18px}
[lang=ar] .film-picker,[lang=ar] .film-dialog-top{gap:16px}
[lang=ar] .footer-top p{line-height:1.7}
@media(max-width:760px){
  [lang=ar] .hero h1{font-size:clamp(43px,12vw,72px);letter-spacing:0;line-height:1.4;font-weight:750}
  [lang=ar] .hero-title{margin-top:24px}
  [lang=ar] .hero-art{inset:auto}
  [lang=ar] .hero-intro p{font-size:15px;line-height:1.95;max-width:none}
  [lang=ar] .scroll-cue{position:static}
  [lang=ar] .guide-sticker{left:-7px;right:auto}
  [lang=ar] .section-dock a{font-size:11px;padding:5px 0;line-height:1.5;letter-spacing:0}
  [lang=ar] .theme-toggle [data-theme-label]{min-width:74px}
  [lang=ar] .menu-body>a{font-size:20px}
}

/* Arabic is composed for its own rhythm and reading direction. */
[lang=ar] .hero-intro .button{padding-inline:22px 7px}
[lang=ar] .title-star{margin-left:0;margin-right:14px}
[lang=ar] .path-card h3,[lang=ar] .path-card p{letter-spacing:0}
[lang=ar] .section-dock{direction:rtl}
[lang=ar] .theme-track{direction:ltr}
[lang=ar] .steps{padding-inline:0}
[lang=ar] .steps li>span{font-family:Manrope,Arial,sans-serif}
[lang=ar] .footer-bottom>span:nth-child(2){text-align:start;letter-spacing:0}
@media(max-width:760px){
  [lang=ar] .header{flex-direction:row;justify-content:space-between}
  [lang=ar] .menu-trigger{margin:0;gap:12px;font-size:13px;padding:10px 18px;line-height:1.6}
  [lang=ar] .hero .label{font-size:11px;line-height:1.8;letter-spacing:0}
  [lang=ar] .hero-title{margin-top:22px}
  [lang=ar] .hero-intro{margin-top:22px}
  [lang=ar] .hero-intro p br{display:none}
  [lang=ar] .hero-intro .button{font-size:14px;gap:22px}
  [lang=ar] .hero-film>span:last-child{font-size:16px;line-height:1.6}
  [lang=ar] .hero-film small{font-size:11px;letter-spacing:0;margin-bottom:5px}
  [lang=ar] .hero-film b{margin-right:12px}
  [lang=ar] .scroll-cue{font-size:11px;letter-spacing:0}
  [lang=ar] .start-heading h2,[lang=ar] .library-heading h2,[lang=ar] .learn-heading h2,[lang=ar] .studio-left h2,[lang=ar] .help-copy h2{font-size:clamp(30px,8.8vw,44px);line-height:1.55;letter-spacing:0;font-weight:700}
  [lang=ar] .start-heading,[lang=ar] .library-heading,[lang=ar] .learn-heading{margin-block:30px 28px}
  [lang=ar] .start-heading p,[lang=ar] .library-heading p{margin-top:18px;font-size:15px;line-height:1.95}
  [lang=ar] .start-heading p br,[lang=ar] .library-heading p br,[lang=ar] .help-copy p br{display:none}
  [lang=ar] .section-top{gap:12px;align-items:center}
  [lang=ar] .section-top .label,[lang=ar] .path-top .label{font-size:10px;letter-spacing:0;line-height:1.8}
  [lang=ar] .path-card{padding:22px;grid-template-columns:minmax(0,1fr) 54px;gap:0 12px}
  [lang=ar] .path-symbol{width:52px;height:52px;margin:28px 0 0}
  [lang=ar] .path-card h3{font-size:22px;line-height:1.6;margin-top:20px}
  [lang=ar] .path-card p{font-size:14px;line-height:1.9;margin-block:8px 22px}
  [lang=ar] .path-foot{font-size:11px;letter-spacing:0;padding-top:16px}
  [lang=ar] .game-heading h2{font-family:Syne,Arial,sans-serif;font-size:clamp(31px,9vw,48px);letter-spacing:-1px;display:flex;align-items:center;direction:ltr;justify-content:flex-end;gap:12px}
  [lang=ar] .game-heading h2 .title-star{margin:0;flex:none}
  [lang=ar] .game-heading>p{font-size:15px;text-align:right;line-height:1.8;margin-top:12px}
  [lang=ar] .game-panel{padding:28px 22px}
  [lang=ar] .game-panel h3{font-size:34px;line-height:1.55;letter-spacing:0;margin-block:18px}
  [lang=ar] .game-panel>p{font-size:15px;line-height:2}
  [lang=ar] .game-tags{gap:8px}.game-tags span{line-height:1.6}
  [lang=ar] .film-card-caption strong{font-family:Manrope,Arial,sans-serif;font-size:16px;direction:ltr;display:block;text-align:right}
  [lang=ar] .film-card-caption>span{font-size:12px;line-height:1.8}
  [lang=ar] .tabs button{font-size:12px;padding:12px 7px;line-height:1.8}
  [lang=ar] .guide-visual{height:390px;padding:24px 18px;display:grid;grid-template-columns:minmax(0,1fr) 95px;gap:14px;align-items:center}
  [lang=ar] .guide-button{width:100%;height:335px;transform:rotate(3deg)}
  [lang=ar] .guide-sticker{position:relative;inset:auto;transform:rotate(-6deg);font-size:15px;line-height:1.65;padding:14px 10px;letter-spacing:0}
  [lang=ar] .guide-sticker>span{display:block;margin-top:10px}
  [lang=ar] .guide-label{right:14px;left:14px;bottom:20px}
  [lang=ar] .guide-label strong{font-size:18px;line-height:1.7;letter-spacing:0}
  [lang=ar] .guide-label>span:last-child{font-size:11px}
  [lang=ar] .guide-copy h3,[lang=ar] .sample-copy h3{font-size:31px;line-height:1.6;letter-spacing:0}
  [lang=ar] .guide-copy>p,[lang=ar] .sample-copy>p,[lang=ar] .steps p{font-size:15px;line-height:1.95}
  [lang=ar] .steps h4{font-size:17px;line-height:1.7;letter-spacing:0}
  [lang=ar] .steps li{gap:14px}
  [lang=ar] .tutorial-choices>button{padding:14px 12px;gap:12px;grid-template-columns:38px minmax(0,1fr) 26px}
  [lang=ar] .tutorial-choices strong{font-size:14px;line-height:1.8}
  [lang=ar] .tutorial-choices small{font-size:12px;line-height:1.9}
  [lang=ar] .puzzle-shell{padding:20px 14px}
  [lang=ar] .puzzle-shell h4{font-size:23px;line-height:1.6;letter-spacing:0}
  [lang=ar] .puzzle-top{flex-wrap:wrap;gap:8px}
  [lang=ar] .puzzle-instructions strong{font-size:15px;line-height:1.8}
  [lang=ar] .puzzle-instructions p>span{font-size:12px;line-height:1.9}
  [lang=ar] .puzzle-bottom .button{font-size:13px;padding-inline:15px}
  [lang=ar] .puzzle-bottom .text-button{font-size:13px}
  [lang=ar] .studio-mark{display:none}
  [lang=ar] .studio-right>p,[lang=ar] .studio-right>p.subtle{font-size:16px;line-height:2}
  [lang=ar] .studio-values{font-size:13px;line-height:1.9;gap:12px}
  [lang=ar] .faqs summary{font-size:16px;line-height:1.8;gap:16px}
  [lang=ar] .faqs p{font-size:15px;line-height:2;padding-inline-end:0}
  [lang=ar] .footer-top p{font-size:14px;line-height:1.9}
  [lang=ar] .back-top{font-size:10px;gap:10px}
  [lang=ar] .footer-bottom{font-size:12px;line-height:1.8}
  [lang=ar] .footer-bottom>span:nth-child(2){font-size:12px}
  [lang=ar] .legal-links a{font-size:12px}
  [lang=ar] .menu-body>a{font-size:19px;line-height:1.8;letter-spacing:0;gap:12px;padding-block:16px}
  [lang=ar] .menu-body>a>small{margin:0;font-size:10px}
}

@media(max-width:760px){
  [lang=ar] .hero h1{font-size:clamp(37px,10.6vw,62px);line-height:1.4}
  [lang=ar] .hero-title{margin-top:18px}
  [lang=ar] .hero-intro{margin-top:18px}
  [lang=ar] .hero-intro p{font-size:14px;line-height:1.85}
  [lang=ar] .hero-intro .button{font-size:13px;padding-inline:19px 5px}
  [lang=ar] .hero-film>span:last-child{font-size:14px}
  [lang=ar] .hero-film small{font-size:10px;margin-bottom:3px}
  [lang=ar] .scroll-cue{font-size:10px}
  [lang=ar] .start-heading h2,[lang=ar] .library-heading h2,[lang=ar] .learn-heading h2,[lang=ar] .studio-left h2,[lang=ar] .help-copy h2{font-size:clamp(28px,7.8vw,39px);line-height:1.5}
  [lang=ar] .start-heading,[lang=ar] .library-heading,[lang=ar] .learn-heading{margin-block:24px}
  [lang=ar] .start-heading p,[lang=ar] .library-heading p,[lang=ar] .guide-copy>p,[lang=ar] .sample-copy>p,[lang=ar] .steps p,[lang=ar] .game-panel>p,[lang=ar] .faqs p{font-size:14px;line-height:1.9}
  [lang=ar] .path-card{padding:18px 20px}.path-card h3{line-height:1.5}
  [lang=ar] .path-card h3{font-size:20px;margin-top:15px}
  [lang=ar] .path-card p{font-size:13px;line-height:1.8;margin-bottom:16px}
  [lang=ar] .path-symbol{margin-top:22px}
  [lang=ar] .game-panel h3{font-size:29px;line-height:1.5}
  [lang=ar] .guide-copy h3,[lang=ar] .sample-copy h3{font-size:27px;line-height:1.55}
  [lang=ar] .guide-visual{height:345px;grid-template-columns:minmax(0,1fr) 88px;padding:18px;gap:12px}
  [lang=ar] .guide-button{height:305px}
  [lang=ar] .guide-sticker{font-size:14px;padding:12px 9px}
  [lang=ar] .steps h4{font-size:16px}
  [lang=ar] .tutorial-choices strong{font-size:13px}.tutorial-choices small{font-size:11px}
  [lang=ar] .studio-right>p,[lang=ar] .studio-right>p.subtle{font-size:14px;line-height:1.95}
  [lang=ar] .faqs summary{font-size:15px;line-height:1.8}
}