:root { --background: #f3cd59; --ink: #243c79; --accent: #e45536; color-scheme: light; background: var(--background); color: var(--ink); }
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
main { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.wordmark { margin: 0; font-family: "Space Grotesk", Arial, sans-serif; font-size: clamp(42px, 9vw, 96px); font-weight: 700; letter-spacing: -.073em; line-height: 1.2; white-space: nowrap; }
.ampersand { font-family: Georgia, serif; font-style: italic; font-weight: 400; }
.ampersand, .dot { color: var(--accent); }

.type-play { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.type-play:focus-visible { outline: 2px solid currentColor; outline-offset: 16px; }
.wordmark { width: min(760px, 100%); text-align: center; }
.word[data-face="serif"] { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; letter-spacing: -.045em; }
.word[data-face="italic"] { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.045em; }
.word[data-face="condensed"] { font-family: Anton, Impact, sans-serif; font-weight: 400; letter-spacing: -.025em; }
.word[data-face="mono"] { font-family: "Space Mono", monospace; font-weight: 700; font-size: .8em; letter-spacing: -.085em; }
.word[data-face="classic"] { font-family: Georgia, serif; font-weight: 700; letter-spacing: -.07em; }
.word[data-face="plain"] { font-family: Arial, sans-serif; font-weight: 900; letter-spacing: -.08em; }


/* Interpolate palette changes without softening the typography swaps. */
:root { transition: background-color 180ms ease-out, color 180ms ease-out; }
.ampersand, .dot { transition: color 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  :root, .ampersand, .dot { transition: none; }
}