/* A layered device frame around the existing animated TapFlow experience. */
.scene .phone{
  --device-radius:40px;--device-inset:7px;
  width:230px;height:478px;padding:0;overflow:visible;
  border:1px solid #62666b;border-radius:var(--device-radius);
  background:linear-gradient(105deg,#c9cdce 0%,#656a6e 1.5%,#202428 3.5%,#899092 5%,#383d41 8%,#15191d 48%,#3c4248 91%,#b3b9bd 98%,#4f555b 100%);
  box-shadow:1px 0 0 #c5c9cb80,-1px 0 0 #171b20,0 3px 5px #0005,8px 25px 35px #0005,18px 45px 80px #0004;
  isolation:isolate;
}
.light .scene .phone{box-shadow:1px 0 0 #c5c9cbb3,-1px 0 0 #171b20,0 3px 5px #10182026,8px 25px 35px #152c4229,18px 45px 80px #152c421f}
.scene .phone::before{content:"";position:absolute;inset:1px;border-radius:calc(var(--device-radius) - 1px);border:1px solid #f8fafb55;box-shadow:inset 2px 0 2px #fff3,inset -2px 0 2px #0009;pointer-events:none;z-index:3}
.scene .phone::after{content:none}
.scene .phone-screen{position:absolute;inset:var(--device-inset);overflow:hidden;border-radius:calc(var(--device-radius) - var(--device-inset));background:#fff;box-shadow:0 0 0 3px #090b0e,0 0 0 4px #c5cbce33;z-index:2}
.scene .phone-glass{position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;background:linear-gradient(116deg,#fff2 0%,#fff0 26%,#d8e9ff08 59%,#fff0 60%,#fff0 84%,#fff1 100%);box-shadow:inset 0 0 0 .5px #fff5}
.scene .phone-key{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#282d32,#b9bfc2 55%,#4c535a);border:1px solid #62686d;box-shadow:0 1px 2px #0004;z-index:1}
.scene .phone-key-action{left:-3px;top:83px;height:17px}
.scene .phone-key-up{left:-3px;top:119px;height:31px}
.scene .phone-key-down{left:-3px;top:160px;height:31px}
.scene .phone-key-power{right:-3px;top:131px;height:49px;background:linear-gradient(90deg,#454b50,#b9bfc2 70%,#343a40)}
.scene .phone-antenna{position:absolute;left:-1px;right:-1px;height:2px;top:66px;border-left:3px solid #b8bfc380;border-right:3px solid #b8bfc380;pointer-events:none}
.scene .phone-antenna-bottom{top:auto;bottom:61px}
.scene .phone-speaker{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:27px;height:2px;border-radius:2px;background:#0a0c0e;box-shadow:0 1px 0 #c6ccce55;z-index:4}
.scene .phone-status{height:40px;padding:13px 17px 0;align-items:flex-start;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-size:9px;font-weight:650;letter-spacing:-.3px;color:#111318}
.scene .phone-status-icons{display:block;width:42px;height:9px;color:#111318}
.scene .phone .island{top:8px;width:68px;height:19px;background:#050609;box-shadow:inset 0 0 0 1px #191c21,0 .5px 1px #0003;z-index:6}
.scene .phone .island::before{content:"";position:absolute;left:10px;top:8px;width:23px;height:3px;border-radius:5px;background:linear-gradient(#11131a,#07090d);opacity:.8}
.scene .phone .island::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#52718b 0%,#263d57 12%,#0d1c34 26%,#060a12 55%,#202735 72%,#08090d 76%);box-shadow:0 0 0 .7px #1c2027,inset 0 0 1px #718ca34d}
.scene .phone-view{inset:42px 0 23px}
.scene .phone-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:72px;height:3px;border-radius:4px;background:#15171b;z-index:7}
.scene .phone .saved-state{padding:27px 18px 0}
.scene .phone .saved-state h4{font-size:19px;line-height:1.32}
.scene .phone .success-icon{width:56px;height:56px;margin:4px auto 18px}
.scene .phone .contact-summary{margin-top:16px;padding:14px}
.scene .scene-caption{bottom:7px}
@media(max-width:1050px){.scene .phone{width:220px;height:457px;--device-radius:38px}}
@media(max-width:780px){
  .scene .phone{width:195px;height:405px;--device-radius:35px;--device-inset:6px}
  .scene .phone-status{padding:12px 14px 0;font-size:8px}
  .scene .phone-status-icons{width:37px;height:8px}
  .scene .phone .island{top:7px;width:59px;height:17px}
  .scene .phone .island::after{top:5px}
  .scene .phone-view{inset:38px 0 22px}
  .scene .phone .tap-state h4{font-size:13px}
  .scene .phone-key-action{top:70px;height:14px}.scene .phone-key-up{top:100px;height:27px}.scene .phone-key-down{top:136px;height:27px}.scene .phone-key-power{top:111px;height:42px}
  .scene .phone .saved-state{padding:19px 15px 0}.scene .phone .saved-state h4{font-size:17px}
  .scene .phone .success-icon{width:46px;height:46px;margin:4px auto 14px}
  .scene .phone .contact-summary{padding:11px;margin-top:14px}
}
@media(max-width:520px){
  .scene .phone{width:170px;height:354px;--device-radius:31px;--device-inset:5px}
  .scene .phone-screen{box-shadow:0 0 0 2.5px #090b0e,0 0 0 3px #c5cbce33}
  .scene .phone-status{height:35px;padding:11px 12px 0;font-size:7px}
  .scene .phone-status-icons{width:32px;height:7px}
  .scene .phone .island{top:6px;width:51px;height:15px}
  .scene .phone .island::before{top:6px;left:8px;width:17px;height:2px}
  .scene .phone .island::after{right:5px;top:5px;width:4px;height:4px}
  .scene .phone-speaker{top:2px;width:21px;height:1.5px}
  .scene .phone-view{inset:34px 0 21px}
  .scene .phone-home{width:57px;height:2.5px;bottom:6px}
  .scene .phone-key-action{top:61px;height:12px}.scene .phone-key-up{top:87px;height:24px}.scene .phone-key-down{top:119px;height:24px}.scene .phone-key-power{top:96px;height:37px}
  .scene .phone-antenna{top:50px}.scene .phone-antenna-bottom{top:auto;bottom:44px}
  .scene .phone .profile-cover{height:52px}
  .scene .phone .profile-links{margin-top:8px;gap:5px}.scene .phone .profile-links span{padding:5px 2px}
  .scene .phone .profile-content .phone-label{margin:7px 0;font-size:4.5px;letter-spacing:.12em}
  .scene .phone .tap-ring{margin:18px auto 17px}
  .scene .phone .tap-state h4{font-size:11px;line-height:1.4}
  .scene .phone .tap-state .phone-button{font-size:7px;line-height:1.5;padding:7px 5px;margin-top:10px}
  .scene .phone .tap-state>p:last-child{margin-top:9px!important}
  .scene .phone .saved-state{padding:13px 13px 0}.scene .phone .saved-state h4{font-size:15px;margin-bottom:8px}
  .scene .phone .success-icon{width:39px;height:39px;font-size:22px;margin:5px auto 11px}
  .scene .phone .contact-summary{padding:9px;margin-top:12px}
  .scene .phone .saved-state .phone-button{margin-top:10px;padding:7px;font-size:7px}
}