* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.stage {
  padding: clamp(16px, 4vw, 48px);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monitor {
  --bezel-color: #d9d9d9;
  --bezel-color-dark1: #ccc;
  --bezel-color-dark2: #bfbfbf;
  --bezel-color-light1: #e6e6e6;
  --bezel-color-light2: #f2f2f2;

  --bezel-size: clamp(18px, 4vw, 60px);
  --outer-chamfer: clamp(2px, 0.5vw, 4px);
  --inner-chamfer: clamp(3px, 1vw, 8px);
  --underscan: clamp(8px, 2vw, 20px);

  --screen-radius: clamp(0px, 0.15vw, 2px);
  --outer-radius: calc(var(--screen-radius) + var(--outer-chamfer));
  --inner-radius: calc(var(--screen-radius) + var(--inner-chamfer));

  position: relative;
  width: min(96vw, 96vh * 4 / 3);
  height: min(96vh, 96vw * 3 / 4);
  border: solid var(--bezel-size) var(--bezel-color);
  border-radius: var(--screen-radius);
  background: #000;
}

.monitor::before {
  content: "";
  position: absolute;
  top: calc((var(--bezel-size) + var(--outer-chamfer)) * -1);
  left: calc((var(--bezel-size) + var(--outer-chamfer)) * -1);
  right: calc((var(--bezel-size) + var(--outer-chamfer)) * -1);
  bottom: calc((var(--bezel-size) + var(--outer-chamfer)) * -1);
  border: solid var(--outer-chamfer);
  border-color: var(--bezel-color-light2) var(--bezel-color-dark2) var(--bezel-color-dark1)
    var(--bezel-color-light1);
  border-radius: var(--outer-radius);
  pointer-events: none;
}

.monitor::after {
  content: "";
  position: absolute;
  top: calc(var(--inner-chamfer) * -1);
  left: calc(var(--inner-chamfer) * -1);
  right: calc(var(--inner-chamfer) * -1);
  bottom: calc(var(--inner-chamfer) * -1);
  border: solid var(--inner-chamfer);
  border-color: var(--bezel-color-dark2) var(--bezel-color-light2) var(--bezel-color-light1)
    var(--bezel-color-dark1);
  border-radius: var(--inner-radius);
  pointer-events: none;
}

.monitor-bottom-bar {
  position: absolute;
  left: 0;
  bottom: calc(var(--bezel-size) * -1);
  height: var(--bezel-size);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.monitor-logo {
  position: relative;
  width: calc(var(--bezel-size) * 0.3);
  height: calc(var(--bezel-size) * 0.5);
}

.monitor-logo svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.monitor-logo svg.Background {
  filter: brightness(0.5);
  top: -0.5px;
  left: -0.5px;
}

.monitor-logo svg.Foreground {
  filter: brightness(1.1);
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: var(--screen-radius);
  overflow: hidden;
}

.screen iframe {
  position: absolute;
  inset: var(--underscan);
  width: calc(100% - var(--underscan) * 2);
  height: calc(100% - var(--underscan) * 2);
  border: 0;
  background: #fff;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0px,
    rgba(0, 0, 0, 0.08) 1px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 min(120px, 8vw) rgba(0, 0, 0, 0.55);
  border-radius: var(--screen-radius);
}