/* Device frames for the real screens (phone and laptop) and the small props that stage them (photo prints, matrix cards, rings, language pills). */
.phone { /* phone body; every size follows --phone-width */
  --phone-width: 300px; /* overall width, set per use */
  position: relative; width: var(--phone-width); padding: calc(var(--phone-width) * 0.03); /* thin bezel */
  border-radius: calc(var(--phone-width) * 0.17); background: var(--world-deep, #0c0c0e); /* body takes the world's deep shade */
  box-shadow: inset 0 0 0 calc(var(--phone-width) * 0.006) rgb(255 255 255 / 0.22), /* metal rim highlight */
    0 calc(var(--phone-width) * 0.12) calc(var(--phone-width) * 0.18) calc(var(--phone-width) * -0.06) color-mix(in srgb, var(--world-deep, #000) 80%, transparent), /* near shadow */
    0 calc(var(--phone-width) * 0.4) calc(var(--phone-width) * 0.36) calc(var(--phone-width) * -0.16) color-mix(in srgb, var(--world-deep, #000) 55%, transparent); /* long soft shadow, tinted not grey */
}
.phone::before { content: ""; position: absolute; right: calc(var(--phone-width) * -0.012); top: 24%; width: calc(var(--phone-width) * 0.014); height: 11%; border-radius: 3px; background: color-mix(in srgb, var(--world-deep, #0c0c0e) 70%, #888); } /* power button */
.phone-display { position: relative; overflow: hidden; aspect-ratio: 390 / 844; border-radius: calc(var(--phone-width) * 0.14); background: var(--screen-status-color, #fff); } /* screen glass; the top band matches the page captured */
.phone-display::after { content: ""; position: absolute; top: 1.5%; left: 50%; width: 30%; height: 3.7%; transform: translateX(-50%); border-radius: 99px; background: #050506; z-index: 2; } /* dynamic island */
.phone-display.full-bleed::after { display: none; } /* app screenshots already include the island */
.screen-window { position: absolute; inset: auto 0 0; height: 93.6%; overflow: hidden; } /* the page area under the status band */
.full-bleed .screen-window { height: 100%; } /* app screenshots fill the glass */
.screen-window > img { width: 100%; height: auto; } /* a tall capture of the real page, moved by the playback */
.app-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* one app screen in a sequence */
.tilt-left { --tilt: -9deg; transform: rotate(var(--tilt)); } /* lean used across the panels */
.tilt-right { --tilt: 7deg; transform: rotate(var(--tilt)); } /* the opposite lean */
.laptop { --laptop-width: 620px; position: relative; width: var(--laptop-width); } /* laptop; sizes follow --laptop-width */
.laptop-lid { padding: calc(var(--laptop-width) * 0.022); border-radius: calc(var(--laptop-width) * 0.03) calc(var(--laptop-width) * 0.03) 6px 6px; background: #0b0814; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14); } /* screen bezel */
.laptop-display { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 4px; background: #120d24; } /* the screen; the code capture scrolls inside */
.laptop-display > img { width: 100%; height: auto; } /* the editor capture */
.laptop-base { position: relative; width: 114%; margin-left: -7%; height: calc(var(--laptop-width) * 0.035); border-radius: 2px 2px calc(var(--laptop-width) * 0.03) calc(var(--laptop-width) * 0.03); background: linear-gradient(#d9d4e8, #8d86a6); box-shadow: 0 30px 50px -18px color-mix(in srgb, var(--world-deep) 85%, transparent); } /* keyboard deck seen edge-on */
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 42%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #a39cbb; } /* thumb notch */
.prop { position: absolute; left: var(--prop-x, 50%); top: var(--prop-y, 50%); transform: translate(-50%, -50%) rotate(var(--prop-rotation, 0deg)); } /* centred at its point, then turned */
.print { width: var(--prop-width, 170px); padding: 6px 6px 22px; border-radius: 3px; background: #fbfaf6; box-shadow: 0 20px 34px -12px color-mix(in srgb, var(--world-deep) 70%, transparent); } /* a GourmetAI result as a photo print */
.print img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* the real photo */
.print figcaption { position: absolute; left: 10px; bottom: 4px; color: #3a3328; font: 500 12px var(--mono); } /* before or after label on the print */
.matrix-card { width: var(--prop-width, 180px); overflow: hidden; border-radius: 12px; background: #f6f0e6; box-shadow: 0 22px 34px -12px color-mix(in srgb, var(--world-deep) 75%, transparent); } /* a matrix card from the attention film */
.signal-rings { width: var(--prop-width, 900px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 46px, color-mix(in srgb, var(--world-tint) 36%, transparent) 46px 48px); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%); mask-image: radial-gradient(circle, #000 12%, transparent 68%); } /* signal rings behind the eSIM phone */
.language-pill { padding: 10px 18px; border-radius: 99px; background: var(--world-tint); color: var(--world-deep); font: 600 17px var(--body); box-shadow: 0 16px 28px -12px color-mix(in srgb, var(--world-deep) 80%, transparent); } /* one of the menu's three languages */