html.atelier-film-open{overflow:hidden}

#atelier-intro.atelier-intro{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:auto;
  overscroll-behavior:contain;
  isolation:isolate;
  background:#321b16;
  color:#f7f2e8;
  font:400 16px/1.5 Jost,Tajawal,Arial,sans-serif;
  box-shadow:none;
}
#atelier-intro[open]{display:grid;place-items:center}
#atelier-intro:not([open]),#atelier-intro [hidden]{display:none!important}
#atelier-intro::backdrop{background:#321b16;backdrop-filter:none}
#atelier-intro[data-stage="welcome"],#atelier-intro[data-stage="reveal"]{background:#f7f2e8;color:#321b16}
#atelier-intro .atelier-intro-surface{position:relative;width:100%;height:100%;min-height:100%}

#atelier-intro .atelier-intro-video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#321b16;
}
#atelier-intro[data-stage="welcome"] .atelier-intro-video,
#atelier-intro[data-stage="reveal"] .atelier-intro-video{visibility:hidden}

#atelier-intro .atelier-intro-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100%;
  padding:92px 28px 64px;
  padding-block-start:max(92px,calc(env(safe-area-inset-top) + 74px));
  padding-block-end:max(64px,calc(env(safe-area-inset-bottom) + 36px));
  background:#f7f2e8;
  color:#321b16;
  text-align:center;
}
#atelier-intro .atelier-intro-origin{
  margin:0 0 24px;
  color:#9b733f;
  font:500 11px/1.6 Jost,Tajawal,Arial,sans-serif;
  letter-spacing:2.6px;
  text-transform:uppercase;
}
#atelier-intro .atelier-intro-logo{
  display:block;
  width:min(330px,74vw);
  height:auto;
  max-height:190px;
  margin:0 0 30px;
  object-fit:contain;
  direction:ltr;
}
#atelier-intro .atelier-intro-title{
  max-width:780px;
  margin:0 0 34px;
  color:#321b16;
  font:500 clamp(36px,4.7vw,64px)/1.04 Cormorant,Georgia,serif;
  letter-spacing:-1.2px;
  text-wrap:balance;
}
#atelier-intro .atelier-intro-title>span,
#atelier-intro .atelier-intro-title>em{display:block}
#atelier-intro .atelier-intro-title>em{font-weight:500;color:#9b733f}
#atelier-intro .atelier-intro-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px 30px;
  max-width:100%;
}
#atelier-intro .atelier-intro-start,
#atelier-intro .atelier-intro-continue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:50px;
  max-width:100%;
  padding:13px 27px;
  border:1px solid #321b16;
  border-radius:3px;
  background:#321b16;
  color:#f7f2e8;
  font:500 15px/1.5 Jost,Tajawal,Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
#atelier-intro .atelier-intro-start:hover,
#atelier-intro .atelier-intro-continue:hover{border-color:#582c36;background:#582c36}
#atelier-intro .atelier-intro-silent{
  min-height:46px;
  max-width:100%;
  padding:10px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#321b16;
  font:400 14px/1.5 Jost,Tajawal,Arial,sans-serif;
  text-decoration:underline;
  text-decoration-color:#9b733f;
  text-underline-offset:5px;
  cursor:pointer;
}
#atelier-intro .atelier-intro-silent:hover{text-decoration-thickness:2px}

#atelier-intro .atelier-intro-controls{
  position:fixed;
  z-index:3;
  inset-block-start:max(22px,env(safe-area-inset-top));
  inset-inline-end:max(24px,env(safe-area-inset-right));
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  max-width:calc(100% - 40px);
  margin:0;
  padding:0;
  color:#321b16;
}
#atelier-intro .atelier-intro-controls button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid #321b1633;
  border-radius:3px;
  background:#f7f2e8ed;
  color:inherit;
  font:400 12px/1.4 Jost,Tajawal,Arial,sans-serif;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
#atelier-intro .atelier-intro-controls button:hover{border-color:#9b733f;background:#e9dfce}
#atelier-intro[data-stage="playing"] .atelier-intro-controls{color:#f7f2e8}
#atelier-intro[data-stage="playing"] .atelier-intro-controls button{border-color:#f7f2e85c;background:#1b0d0bbd}
#atelier-intro[data-stage="playing"] .atelier-intro-controls button:hover{border-color:#f7f2e8;background:#321b16ed}
#atelier-intro .atelier-intro-controls svg{width:17px;height:17px;flex-shrink:0}

