/* The portrait retains its natural aspect ratio at every canvas width. */
.omni-person{height:auto;aspect-ratio:2/3;overflow:visible;border-radius:0;bottom:0}
.omni-person img{position:relative;bottom:auto;left:auto;width:100%;height:auto;clip-path:inset(0 0 0 0 round 0 0 46% 46%)}
.omni-person>span{inset:auto 0 0;height:64%;border-radius:50%}
/* Metal rail, recessed display, floating camera island and physical side keys. */
.omni-device{position:absolute;left:25%;top:14px;width:min(60%,300px);height:610px;z-index:0;border-radius:47px;padding:6px;background:linear-gradient(110deg,#78828d 0%,#e0e5e9 2%,#77818b 4%,#29323b 8%,#111820 45%,#acb3bc 96%,#d5dbe0 98%,#626d78 100%);box-shadow:0 0 0 1px #6a7582,0 1px 0 2px #d4d9df,14px 22px 46px #1223331a}
.omni-device:before{content:'';position:absolute;left:-3px;top:124px;width:3px;height:47px;border-radius:3px 0 0 3px;background:linear-gradient(#b7bfc7,#6e7883,#bec5cb);box-shadow:0 58px 0 #7a8590,0 -38px 0 -1px #8c969e}
.omni-device:after{content:'';position:absolute;right:-3px;top:165px;width:3px;height:65px;border-radius:0 3px 3px 0;background:linear-gradient(#c0c7ce,#636f7b,#c0c7ce)}
.omni-device .omni-phone{position:relative;left:auto;top:auto;width:100%;height:100%;padding:0;border:3px solid #10161d;border-radius:41px;box-shadow:0 0 0 1px #05090d;background:#fff;overflow:hidden}
.omni-device .omni-phone:before{content:'';position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:93px;height:4px;border-radius:8px;background:#192628;z-index:3}
.omni-device .omni-island{top:10px;height:24px;width:83px;border-radius:20px;background:#080c11;z-index:2;box-shadow:inset 0 0 0 1px #1e2831}
.omni-island:after{content:'';position:absolute;right:9px;top:8px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#23496b,#101b2b 48%,#080e17 70%);box-shadow:0 0 0 2px #0b1119}
.omni-device .omni-status{height:47px;padding:17px 18px 0;font-size:10px;line-height:13px}
.omni-status-icons{display:flex;align-items:center;gap:5px;height:11px}
.omni-signal{display:flex;align-items:end;gap:1px;height:9px}
.omni-signal b{width:2px;height:4px;background:#172b34;border-radius:1px}.omni-signal b:nth-child(2){height:6px}.omni-signal b:nth-child(3){height:8px}.omni-signal b:nth-child(4){height:10px}
.omni-wifi{width:9px;height:8px;border-top:2px solid #172b34;border-radius:50%;position:relative}.omni-wifi:after{content:'';position:absolute;top:2px;left:3px;width:3px;height:3px;background:#172b34;border-radius:50%}
.omni-battery{display:block;width:17px;height:8px;border:1px solid #7c898e;border-radius:2px;position:relative}.omni-battery:before{content:'';position:absolute;inset:1px;background:#172b34;border-radius:1px}.omni-battery:after{content:'';position:absolute;right:-3px;top:2px;width:2px;height:3px;border-radius:1px;background:#7c898e}
.omni-device .omni-phone-top{height:65px;padding:12px 9px;gap:6px}.omni-device .omni-phone-top>span:not(.omni-avatar-brand){font-size:11px}.omni-device .omni-wallpaper{height:480px}
.omni-device .omni-input{padding:9px 10px 23px;height:58px;border-top:1px solid #e1e7df}
.omni-device .omni-input>span{height:27px;display:flex;align-items:center;background:#fff;border:1px solid #e3e8e2;border-radius:18px;padding-left:9px}
.omni-person{right:-4%;width:39%}
.omni-third{right:33%}
@media(max-width:1050px) and (min-width:701px){.omni-device{left:22%;width:70%;max-width:290px}.omni-device .omni-phone-top{gap:4px;padding:10px 5px}.omni-device .omni-phone-top>svg{width:14px}.omni-person{width:39%;right:-4%}}
@media(max-width:700px){.omni-device{left:18%;width:76%;max-width:290px;height:574px;border-radius:37px;padding:5px}.omni-device .omni-phone{border-radius:32px;border-width:2px}.omni-device .omni-phone-top{height:59px;padding:10px 5px;gap:4px}.omni-device .omni-phone-top>svg{width:14px}.omni-device .omni-status{padding:16px 13px 0;font-size:9px;height:43px}.omni-device .omni-island{width:67px;height:22px}.omni-island:after{top:7px}.omni-device .omni-input{padding:9px 7px 22px;gap:6px}.omni-device .omni-input svg{width:14px}.omni-person{width:40%;height:auto;right:-5%;bottom:20px;aspect-ratio:2/3}.omni-person img{position:relative;bottom:auto}.omni-person>span{inset:auto 0 0;height:64%}.omni-third{right:30%}}