* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; min-height: 100vh; display: grid; place-content: center; gap: 18px;
  padding: 24px; color: #a7b49a;
  background: radial-gradient(ellipse at 50% 42%, #252a20 0, #151711 48%, #090b08 100%);
  font: 13px/1.5 system-ui, sans-serif;
}
.monitor {
  position: relative; isolation: isolate; width: min(94vw, 1080px); aspect-ratio: 4 / 3;
  overflow: visible; border: clamp(26px, 4.1vw, 52px) solid transparent;
  border-radius: 6% / 5%;
  background:
    linear-gradient(145deg, #090a08 0%, #272822 12%, #171914 34%, #25261f 70%, #0c0d0a 100%) padding-box,
    linear-gradient(145deg, #505047 0%, #292a23 13%, #11120f 34%, #33342c 72%, #090a08 100%) border-box;
  box-shadow:
    0 34px 90px #000d,
    0 8px 18px #000a,
    inset 0 2px 3px #ffffff18,
    inset 0 -7px 12px #000c;
}
#screen {
  display: block; width: 100%; height: 100%; outline: none; cursor: text;
  border-radius: 4.5% / 5%;
  box-shadow: inset 0 0 22px 4px #000c, 0 0 1px 1px #050604;
}
.bezel {
  pointer-events: none; position: absolute; z-index: 1; inset: 0;
  border-radius: 4.5% / 5%;
  box-shadow:
    inset 0 0 0 1px #ffffff17,
    inset 0 2px 5px #ffffff10,
    inset 0 -8px 18px #000c,
    inset 0 0 50px 12px #0009;
}
.bezel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, #ffffff10, transparent 19%, transparent 76%, #ffffff08);
}
.bezel::after {
  content: "HAL9K  •  CRT DISPLAY"; position: absolute; right: 3%; bottom: -34px;
  color: #99978a; font: 600 8px/1 system-ui, sans-serif; letter-spacing: .16em;
  text-shadow: 0 1px 1px #000; opacity: .7;
}
.hint { margin: 0; text-align: center; color: #89917e; text-shadow: 0 1px 2px #000; }
@media (max-width: 600px) {
  body { padding: 12px; }
  .monitor { width: 96vw; border-width: clamp(18px, 5vw, 30px); }
  .bezel::after { bottom: -22px; font-size: 6px; }
}