:root {
  color-scheme: dark;
  --bg: #000000;
  --focus: rgba(255, 212, 92, 0.95);
  --focus-glow: rgba(255, 183, 38, 0.70);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}
body {
  min-height: 100svh;
  font-family: Arial, Helvetica, sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: rgba(255, 192, 61, 0.18);
}
.stage {
  width: 100%;
  height: 100svh;
  display: grid;
  place-items: center;
  background: #000;
  padding: 0;
}
.screen-wrap {
  position: relative;
  height: 100svh;
  width: min(calc(100svh * 1706 / 3688), 100vw);
  max-width: 100vw;
  max-height: 100svh;
  overflow: hidden;
  background: #000;
}
.screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.hotspot {
  position: absolute;
  left: 5.3%;
  width: 89.4%;
  border-radius: 4.8%;
  cursor: pointer;
  z-index: 2;
  outline: none;
  background: transparent;
}
.hotspot.emr {
  top: 42.1%;
  height: 16.0%;
}
.hotspot.power {
  top: 58.0%;
  height: 16.0%;
}
.hotspot:hover {
  background: rgba(255, 204, 84, 0.04);
}
.hotspot:focus-visible {
  box-shadow: 0 0 0 3px var(--focus), 0 0 30px var(--focus-glow);
}
@media (min-width: 768px) {
  .screen-wrap {
    height: 100svh;
    width: min(calc(100svh * 1706 / 3688), 100vw);
  }
}