:root {
  --bg: #101114;
  --text: #d4d4d4;
  --keyword: #569cd6;
  --variable: #9cdcfe;
  --property: #9cdcfe;
  --number: #b5cea8;
  --string: #ce9178;
  --punct: #d4d4d4;
  --cursor: #aeafad;
  --online: #b5cea8;
  --warning: #dcdcaa;
  --offline: #f48771;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text);
  font-family:
    "Cascadia Code",
    "Fira Code",
    "JetBrains Mono",
    "Consolas",
    "SFMono-Regular",
    monospace;
}

.clock-shell {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  padding: 1rem;
  display: grid;
  place-items: center;
}

.clock-shell:has(.code-screen.is-inspecting) {
  place-items: start center;
  padding-top: 8vh;
}

.code-screen {
  width: max-content;
  max-width: 92vw;
  margin: 0 auto;
  white-space: pre;
  line-height: 1.35;
  letter-spacing: 0.01em;
  font-size: clamp(14px, 1.35vw, 24px);
  font-weight: 400;
}

.code-screen.is-inspecting {
  width: min(92vw, 58ch);
  max-width: 92vw;
  min-height: auto;
  padding-left: clamp(2rem, 5vw, 6rem);
}


/* Syntax colors */
.kw { color: var(--keyword); }
.var { color: var(--variable); }
.prop { color: var(--property); }
.num { color: var(--number); }
.str { color: var(--string); }
.punct { color: var(--punct); }
.warning { color: var(--warning); }

/* Live states */
.online {
  color: var(--online);
  animation: onlinePulse 1.15s ease-in-out infinite;
}

.offline {
  color: var(--offline);
  animation: offlinePulse 1.15s ease-in-out infinite;
}

.str.transmitting {
  color: var(--warning);
  animation: transmissionPulse 1.15s ease-in-out infinite;
}

.str.transmitting-green {
  color: var(--online);
  animation: onlinePulse 1.15s ease-in-out infinite;
}

/* Interaction targets */
.hotspot,
.secret-hotspot {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hotspot {
  cursor: pointer;
}

.hotspot:hover {
  filter: brightness(1.18);
}

.secret-hotspot {
  cursor: default;
}

/* Cursor */
.cursor {
  display: inline-block;
  width: 0.56em;
  height: 1.1em;
  transform: translateY(0.17em);
  background: var(--cursor);
  opacity: 0.78;
  animation: blink 1.05s steps(1, end) infinite;
}

/* Temporary mutation effect */
.glitch-line {
  animation: glitchLine 0.58s steps(7, end) 5;
}

/* Animations */
@keyframes blink {
  0%, 49% {
    opacity: 0.78;
  }

  50%, 100% {
    opacity: 0;
  }
}

@keyframes onlinePulse {
  0%, 100% {
    opacity: 0.42;
    text-shadow: 0 0 0 rgba(181, 206, 168, 0);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(181, 206, 168, 0.65),
      0 0 20px rgba(181, 206, 168, 0.28);
  }
}

@keyframes offlinePulse {
  0%, 100% {
    opacity: 0.42;
    text-shadow: 0 0 0 rgba(244, 135, 113, 0);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(244, 135, 113, 0.65),
      0 0 20px rgba(244, 135, 113, 0.28);
  }
}

@keyframes transmissionPulse {
  0%, 100% {
    opacity: 0.42;
    text-shadow: 0 0 0 rgba(220, 220, 170, 0);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(220, 220, 170, 0.65),
      0 0 20px rgba(220, 220, 170, 0.28);
  }
}

@keyframes glitchLine {
  0% {
    opacity: 1;
    filter: none;
  }

  33% {
    opacity: 0.45;
    filter: brightness(1.6);
  }

  66% {
    opacity: 0.8;
    transform: translateX(1px);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: translateX(0);
  }
}

/* Mobile */
@media (max-width: 700px) {
  .clock-shell {
    place-items: center;
    padding: 0.75rem;
  }

  .clock-shell:has(.code-screen.is-inspecting) {
    place-items: start center;
    padding-top: 7vh;
  }

  .code-screen {
    width: max-content;
    max-width: 96vw;
    font-size: clamp(13px, 4.2vw, 20px);
    line-height: 1.32;
    margin: 0 auto;
  }

  .code-screen.is-inspecting {
  width: min(96vw, 58ch);
  max-width: 96vw;
  min-height: auto;
  padding-left: 0;
}

}

  .str.transmitting {
    font-size: 0.86em;
    letter-spacing: -0.035em;
  }