/* 2026-10-16: Image Studio first-image editorial layout.
   The existing composer and credit-quote workflow remain authoritative. */
#app.image-studio-active .image-gallery-shell:has(#lab-welcome-start:not([hidden])){
  isolation:isolate;min-height:max(calc(100dvh - 115px),760px);
  background:#090b11;
}
/* The desktop backdrop is reconstructed from the user-approved Image Studio
   visual reference, not an enlarged Mood card. The photograph retains its
   original blue streaks and warm right-hand details. No CSS blur or saturation filter. */
#app.image-studio-active .image-gallery-shell:has(#lab-welcome-start:not([hidden])):before{
  content:"";position:absolute;inset:0 0 auto;height:min(800px,100dvh);
  z-index:0;pointer-events:none;
  background-image:url("./welcome-cards/image-studio-blue-amber-reference.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  opacity:1;filter:none;transform:none;
}
/* Retain only a restrained dark fade under the cards. The backdrop itself
   already includes the cool blue and warm photographic tones. */
#app.image-studio-active .image-gallery-shell:has(#lab-welcome-start:not([hidden])):after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,13,.02),transparent 27%,rgba(8,9,12,.06) 49%,#101011 100%);
}
@media(max-width:700px){
  #app.image-studio-active .image-gallery-shell:has(#lab-welcome-start:not([hidden])):before{
    background-size:auto 560px;background-position:36% top;
  }
}
#app.image-studio-active .image-gallery-empty:has(#lab-welcome-start:not([hidden])){
  inset:54px 0 190px;position:absolute;display:flex;justify-content:center;
  padding:0 clamp(20px,2.55vw,48px);overflow:visible;z-index:1;pointer-events:none
}
#app.image-studio-active .image-gallery-empty:has(#lab-welcome-start:not([hidden]))>*{pointer-events:auto}
#app.image-studio-active #lab-welcome-start:not([hidden]){
  display:flex;width:100%!important;max-width:none!important;margin:0 auto;padding:0;align-items:center
}
#app.image-studio-active #lab-welcome-start .lab-welcome-kicker{
  color:#9d9b99;font-size:10px;letter-spacing:.36em;line-height:1.6
}
#app.image-studio-active #lab-welcome-start h2{
  margin:14px 0 0!important;font-size:clamp(31px,3vw,46px)!important;
  font-weight:400;line-height:1.1;letter-spacing:-.044em;color:#f6f5f4
}
#app.image-studio-active #lab-welcome-start .lab-welcome-subtitle{
  margin:13px 0 0!important;color:#adaba9;font-size:clamp(12px,.88vw,14px)!important;line-height:1.5
}
#app.image-studio-active #lab-welcome-start .lab-welcome-balance{
  margin:14px 0 0!important;font-size:12px!important;letter-spacing:0;color:#c0bebb
}
#app.image-studio-active #lab-welcome-start .lab-welcome-balance strong{
  color:#f4f3f2;font-size:inherit;font-weight:670
}
#app.image-studio-active #lab-welcome-start .lab-welcome-presets{
  width:100%!important;max-width:1610px;display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:clamp(9px,1.03vw,18px)!important;
  margin:21px auto 0!important;padding:0
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset{
  -webkit-appearance:none;appearance:none;display:block!important;
  position:relative;isolation:isolate;box-sizing:border-box;
  width:100%;min-width:0;height:clamp(265px,41vh,391px);
  min-height:0!important;padding:0!important;margin:0;overflow:hidden;
  cursor:pointer;text-align:left;background:#171819;
  border:1px solid rgba(235,232,229,.25);border-radius:13px;
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  transition:border-color .2s,box-shadow .2s,transform .2s
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset>img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center center;border-radius:inherit;
  filter:brightness(.91);transition:filter .25s,transform .4s
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:nth-child(2)>img{object-position:51% center}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:nth-child(3)>img{object-position:64% center}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:nth-child(5)>img{object-position:50% center}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:after{
  content:"";position:absolute;inset:38% 0 0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 24%,rgba(0,0,0,.12) 53%,rgba(0,0,0,.63))
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset>strong{
  position:absolute;left:clamp(13px,1.2vw,20px);right:10px;bottom:20px;z-index:2;
  display:block;color:#fbf9f5;font-size:clamp(15px,1.25vw,21px)!important;
  font-weight:430!important;letter-spacing:-.035em;line-height:1.2;
  text-shadow:0 2px 16px rgba(0,0,0,.7);white-space:nowrap
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:hover,
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:focus-visible{
  transform:translateY(-3px);border-color:rgba(255,247,236,.85);
  box-shadow:0 0 0 1px rgba(252,246,239,.4),0 14px 30px rgba(0,0,0,.44)
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:hover>img{
  filter:brightness(1);transform:scale(1.025)
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:focus-visible{
  outline:2px solid #f4eee6;outline-offset:4px
}
#app.image-studio-active #lab-welcome-start .lab-welcome-preset[aria-pressed="true"],
#app.image-studio-active #lab-welcome-start .lab-welcome-preset:first-child:not([aria-pressed="true"]){
  border-color:#f0ddd0;
  box-shadow:0 0 0 1px rgba(255,240,223,.64),0 0 18px rgba(234,204,172,.26),0 18px 40px rgba(0,0,0,.47)
}
#app.image-studio-active #lab-welcome-start:has(.lab-welcome-preset[aria-pressed="true"])
.lab-welcome-preset:first-child:not([aria-pressed="true"]){
  border-color:rgba(235,232,229,.25);box-shadow:0 12px 36px rgba(0,0,0,.28)
}
#app.image-studio-active #lab-welcome-start .lab-welcome-hint{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  padding:0!important;margin:-1px!important;border:0;
  clip:rect(0,0,0,0);white-space:nowrap
}
#app.image-studio-active:has(#lab-welcome-start:not([hidden])) #image-composer{
  width:min(1055px,calc(100vw - 44px));
  background:linear-gradient(135deg,rgba(34,34,34,.97),rgba(24,24,24,.98));
  border-color:rgba(223,221,217,.25);border-radius:22px;
  box-shadow:0 18px 65px rgba(0,0,0,.65)
}
#app.image-studio-active:has(#lab-welcome-start:not([hidden])) #image-composer .composer-generate{
  min-height:65px;min-width:138px;border-radius:13px
}
@media(max-width:1150px){
  #app.image-studio-active .image-gallery-shell:has(#lab-welcome-start:not([hidden])){
    min-height:calc(100dvh + 200px)
  }
  #app.image-studio-active .image-gallery-empty:has(#lab-welcome-start:not([hidden])){
    position:relative;inset:auto!important;padding:55px 22px 230px;min-height:0
  }
  #app.image-studio-active #lab-welcome-start .lab-welcome-presets{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:860px
  }
  #app.image-studio-active #lab-welcome-start .lab-welcome-preset{
    height:clamp(255px,34vw,340px)
  }
}
@media(max-width:680px){
  #app.image-studio-active .image-gallery-empty:has(#lab-welcome-start:not([hidden])){
    padding:42px 15px 255px
  }
  #app.image-studio-active #lab-welcome-start h2{
    font-size:clamp(27px,6.5vw,36px)!important;letter-spacing:-.04em
  }
  #app.image-studio-active #lab-welcome-start .lab-welcome-subtitle{
    max-width:350px;margin-top:12px!important;font-size:12px!important
  }
  #app.image-studio-active #lab-welcome-start .lab-welcome-presets{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
    margin-top:21px!important
  }
  #app.image-studio-active #lab-welcome-start .lab-welcome-preset{
    height:clamp(225px,66vw,310px);border-radius:11px
  }
  #app.image-studio-active #lab-welcome-start .lab-welcome-preset>strong{
    bottom:14px;left:13px;font-size:17px!important
  }
  #app.image-studio-active:has(#lab-welcome-start:not([hidden])) #image-composer{
    width:calc(100vw - 18px)
  }
}
@media(max-width:390px){
  #app.image-studio-active #lab-welcome-start .lab-welcome-preset{height:220px}
  #app.image-studio-active #lab-welcome-start .lab-welcome-preset>strong{font-size:15px!important}
}
@media(prefers-reduced-motion:reduce){
  #app.image-studio-active #lab-welcome-start .lab-welcome-preset,
  #app.image-studio-active #lab-welcome-start .lab-welcome-preset>img{transition:none!important}
}