/* Hookwise: a little island in flat, loud colour (the Bora Trilha look). Cream paper, navy ink, sun yellow, pink, leaf
   green, sky. Thick ink outlines and pressable buttons; no gradients, no glows. Display: Bricolage Grotesque. Body: Plus
   Jakarta Sans. Links, codes and addresses: Space Mono. */
:root {
  --ink: #10223d;
  --ink-2: #33465f;
  --muted: #5e6d82;
  --paper: #fff7ea;
  --paper-2: #f6ead4;
  --white: #ffffff;
  --sun: #ffc928;
  --pink: #ff4d8d;
  --pink-2: #ffd3e3;
  --leaf: #13995a;
  --leaf-2: #d4f5df;
  --sky: #8fd8ff;
  --sea: #3fb7e8;
  --coral: #ff6a3d;
  --coral-2: #ffe0d4;
  --grape: #7b5cff;
  --line: 3px solid var(--ink);
  --line-2: 2px solid var(--ink);
  --r: 22px;
  --shadow: 0 5px 0 var(--ink);
  --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: var(--line); border-radius: 999px; background: var(--sun); color: var(--ink); font: 800 18px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease, background .15s; white-space: nowrap; user-select: none; touch-action: manipulation; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: var(--shadow); }
.btn.pink { background: var(--pink); color: var(--white); }
.btn.white { background: var(--white); }
.btn.leaf { background: var(--leaf); color: var(--white); }
.btn.sky { background: var(--sky); }
.btn.ink { background: var(--ink); color: var(--white); }
.btn.big { min-height: 64px; padding: 0 34px; font-size: 22px; }
.btn.small { min-height: 42px; padding: 0 16px; font-size: 15px; box-shadow: 0 3px 0 var(--ink); }
.btn.small:hover { box-shadow: 0 5px 0 var(--ink); }
.btn.small:active { box-shadow: 0 0 0 var(--ink); transform: translateY(3px); }
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--white); box-shadow: 0 3px 0 var(--ink); cursor: pointer; font-size: 20px; transition: transform .12s, box-shadow .12s; padding: 0; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }

.card { background: var(--white); border: var(--line); border-radius: var(--r); box-shadow: 0 6px 0 var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: var(--line-2); border-radius: 999px; background: var(--white); font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kick { font: 700 12px/1 var(--mono); letter-spacing: .12em; color: var(--pink); text-transform: uppercase; }

/* the characters (assets/chars.mjs) */
.sly-svg { overflow: visible; }
.sly-svg .tail { transform-origin: 128px 198px; animation: tail 2.4s ease-in-out infinite; }
.sly-svg .lid { animation: blink 4.2s infinite; transform-origin: center; transform-box: fill-box; }
.sly-svg .bodyg { animation: breathe 3s ease-in-out infinite; transform-origin: 100px 230px; }
.pixel-svg .wing { transform-origin: 58px 66px; animation: flap 1.8s ease-in-out infinite; }
.pixel-svg .plid { animation: blink 3.6s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes tail { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
@keyframes flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}