:root {
  --desk-top: #c2b5a4;
  --desk-bottom: #dcd0c0;
  --desk-h: min(100vh, calc(min(100vw, 1400px) * 0.75));
  --phos: #9dff86;
  background: var(--desk-bottom);
}

html,
body {
  margin: 0;
  height: 100%;
  background-color: var(--desk-top);
  background-image:
    linear-gradient(
      #c2b5a4 0%,
      #c8bbaa 16%,
      #cfc2b1 26%,
      #d5cab8 40%,
      #dacebe 55%,
      #dcd0c2 78%,
      #dcd0c0 100%
    ),
    linear-gradient(var(--desk-bottom), var(--desk-bottom));
  background-size: 100% var(--desk-h), 100% 50%;
  background-position: center, bottom;
  background-repeat: no-repeat;
}

body {
  display: grid;
  place-items: center;
}

.stage {
  position: relative;
  width: min(100vw, 1400px, calc(100vh * 4 / 3));
  aspect-ratio: 4 / 3;
}

.desk,
.plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.plate {
  pointer-events: none;
}

.power {
  position: absolute;
  left: 59.8%;
  top: 46.1%;
  width: 4.3%;
  height: 5.7%;
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
}

.clip {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    39.97% 13.51%,
    40.06% 12.61%,
    40.26% 11.83%,
    40.84% 11.83%,
    42.79% 12.37%,
    47.83% 13.84%,
    49.18% 14.24%,
    51.39% 14.91%,
    54.82% 15.93%,
    60.8% 17.66%,
    62.75% 18.29%,
    63.82% 18.67%,
    64.31% 19.31%,
    64.41% 21.12%,
    64.41% 24.72%,
    64.36% 43.86%,
    63.88% 44.76%,
    57.47% 43.18%,
    53.31% 41.86%,
    40.15% 37.24%,
    40.07% 30.77%,
    39.99% 22.66%
  );
  pointer-events: none;
}

.term {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 480px;
  transform-origin: 0 0;
  visibility: hidden;
  color: var(--phos);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

.term.ready {
  visibility: visible;
}

.edge span {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 8px;
  border-radius: 4px;
  background: #eaffdf;
  box-shadow:
    0 0 10px 2px rgba(170, 255, 175, 0.95),
    0 0 26px 6px rgba(80, 255, 120, 0.45);
  transform-origin: 0 0;
}

.edge span:nth-child(2) {
  width: 58px;
  opacity: 0.45;
}

.edge span:nth-child(3) {
  width: 34px;
  opacity: 0.2;
}

.face {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 390px;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 10px rgba(90, 255, 130, 0.45));
}

.face img {
  display: block;
  width: 100%;
  height: auto;
}

.pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #eaffdf, var(--phos) 55%, #1d6b32);
  box-shadow: 0 0 10px rgba(140, 255, 160, 0.9);
}

.line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  margin: 0;
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(80, 255, 120, 0.85);
}

.cursor {
  animation: cursor 1.05s steps(1) infinite;
}

.scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(0, 12, 0, 0.22) 3px 4px
  );
  mix-blend-mode: multiply;
}

@keyframes cursor {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}