:root {
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  color: #242225;
  background: #f7f4e9;
  font-synthesis: none;
  --ink: #242225;
  --paper: #fffdf7;
  --yellow: #ffd34e;
  --purple: #c5b5f3;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #6044ce; outline-offset: 5px; }
header { max-width: 1200px; margin: auto; padding: 26px 32px; display: flex; justify-content: space-between; align-items: center; }
.brand { text-decoration: none; font-size: 27px; font-weight: 900; letter-spacing: -1.5px; }
.brand i { font-style: normal; }
.wrap { max-width: 1136px; margin: auto; padding: 32px; }
h1 { font-size: clamp(52px, 8vw, 96px); font-weight: 900; line-height: .98; letter-spacing: -5px; margin: 0; }
p { line-height: 1.5; }
button.primary, .button, .secondary { display: inline-block; border: 2px solid var(--ink); border-radius: 10px; background: var(--ink); color: white; padding: 16px 26px; font-weight: 750; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); }
button.primary { background: var(--yellow); color: var(--ink); }
button.primary:hover, .button:hover, .secondary:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
button.primary:active, .secondary:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
[hidden] { display: none !important; }
@media(max-width:650px) {
  header { padding: 22px 20px; }
  .wrap { padding: 20px; }
  .brand { font-size: 24px; }
  h1 { letter-spacing: -3px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }