:root {
  color-scheme: light dark;
  --page-bg: #ffffff;
  --fallback-mark: #5c95f6;
  --mark-gradient: linear-gradient(
    112deg,
    #e95663 0%,
    #b66aa9 24%,
    #5a91f4 53%,
    #54bfd2 74%,
    #85ca87 100%
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #030305;
    --fallback-mark: #6ea2ff;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  background: var(--page-bg);
}

body {
  min-block-size: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page-bg);
}

.stage {
  display: grid;
  min-block-size: 100svh;
  place-items: center;
  padding: clamp(16px, 4vmin, 56px);
}

.ascii-logo {
  contain: content;
  margin: 0;
  color: var(--fallback-mark);
  font-family:
    "SFMono-Regular",
    "Cascadia Mono",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;
  font-size: clamp(5.2px, min(1.44vw, 3.1vh), 30px);
  font-weight: 800;
  inline-size: max-content;
  letter-spacing: 0;
  line-height: 0.88;
  text-align: left;
  text-rendering: optimizeSpeed;
  user-select: none;
  white-space: pre;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ascii-logo {
    background: var(--mark-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@media (max-aspect-ratio: 3 / 4) {
  .stage {
    padding-inline: clamp(10px, 3vw, 18px);
  }

  .ascii-logo {
    font-size: clamp(4.9px, 1.55vw, 8px);
  }
}