:root {
  color-scheme: dark;
  --green: #a8ff66;
  --clock-width: clamp(258px, 29vw, 418px);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0d0d0d; }
#stage { position: fixed; inset: 0; overflow: hidden; cursor: text; }
.ascii {
  margin: 0; border: 0; padding: 0;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  white-space: pre;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
.ascii::selection, .ascii *::selection { color: #060806; background: #b7cbaa; }
#field { position: absolute; left: 0; top: 0; background-color: #2c2c2c; will-change: transform; }
#art-bounds { position: fixed; left: 5.6%; right: 5.6%; top: 22%; height: 46%; pointer-events: none; }
.countdown-area { position: fixed; bottom: max(104px, 12vh); left: 50%; transform: translateX(-50%); }
.clock-row { display: flex; align-items: center; gap: 38px; }
#clock { position: relative; width: var(--clock-width); height: calc(var(--clock-width) * .17); }
#clock-art { position: absolute; inset: -8px; font-weight: 700; }
#social { width: 46px; height: 46px; position: relative; display: block; text-decoration: none; }
#x-art { position: absolute; inset: 3px; cursor: pointer; font-weight: 700; }
#social:hover { filter: brightness(1.12); }
#social:focus-visible { outline: 1px solid var(--green); outline-offset: 7px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; user-select: none; }
.no-script { position: fixed; inset: 100px 20px; background: #050505; color: #ddd; text-align: center; padding-top: 20vh; font-size: clamp(24px, 7vw, 90px); }
.no-script a, .no-script p { color: var(--green); font-size: 14px; }
@media (min-aspect-ratio: 19/10) {
  #art-bounds { top: 21%; height: 43%; left: 13%; right: 13%; }
  .countdown-area { bottom: 12%; }
}
@media (max-width: 650px) {
  :root { --clock-width: clamp(210px, 60vw, 295px); }
  #art-bounds { top: 20%; height: 47%; left: 7%; right: 7%; }
  .countdown-area { bottom: max(80px, 13.5vh); }
  .clock-row { gap: 20px; }
  #social { width: 36px; height: 40px; }
  #x-art { inset: 3px 1px; }
}
@media (max-height: 550px) and (min-width: 651px) {
  #art-bounds { top: 21%; height: 40%; left: 18%; right: 18%; }
  :root { --clock-width: 230px; }
  .countdown-area { bottom: 52px; }
}