/* Phone layout refinement: a larger, self-contained device without nested scrolling. */
#katercon-studio-v4 .ks-phone-fold{
  width:min(100%,396px);
  height:736px;
}
#katercon-studio-v4 .ks-lab{
  --phone-width:396px;
}

#katercon-studio-v4 .ks-phone-fold .ks-computer{
  position:relative;
  isolation:isolate;
}

/* Every state is composed inside the screen rather than asking the visitor to
   scroll a second, smaller page inside the phone. */
#katercon-studio-v4 .ks-phone-fold :is(.ks-pc-workspace,.ks-desktop,.ks-pc-window){
  overflow:hidden;
  scrollbar-width:none;
}
#katercon-studio-v4 .ks-phone-fold .ks-desktop{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
#katercon-studio-v4 .ks-phone-fold .ks-copy-page{
  display:flex;
  min-height:0;
  padding-inline:28px;
}
#katercon-studio-v4 .ks-phone-fold .ks-copy-content{
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  justify-content:center;
}
#katercon-studio-v4 .ks-phone-fold .ks-copy-content p{
  max-width:34ch;
}
#katercon-studio-v4 .ks-phone-fold .ks-pc-window{
  display:grid;
  grid-template-rows:48px minmax(0,1fr);
}
#katercon-studio-v4 .ks-phone-fold .ks-window-bar{
  min-height:48px;
}
#katercon-studio-v4 .ks-phone-fold :is(.ks-mail-app,.ks-calculator-app,.ks-phone-social-app,.ks-phone-photos-app){
  min-height:0;
  overflow:hidden;
}
#katercon-studio-v4 .ks-phone-fold .ks-pc-form{
  display:grid;
  gap:12px;
  padding:16px;
}
#katercon-studio-v4 .ks-phone-fold .ks-form-pair{
  gap:12px;
}
#katercon-studio-v4 .ks-phone-fold .ks-compose-message{
  margin:0;
}
#katercon-studio-v4 .ks-phone-fold textarea{
  min-height:88px;
  resize:none;
}
#katercon-studio-v4 .ks-phone-fold .ks-phone-photo-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#katercon-studio-v4 .ks-phone-fold .ks-phone-photo-grid img{
  height:128px;
  aspect-ratio:auto;
  object-fit:cover;
}
#katercon-studio-v4 .ks-phone-fold .ks-phone-photo-grid figcaption{
  min-width:0;
  max-inline-size:100%;
  overflow-wrap:anywhere;
}

/* The shutdown canvas sits above the complete device, including its top and dock. */
#katercon-studio-v4 .ks-phone-fold .ks-tv-static{
  position:absolute;
  z-index:30;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  background:#747774;
  image-rendering:pixelated;
  opacity:1;
  pointer-events:none;
  transform-origin:center;
}
#katercon-studio-v4 .ks-phone-fold .ks-computer[data-pc-state="shuttingDown"] > :not(.ks-tv-static){
  visibility:hidden;
}

@media (max-width:767px){
  #katercon-studio-v4 .ks-phone-fold{
    height:720px;
  }
  #katercon-studio-v4 .ks-phone-fold .ks-copy-content{
    justify-content:flex-start;
  }
  #katercon-studio-v4 .ks-phone-fold .ks-copy-page{
    padding-inline:24px;
  }
}

@media (max-width:375px){
  #katercon-studio-v4 .ks-phone-fold{
    height:720px;
  }
  #katercon-studio-v4 .ks-phone-fold .ks-dock{
    gap:0;
    padding-inline:0;
  }
  #katercon-studio-v4 .ks-phone-fold .ks-dock-app{
    flex-basis:44px;
    width:44px;
    min-width:44px;
    min-height:44px;
  }
  #katercon-studio-v4 .ks-phone-fold .ks-dock-divider{
    margin-inline:0;
  }
  #katercon-studio-v4 .ks-phone-fold .ks-copy-tabs button{
    min-height:44px;
  }
}

@media (prefers-reduced-motion:reduce){
  #katercon-studio-v4 .ks-phone-fold .ks-tv-static{
    animation:none;
  }
}