:root {
  --bg: #000;
  --fg: #fff;
  --face-size: min(52vmin, 320px);
  --eye-size: calc(var(--face-size) * 0.2);
  --eye-y: calc(var(--face-size) * 0.22);
  --eye-x: calc(var(--face-size) * 0.18);
  --mouth-w: calc(var(--face-size) * 0.62);
  --mouth-h: calc(var(--face-size) * 0.32);
  --mouth-stroke: calc(var(--face-size) * 0.045);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  height: 100%;
  width: 100%;
  overflow: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  opacity: 0;
  animation: settle 800ms ease-out 200ms forwards;
}

@keyframes settle {
  to { opacity: 1; }
}

#face {
  position: relative;
  width: var(--face-size);
  height: var(--face-size);
}

.eye {
  position: absolute;
  top: var(--eye-y);
  width: var(--eye-size);
  height: var(--eye-size);
  background: var(--fg);
  border-radius: 50%;
}

.eye.left  { left:  var(--eye-x); }
.eye.right { right: var(--eye-x); }

.mouth {
  position: absolute;
  bottom: calc(var(--face-size) * 0.16);
  left: 50%;
  transform: translateX(-50%);
  width: var(--mouth-w);
  height: var(--mouth-h);
  border: var(--mouth-stroke) solid var(--fg);
  border-top: none;
  border-radius: 0 0 999px 999px;
}

#message {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(11px, 1.6vmin, 14px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 24px 6vmin;
  color: var(--fg);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100vw;
}

@media (max-width: 480px) {
  #message {
    letter-spacing: 0.2em;
    font-size: 11px;
    white-space: normal;
  }
}