:root {
  --page-background: #fcfcfc;
  --ink: #646464;
  --link-color: #7a7a7a;
  --title-color: #ffa2dd;
  --note-color: #ffa2dd;
  --note-text-color: #646464;
  --note-border-radius: 2rem;
  --note-border-width: 1px;
  --content-width: 52rem;
  --page-padding: clamp(1.5rem, 7vw, 6rem);
  --cloud-font-size: clamp(1.3rem, 2.15vw, 2.2rem);
  --cloud-line-height: 1.65;
  --soft-blur: 0.55px;
  --emoticon-texture-size: 2.2px;
  --emoticon-dot-radius: 0.65px;
  --emoticon-softness: 0.5px;
  --hover-raise: -0.09em;
  --transition-duration: 180ms;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--page-background);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

button {
  font: inherit;
}

.visual-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page-shell {
  display: grid;
  min-height: 100vh;
  padding: var(--page-padding);
  place-items: center;
}

.word-cloud {
  max-width: var(--content-width);
  font-size: var(--cloud-font-size);
  font-weight: 500;
  line-height: var(--cloud-line-height);
  text-align: center;
  text-wrap: balance;
}

.face {
  display: inline;
  color: transparent;
  background-image: radial-gradient(
    circle at var(--emoticon-dot-radius) var(--emoticon-dot-radius),
    var(--face-color) var(--emoticon-dot-radius),
    transparent calc(var(--emoticon-dot-radius) + var(--emoticon-softness))
  );
  background-position: 0 0;
  background-size: var(--emoticon-texture-size) var(--emoticon-texture-size);
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(var(--emoticon-softness));
  opacity: 0.82;
  transition: filter var(--transition-duration) ease, opacity var(--transition-duration) ease,
    transform var(--transition-duration) ease;
}

.face:hover,
.face:focus-visible {
  filter: none;
  opacity: 1;
}

.face[data-playful] {
  cursor: default;
}

.face[data-playful]:hover {
  display: inline-block;
  transform: rotate(-2deg) translateY(var(--hover-raise));
}

.palette-01 { --face-color: #000000; }
.palette-02 { --face-color: #003cff; }
.palette-03 { --face-color: #00f341; }
.palette-04 { --face-color: #00f6ff; }
.palette-05 { --face-color: #04ff00; }
.palette-06 { --face-color: #198b17; }
.palette-07 { --face-color: #343374; }
.palette-08 { --face-color: #363636; }
.palette-09 { --face-color: #4a3374; }
.palette-10 { --face-color: #56a2cb; }
.palette-11 { --face-color: #6248f6; }
.palette-12 { --face-color: #743333; }
.palette-13 { --face-color: #7a83d2; }
.palette-14 { --face-color: #b05bc7; }
.palette-15 { --face-color: #b94fff; }
.palette-16 { --face-color: #ce1e21; }
.palette-17 { --face-color: #e2a8cd; }
.palette-18 { --face-color: #e35c13; }
.palette-19 { --face-color: #ef69dd; }
.palette-20 { --face-color: #ff0015; }
.palette-21 { --face-color: #ffa2a3; }
.palette-22 { --face-color: #ffa340; }
.palette-23 { --face-color: #ffc400; }

.page-link,
.title-trigger {
  display: inline;
  padding: 0;
  color: var(--link-color);
  font-weight: 500;
  text-decoration: none;
  filter: blur(var(--soft-blur)) url("#soft-grain");
  opacity: 0.78;
  transition: filter var(--transition-duration) ease, opacity var(--transition-duration) ease;
}

.page-link:hover,
.page-link:focus-visible,
.title-trigger:hover,
.title-trigger:focus-visible {
  filter: none;
  opacity: 1;
  outline: none;
}

.title-trigger {
  border: 0;
  background: transparent;
  color: var(--title-color);
  cursor: help;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}