/* Native app captures inside scalable device and desktop-window mockups. */
.macbook-device{position:absolute;left:8%;top:48px;width:88%;transform:rotate(-1.5deg);filter:drop-shadow(0 24px 23px #453c2c35)}
.macbook-bezel{position:relative;background:linear-gradient(110deg,#7c7f7a,#202321 1.2%,#101310 98.5%,#737970);padding:16px 10px 0;border:1px solid #878b80;border-radius:17px 17px 6px 6px;box-shadow:inset 0 0 0 2px #363c33}
.macbook-webcam{position:absolute;top:6px;left:50%;width:4px;height:4px;border-radius:50%;background:#182928;box-shadow:inset 0 0 1px #658096}
.macbook-device .studio-window{position:relative;left:auto;top:auto;width:100%;transform:none;border-radius:5px 5px 0 0;box-shadow:none;border:0}
.macbook-device .camera-picture{aspect-ratio:1.78}
.macbook-chin{display:block;color:#8d9287;text-align:center;font:6px var(--sans);letter-spacing:.5px;line-height:21px;background:#171b17}
.macbook-base{height:23px;position:relative;margin:0 -6.5%;border-radius:2px 2px 42% 42% / 2px 2px 100% 100%;background:linear-gradient(#c8cac3 0%,#a4a9a0 20%,#d0d2ca 24%,#9fa49b 60%,#444c43 100%);box-shadow:0 3px 3px #40483933}
.macbook-base>span{position:absolute;width:16%;height:8px;left:42%;top:0;border-radius:0 0 8px 8px;background:linear-gradient(#747b70,#b9beb2);box-shadow:inset 1px -1px 1px #e5e8e0}
.hero-utility{position:absolute;left:-2%;top:43%;width:205px;background:#242424;z-index:3;padding:0;overflow:hidden;transform:rotate(-5deg);border:1px solid #51564c;border-radius:11px;box-shadow:0 19px 35px #352e2e33;text-align:left;transition:transform .2s,box-shadow .2s}
.hero-utility:hover{transform:rotate(-2deg) translateY(-4px);box-shadow:0 25px 40px #352e2e44}
.utility-titlebar{height:29px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 12px;background:#30332e;color:#cad1c3;font-size:8px;border-bottom:1px solid #f0f0e612}
.hero-utility img{width:100%;height:auto;background:#202020}.hero-utility-note{display:block;padding:11px 12px;color:#aab8a1;letter-spacing:.8px;font-size:6px;background:#242823}
.iphone-device{display:block;position:relative;padding:8px;background:linear-gradient(145deg,#94978e 0%,#51594d 10%,#adb1a5 28%,#6a7263 50%,#d0d3c9 72%,#535d4e 87%,#a4aa9c);border:1px solid #a8afa1;border-radius:35px;box-shadow:inset 0 0 0 2px #d0d3c499,inset 0 0 0 4px #32392e,8px 19px 24px #1823153b;isolation:isolate;transition:transform .2s}
.iphone-device:before{content:"";position:absolute;inset:5px;background:#050705;border-radius:29px;z-index:-1}
.iphone-display{display:block;position:relative;aspect-ratio:2868/1320;overflow:hidden;border-radius:26px;background:#000;box-shadow:0 0 0 2px #060806}
.iphone-display img{width:100%;height:100%;object-fit:contain}
.iphone-notch{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:11px;height:27%;border-radius:10px;background:#090b09;box-shadow:inset -1px 0 #252b2399}
.iphone-notch i{position:absolute;width:4px;height:4px;left:3px;top:8px;background:radial-gradient(#37555b,#10212b 60%,#050806 85%);border-radius:50%}
.iphone-buttons{position:absolute;top:-3px;left:15%;height:3px;width:12%;background:linear-gradient(#949d8a,#50594b);border-radius:3px 3px 0 0;box-shadow:70px 0 0 -1px #899180}
.iphone-antenna{position:absolute;top:0;bottom:0;left:12%;width:2px;border-top:6px solid #ccd1c3;border-bottom:6px solid #b1baaa;pointer-events:none}
.hero-iphone{position:absolute;right:-1%;bottom:7px;width:270px;transform:rotate(7deg);z-index:4}
.hero-iphone:hover{transform:rotate(4deg) translateY(-4px)}
.hero-stage .hero-sticker{left:3%;top:46px}.hero-stage .hero-sticker svg{width:42px}

dialog.screen-dialog{width:calc(100% - 48px);max-width:1050px;padding:30px}dialog.screen-dialog #dialog-content h2{font-size:29px}dialog.screen-dialog #dialog-content>p{font-size:11px;margin:13px 0 0}.screen-full-view{margin-top:23px;border-radius:8px;overflow:auto;max-height:65dvh;background:var(--screen-backing);text-align:center;overscroll-behavior:contain}.screen-full-view img{margin:0 auto;width:100%;height:auto;background:var(--screen-backing,#000)}.screen-full-view[data-shape=portrait] img{width:min(100%,500px)}.screen-full-view[data-shape=portrait]{background:#e1e5d8}.screen-full-view[data-shape=compact] img{width:min(100%,680px)}
@media(max-width:1100px) and (min-width:801px){.macbook-device{top:38px;left:7%;width:90%}.hero-utility{width:158px;left:-2%;top:39%}.hero-iphone{width:218px;bottom:15px}.hero-utility .utility-titlebar{font-size:6px;height:24px;padding-inline:8px}.hero-utility-note{font-size:5px;padding:8px}}
@media(max-width:800px){.macbook-device{width:88%;left:9%;top:31px}.hero-utility{width:205px;top:38%;left:0}.hero-iphone{width:270px;bottom:4px}}
@media(max-width:600px){.macbook-device{top:29px;left:7%;width:90%}.macbook-bezel{padding:10px 5px 0;border-radius:9px 9px 3px 3px;box-shadow:inset 0 0 0 1px #363c33}.macbook-webcam{width:3px;height:3px;top:4px}.macbook-chin{line-height:13px;font-size:4px}.macbook-base{height:11px;margin-inline:-5%}.macbook-base>span{height:4px}.window-bar{height:25px;font-size:5px;padding-inline:9px}.window-output{font-size:4px}.window-timeline{height:22px;font-size:4px}.hero-utility{width:141px;top:auto;bottom:13px;left:-1%;border-radius:7px;transform:rotate(-6deg)}.hero-utility .utility-titlebar{height:19px;font-size:5px;padding:0 7px;gap:4px}.hero-utility .traffic-lights{gap:3px}.hero-utility .traffic-lights i{height:4px;width:4px}.hero-utility-note{font-size:4px;padding:7px 6px;letter-spacing:.2px}.hero-iphone{width:185px;bottom:0;right:-1%;border-radius:22px;padding:5px}.hero-iphone:before{inset:3px;border-radius:18px}.hero-iphone .iphone-display{border-radius:15px}.hero-iphone .iphone-notch{width:6px;left:3px}.hero-iphone .iphone-notch i{width:2px;height:2px;left:2px;top:5px}.hero-iphone .iphone-buttons{height:2px;top:-2px}.feed-label,.camera-time{font-size:4px;top:10px}.feed-label{left:12px}.camera-time{right:12px}.picture-bottom{font-size:4px;bottom:10px;left:12px;right:12px}.viewfinder i{width:10px;height:10px}dialog.screen-dialog{padding:29px 19px 22px;width:calc(100% - 24px)}dialog.screen-dialog #dialog-content h2{font-size:24px}.screen-full-view{margin-top:18px}}
@media(max-width:360px){.hero-utility{width:126px;bottom:16px}.hero-iphone{width:162px;bottom:0}}
@media(prefers-reduced-motion:reduce){.hero-utility,.iphone-device{transition:none}.hero-utility:hover{transform:rotate(-5deg)}.hero-iphone:hover{transform:rotate(7deg)}}