#atelier-intro .atelier-intro-progress{
  position:fixed;
  z-index:3;
  inset: auto 0 0;
  height:3px;
  overflow:hidden;
  background:#f7f2e830;
  pointer-events:none;
}
#atelier-intro .atelier-intro-progress>span{
  display:block;
  width:0;
  height:100%;
  background:#cfa86f;
  transition:width .16s linear;
}
#atelier-intro .atelier-intro-status{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
#atelier-intro button:focus-visible,
#atelier-intro a:focus-visible{outline:3px solid #9b733f;outline-offset:4px}
#atelier-intro[data-stage="playing"] button:focus-visible{outline-color:#f7f2e8}
#atelier-intro .atelier-intro-title:focus{outline:none}

footer .atelier-film-replay{
  display:inline-block;
  min-height:44px;
  margin:4px 0 0;
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#f7f2e8;
  font:400 14px/1.5 Jost,Tajawal,Arial,sans-serif;
  text-align:start;
  text-decoration:underline;
  text-decoration-color:#b5945d;
  text-underline-offset:5px;
  cursor:pointer;
}
footer .atelier-film-replay:hover{text-decoration-thickness:2px}
footer .atelier-film-replay:focus-visible{outline:3px solid #b5945d;outline-offset:4px}

html[dir="rtl"] #atelier-intro,
html[dir="rtl"] #atelier-intro button,
html[dir="rtl"] footer .atelier-film-replay{font-family:Tajawal,Jost,Arial,sans-serif}
html[dir="rtl"] #atelier-intro .atelier-intro-origin{letter-spacing:0}
html[dir="rtl"] #atelier-intro .atelier-intro-title{font-family:Tajawal,Arial,sans-serif;line-height:1.4;letter-spacing:0;font-size:clamp(30px,3.5vw,46px)}
html[dir="rtl"] #atelier-intro .atelier-intro-title>em{font-style:normal}

@media(max-width:600px){
  #atelier-intro .atelier-intro-card{padding-inline:24px}
  #atelier-intro .atelier-intro-origin{font-size:10px;letter-spacing:2px;margin-bottom:19px}
  #atelier-intro .atelier-intro-logo{width:min(285px,74vw);max-height:164px;margin-bottom:24px}
  #atelier-intro .atelier-intro-title{max-width:370px;font-size:clamp(34px,8.6vw,43px);letter-spacing:-.6px;margin-bottom:29px}
  #atelier-intro .atelier-intro-actions{gap:12px 22px}
  #atelier-intro .atelier-intro-start,#atelier-intro .atelier-intro-continue{font-size:14px;padding-inline:22px}
  #atelier-intro .atelier-intro-controls{inset-block-start:max(14px,env(safe-area-inset-top));inset-inline-end:max(14px,env(safe-area-inset-right));gap:6px;max-width:calc(100% - 28px)}
  #atelier-intro .atelier-intro-controls button{padding:10px 12px;font-size:11px;gap:6px}
  html[dir="rtl"] #atelier-intro .atelier-intro-title{font-size:clamp(28px,7.5vw,35px)}
}
@media(max-height:560px) and (orientation:landscape){
  #atelier-intro .atelier-intro-card{padding:68px 24px 24px}
  #atelier-intro .atelier-intro-origin{margin-bottom:5px;font-size:9px}
  #atelier-intro .atelier-intro-logo{width:170px;max-height:94px;margin-bottom:9px}
  #atelier-intro .atelier-intro-title{font-size:31px;margin-bottom:18px}
  #atelier-intro .atelier-intro-start,#atelier-intro .atelier-intro-continue{min-height:44px;padding-block:10px}
  html[dir="rtl"] #atelier-intro .atelier-intro-title{font-size:26px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){
  #atelier-intro *,#atelier-intro *::before,#atelier-intro *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

#atelier-intro .atelier-intro-loading{position:absolute;z-index:2;inset-inline:20px;inset-block-end:12%;margin:0;padding:12px;text-align:center;color:#f7f2e8;background:#321b16c9;font:400 14px/1.5 Jost,Tajawal,Arial,sans-serif}