.device{
  --gx:24%; --gy:8%;
  width:414px;height:868px;border-radius:58px;padding:12px;
  /* the rail is the only part of this box left uncovered, so the highlights
     read as light travelling along the polished metal edge */
  background:
    radial-gradient(190px 300px at var(--gx) var(--gy),
      rgba(255,255,255,.98) 0%, rgba(255,255,255,.42) 34%, rgba(255,255,255,0) 68%),
    radial-gradient(240px 380px at calc(100% - var(--gx)) calc(100% - var(--gy)),
      rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(102deg,
      rgba(255,255,255,0) 34%, rgba(255,255,255,.6) 46%,
      rgba(255,255,255,0) 52%, rgba(255,255,255,.28) 63%, rgba(255,255,255,0) 70%),
    linear-gradient(155deg,#e6e6ea 0%,#b9b9c0 22%,#f2f2f5 48%,#a8a8b0 76%,#dcdce1 100%);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.7),
    inset 0 1.5px 1px rgba(255,255,255,.9),
    inset 0 -1.5px 1px rgba(0,0,0,.22),
    0 40px 90px -30px rgba(0,0,0,.45);
  position:relative;flex:none;transform-origin:center center;
  animation:railDrift 11s ease-in-out infinite alternate;
}
.device.tracked{animation:none}
@keyframes railDrift{
  from{--gx:16%; --gy:5%}
  to{--gx:78%; --gy:34%}
}
/* thin bright line right where the rail meets the glass */
.device::before{
  content:"";position:absolute;inset:10px;border-radius:52px;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 0 6px rgba(255,255,255,.4);
}
.device::after{content:"";position:absolute;inset:9px;border-radius:50px;background:#0a0a0a}
.screen{position:absolute;inset:12px;border-radius:47px;overflow:hidden;background:#000;z-index:2;display:flex;flex-direction:column}
.btn{
  position:absolute;border-radius:2px;
  background:linear-gradient(180deg,#f0f0f3 0%,#c9c9d0 18%,#9a9aa2 55%,#d8d8dd 100%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.25);
}
.btn.mute{left:-2px;top:150px;width:4px;height:30px}
.btn.up{left:-2px;top:205px;width:4px;height:58px}
.btn.down{left:-2px;top:277px;width:4px;height:58px}
.btn.power{right:-2px;top:230px;width:4px;height:92px}

.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:122px;height:35px;border-radius:18px;background:#000;z-index:9}
.island i{position:absolute;right:13px;top:11px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1d2340,#07080f 70%);box-shadow:inset 0 0 0 1px #0c0e18}