.device{--device-width:320px;--screen-ratio:1320 / 2868;--bezel:3.3cqi;--screen-radius:11.7cqi;--rim:.8cqi;--rim-color:#2e2f33;--rim-highlight:#5b5d63;--bezel-color:#000;--screen-bg:#1b1c1f;width:var(--device-width);flex-shrink:0;max-width:100%;margin:0;container-type:inline-size}.device__body{padding:var(--bezel);border-radius:calc(var(--screen-radius) + var(--bezel));background:var(--bezel-color);box-shadow:inset 0 0 0 var(--rim) var(--rim-color), inset 0 0 0 calc(var(--rim) * 1.35) var(--rim-highlight), 0 2.5cqi 6cqi -1cqi #00000047, 0 10cqi 18cqi -6cqi #00000038;position:relative}.device__screen{aspect-ratio:var(--screen-ratio);border-radius:var(--screen-radius);background:var(--screen-bg);isolation:isolate;position:relative;overflow:hidden}.device__screen>img,.device__screen>video,.device__screen>picture>img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.device__screen:after{content:"";z-index:2;pointer-events:none;background:#000;position:absolute;left:50%;transform:translate(-50%)}.device--ios-max{--screen-ratio:1320 / 2868;--bezel:3.3cqi;--screen-radius:11.7cqi}.device--ios-max .device__screen:after{border-radius:999px;width:27cqi;height:7.9cqi;top:2.6cqi}.device--android-xl{--screen-ratio:1344 / 2992;--bezel:4cqi;--screen-radius:8.4cqi}.device--android-xl .device__screen:after{border-radius:50%;width:4.6cqi;height:4.6cqi;top:2.9cqi}.device[data-cutout=none] .device__screen:after{display:none}.device[data-shadow=none] .device__body{box-shadow:inset 0 0 0 var(--rim) var(--rim-color), inset 0 0 0 calc(var(--rim) * 1.35) var(--rim-highlight)}.device[data-finish=light]{--rim-color:#c9cbcf;--rim-highlight:#eceef0}.device[data-finish=sand]{--rim-color:#b9a58c;--rim-highlight:#e2d4c1}@supports not (width:1cqi){.device{--bezel:10px;--screen-radius:36px;--rim:2px}.device--android-xl{--bezel:12px;--screen-radius:26px}.device--ios-max .device__screen:after{width:86px;height:25px;top:8px}.device--android-xl .device__screen:after{width:14px;height:14px;top:9px}}