:root {
  --ink: #16303f;
  --ink-soft: #4a6a7d;
  --rule: rgba(22, 48, 63, .18);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  /* light blue: deeper through the middle, washing out toward the edges */
  background: radial-gradient(105% 75% at 50% 47%,
      #8fc1e4 0%, #a2cdea 20%, #bcdcf1 45%, #d9ecf9 72%, #f4fbfe 100%) no-repeat fixed;
  background-color: #cfe4f3;
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Charter, Georgia, ui-serif, serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

main {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  padding: max(2rem, env(safe-area-inset-top)) 1.5rem
           calc(1.25rem + env(safe-area-inset-bottom));
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-bottom: 6vh;
}

#definition {
  margin: 0;
  /* vw rather than % -- a percentage inside the 1fr track resolves cyclically
     and lets the line box push past the viewport on narrow screens */
  width: min(15ch, 100vw - 3rem);
  text-align: center;
  font-size: clamp(1.45rem, 5.8vw, 2.05rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .002em;
  text-wrap: pretty;
  transition: opacity .28s ease;
}

#definition.fading { opacity: 0; }

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

#refresh {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: .95rem;
  letter-spacing: .09em;
  text-transform: lowercase;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .38);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .7rem 1.6rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, transform .12s ease;
}

#refresh:hover { background: rgba(255, 255, 255, .72); color: var(--ink); }
#refresh:active { transform: scale(.97); }
#refresh:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; }

.credit {
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  opacity: .72;
}

.credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.credit a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #definition, #refresh { transition: none; }
}