.render-phone-showcase{width:100%;min-width:0;position:relative;text-align:center}
.render-phone-stage{position:relative;display:flex;justify-content:center;align-items:center;padding-bottom:24px;isolation:isolate}
#rendering .render-phone-frame{position:relative;display:block;width:clamp(260px,22vw,480px);max-width:70%;height:auto;aspect-ratio:auto;max-height:none;padding:18px 7px 11px;border:1px solid #aaa8;border-radius:34px;background:linear-gradient(125deg,#62615e,#141413 20%,#090909 70%,#555451);overflow:visible;box-shadow:0 25px 42px #0008,0 7px 13px #0005,inset 0 0 0 2px #ffffff12;transform:none}
#rendering .render-phone-frame::before{content:'';position:absolute;top:7px;left:42%;width:16%;height:3px;border-radius:8px;background:#070707}
#rendering .render-phone-frame::after{content:'';position:absolute;left:8%;right:8%;bottom:-23px;height:19px;border-radius:50%;background:#0009;filter:blur(14px);z-index:-1;pointer-events:none}
#rendering .render-phone-frame>.render-ambient-source{display:none}
.render-phone-screen{position:relative;width:100%;aspect-ratio:9/17.5;overflow:hidden;border-radius:25px;isolation:isolate;transform:translateZ(0);background:#fff;touch-action:none;user-select:none;cursor:grab}
.render-phone-screen:active{cursor:grabbing}
#rendering .render-phone-screen>.render-phone-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;display:block;border-radius:0;pointer-events:none;transform:none}
.render-phone-stage>button{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid #fff9;border-radius:50%;background:#25232166;color:#fff5df;font-size:30px;cursor:pointer;z-index:3}
.render-prev{left:8%}.render-next{right:8%}
.render-phone-stage>button:hover{background:#ff792d99}
.render-phone-title{font-size:13px;color:#eee;margin:18px 0 12px}.render-phone-count{font-size:12px;color:#e5ded4}.render-phone-hint{font-size:11px;color:#bcb5ab;margin:10px 0}
@media(max-width:700px){#rendering .render-phone-frame{width:255px;max-width:72%;padding:15px 6px 9px;border-radius:29px}.render-phone-screen{border-radius:21px}.render-phone-stage>button{width:34px;height:34px;font-size:25px}.render-prev{left:0}.render-next{right:0}}

/* Keep navigation close to the device, independent of the section width. */
.render-phone-stage{--render-device-width:min(clamp(260px,22vw,480px),70%);--render-arrow-size:64px;--render-arrow-gap:28px}
.render-phone-stage>button{width:var(--render-arrow-size);height:var(--render-arrow-size);font-size:46px;line-height:1;display:grid;place-items:center;padding:0;border-width:1.5px;top:calc(50% - 12px)}
.render-phone-stage>.render-prev{left:auto;right:calc(50% + var(--render-device-width)/2 + var(--render-arrow-gap))}
.render-phone-stage>.render-next{right:auto;left:calc(50% + var(--render-device-width)/2 + var(--render-arrow-gap))}
@media(max-width:700px){.render-phone-stage{--render-device-width:min(255px,72%);--render-arrow-size:44px;--render-arrow-gap:6px}#rendering .render-phone-frame{max-width:calc(100% - 104px)}.render-phone-stage{--render-device-width:min(255px,72%,calc(100% - 104px))}.render-phone-stage>button{font-size:34px}}