/* Fredoka (SIL Open Font License), self-hosted latin subset, variable weight. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/fredoka.woff2) format("woff2");
}
:root { --ink: #252324; --pink: #ff41a2; --magenta: #ff43e2; --yellow: #fbcc54; --purple: #402469; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px; text-align: center; overflow-x: hidden;
  font-family: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: #fff;
  background: radial-gradient(ellipse at 50% 38%, #ff41a2 0%, #b8309a 32%, var(--purple) 72%) fixed;
  background-color: var(--purple);
}
.logo {
  width: min(78vw, 460px); height: auto;
  filter: drop-shadow(0 12px 28px rgba(37, 35, 36, .35));
  animation: bob 3.2s ease-in-out infinite;
}
h1 {
  margin-top: 24px;
  font-weight: 700; font-size: clamp(2.6rem, 11vw, 5.5rem); line-height: 1; letter-spacing: .02em;
  color: var(--yellow);
  -webkit-text-stroke: clamp(6px, 1.4vw, 10px) var(--ink); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
}
p { margin-top: 18px; font-weight: 600; font-size: clamp(1rem, 4vw, 1.3rem); }
p span { display: inline-block; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } }