:root { color-scheme: light; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 75% 20%, #f8dfbf 0, transparent 34%), #fff7eb;
  color: #302f29;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.page {
  width: min(100% - 3rem, 760px);
  min-height: 100vh;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 0;
}
.gyoza { display: block; width: 150px; height: auto; margin-bottom: 2rem; animation: wave 4s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .gyoza { animation: none; } }
.eyebrow { margin: 0 0 .8rem; font-size: .9rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 680px; margin: 0; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: .98; letter-spacing: -.055em; }
.intro { margin: 1.5rem 0 0; font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.4; }
.links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.links a { display: inline-block; padding: .7rem 1rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; }
.links a:hover { background: #302f29; color: #fff7eb; }
.links a:focus-visible { outline: 3px solid #302f29; outline-offset: 3px; }