/* One phone shell for Alia, shared by the case study embed and phone.html.
   The app inside keeps its full 393×852 geometry and is scaled, never cropped. */
.al-shell { position: relative; box-sizing: border-box; width: min(410px, 100%); aspect-ratio: 410 / 872; padding: 10px; border-radius: 40px; background: #0e0d14; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20), 0 32px 64px -36px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.35); }
.al-shell::after { content: ''; position: absolute; top: 108px; left: -3px; width: 3px; height: 54px; border-radius: 3px 0 0 3px; background: #24232b; box-shadow: 0 70px 0 #24232b; pointer-events: none; }
.al-shell--fit { width: min(410px, 40.6vh, 100%); height: auto; max-width: 100%; }
.al-viewport { position: relative; width: 100%; aspect-ratio: 393 / 852; overflow: hidden; border-radius: 30px; background: #FEFEFE; }
.al-viewport > iframe { position: absolute; top: 0; left: 0; width: 393px; height: 852px; border: 0; display: block; background: #FAFAFA; transform-origin: 0 0; transform: translate(var(--dv-x, 0px), 0) scale(var(--dv-s, 1)); }
@media (max-width: 680px) {
  .al-shell--fit { width: 100%; }
  .al-shell { aspect-ratio: 393 / 852; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .al-shell::after { content: none; }
  .al-viewport { border-radius: 0; }
  .al-viewport > iframe { width: 100%; height: 100%; transform: none; }
}