/* Shared expanded Duo hardware. The display retains its native 2853 × 2007 ratio. */
.duo-device {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.8%;
  border: 2px solid #77736f;
  border-radius: 8.6% / 12%;
  background: #111111;
  box-shadow: inset 0 0 0 1px #eee9df99, inset 0 0 0 3px #232323,
    0 2px 3px #352d2518, 0 18px 28px -13px #352d2540;
  isolation: isolate;
}
.duo-device::before, .duo-device::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 48.6%;
  width: 2.8%;
  height: .7%;
  border-radius: 1px;
  background: #a59e94;
  box-shadow: inset 0 0 1px #101010;
  pointer-events: none;
}
.duo-device::before { top: -.15%; }
.duo-device::after { bottom: -.15%; }
.duo-display {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 2853 / 2007;
  overflow: hidden;
  border-radius: 6.8% / 9.7%;
  background: #111111;
  isolation: isolate;
}
.duo-display > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 2853 / 2007;
  margin: 0;
  border: 0;
  object-fit: contain;
}
.duo-buttons { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.duo-buttons::before, .duo-buttons::after {
  content: "";
  position: absolute;
  border-radius: 3px;
  background: linear-gradient(90deg, #5d5954, #a5a09a 48%, #57534e);
  box-shadow: 0 0 0 1px #514d4840;
}
.duo-buttons::before { top: -.65%; left: 15%; width: 15%; height: .75%; }
.duo-buttons::after { right: -.65%; top: 20%; width: .75%; height: 13%; }