/* Tunas landing. Hand-designed, no script. Tokens first, then base, layout, components, motion.
   Brand source: the app's own look (warm orange #FF8A3D on cream, rounded Baloo 2 display type, mascot Bobo).
   Logo: the sprout mark (Tunas = "sprout" in Malay) in assets/img/brand/, masters and rules in docs/reference/brand-and-icons.md. */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/Tunas/assets/fonts/baloo2-latin.woff2?v=26fb4610") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* palette */
  --cream-0: #fffbf6;
  --cream-1: #fff3e6;
  --cream-2: #fde6cf;
  --line: #efdfcb;
  --ink: #2b1b12;
  --ink-2: #5a4637;
  --ink-3: #74604f;
  --orange: #ff8a3d;
  --orange-deep: #e86a12;
  --accent-ink: #b84a0b;
  --sun: #ffc83d;
  --sun-soft: #fff0c7;
  --mint: #2ec4b6;
  --mint-soft: #d9f4ef;
  --mint-ink: #0c6e66;
  --sky: #4a86e8;
  --sky-soft: #e3edfd;
  --sky-ink: #2a5fc4;
  --rose: #e8505b;
  --rose-soft: #fde4e6;
  --rose-ink: #b83440;
  --white: #ffffff;
  /* shape and depth */
  --r-s: 14px;
  --r-m: 24px;
  --r-l: 34px;
  --r-pill: 999px;
  --shadow-card: 0 22px 44px -26px rgba(120, 60, 10, 0.38);
  --shadow-phone: 0 44px 74px -32px rgba(120, 60, 10, 0.6), 0 12px 26px -14px rgba(43, 27, 18, 0.5);
  /* type */
  --font: "Baloo 2", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step-0: 1rem;
  --step-1: clamp(1.06rem, 0.98rem + 0.4vw, 1.28rem);
  --step-2: clamp(1.7rem, 1.25rem + 2vw, 2.7rem);
  --step-3: clamp(2.3rem, 1.4rem + 3.8vw, 4.3rem);
  /* rhythm */
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(60px, 8.5vw, 108px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font: 500 var(--step-0)/1.75 var(--font);
  background: var(--cream-0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p, li, summary { text-wrap: pretty; }
h1, h2, h3, p, ul, ol, figure, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
small { font-size: 0.8em; font-weight: 600; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 60;
  padding: 10px 16px; border-radius: var(--r-s);
  background: var(--ink); color: var(--cream-0); font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 52px; padding: 12px 28px; border-radius: var(--r-pill);
  background: var(--orange); color: var(--ink);
  font-size: 1.12rem; font-weight: 800; line-height: 1.2; text-decoration: none;
  box-shadow: 0 14px 26px -14px rgba(232, 106, 18, 0.9), inset 0 -3px 0 rgba(43, 27, 18, 0.14);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover { background: #ff9a58; transform: translateY(-2px); }
.btn--small { min-height: 44px; padding: 8px 20px; font-size: 1rem; white-space: nowrap; }
.btn--big { min-height: 60px; padding: 14px 40px; font-size: 1.25rem; background: var(--ink); color: var(--cream-0); box-shadow: 0 18px 30px -16px rgba(43, 27, 18, 0.9); }
.btn--big:hover { background: #4a2f20; }
.btn__play { flex: none; margin-inline-end: 8px; }
.finale__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
.foot__tm { flex-basis: 100%; margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-3); }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.textlink:hover { color: var(--ink); }

/* ---------- top bar ---------- */
.top { position: relative; z-index: 10; background: var(--cream-1); }
.top__in { display: flex; align-items: center; gap: 18px; padding-block: 14px; }
.brand { display: inline-flex; flex: none; align-items: center; min-height: 44px; gap: 10px; text-decoration: none; margin-right: auto; }
/* the lockup (sprout tile + wordmark, one file); smaller on the narrowest phones so the Play button keeps its room */
.brand__logo { width: auto; height: 44px; aspect-ratio: 425 / 120; }
@media (max-width: 379px) { .top__in { gap: 8px; } .brand__logo { height: 28px; } }
.nav { display: none; gap: 6px; }
.nav a { padding: 8px 14px; border-radius: var(--r-pill); font-weight: 700; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.nav a:hover { background: var(--cream-2); color: var(--ink); }
/* the language link (rendered by FE landing_i18n: <a class="lang-switch" hreflang lang>), a quiet pill next to the Play button */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  border: 2px solid var(--line); background: var(--white);
  font-weight: 800; line-height: 1; text-decoration: none; color: var(--ink-2); white-space: nowrap;
}
.lang-switch:hover { background: var(--cream-2); color: var(--ink); }
@media (max-width: 379px) { .lang-switch { padding: 0 10px; font-size: 0.875rem; } }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(20px, 4vw, 52px) clamp(56px, 8vw, 100px);
  background:
    radial-gradient(60% 55% at 85% 12%, rgba(255, 200, 61, 0.34), transparent 70%),
    radial-gradient(50% 45% at 4% 88%, rgba(46, 196, 182, 0.18), transparent 70%),
    linear-gradient(180deg, var(--cream-1) 0%, var(--cream-0) 100%);
}
.hero__in { display: grid; gap: clamp(32px, 6vw, 72px); align-items: center; }
.eyebrow {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent-ink);
}
.eyebrow { align-items: center; }
.eyebrow span { padding: 4px 14px; border-radius: var(--r-pill); background: var(--white); border: 2px solid var(--line); }
.eyebrow--solo { display: inline-block; padding: 4px 14px; border-radius: var(--r-pill); background: var(--sun-soft); border: 0; }
.hero__title { font-size: var(--step-3); line-height: 1.12; font-weight: 800; letter-spacing: -0.005em; text-wrap: balance; }
.lead { margin-top: 18px; font-size: var(--step-1); line-height: 1.8; color: var(--ink-2); max-width: 36em; }
.lead--narrow { max-width: 34em; }
.en { margin-top: 6px; font-size: 1.02rem; font-weight: 700; color: var(--ink-3); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chips li {
  padding: 6px 16px 6px 36px; border-radius: var(--r-pill); font-weight: 800; font-size: 0.98rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232ec4b6'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 10px 50% / 20px 20px no-repeat;
  border: 2px solid var(--line);
}

/* hero stage: two real phones, the mascot and two stickers. The stage height follows the main phone's width
   (the screenshot is about twice as tall as it is wide), so the phones can never spill into the next band. */
.stage { --pw: min(236px, 58vw); position: relative; min-height: calc(var(--pw) * 2 + 120px); }
.blob { position: absolute; border-radius: 50%; z-index: 0; }
.blob--sun { width: 70%; aspect-ratio: 1; right: -8%; top: -4%; background: var(--sun); opacity: 0.55; }
.blob--mint { width: 40%; aspect-ratio: 1; left: -4%; bottom: 6%; background: var(--mint); opacity: 0.38; }
.blob--sky { width: 22%; aspect-ratio: 1; right: 6%; bottom: -2%; background: var(--sky); opacity: 0.3; }

.phone {
  margin: 0; padding: 9px; border-radius: 40px; position: relative;
  background: linear-gradient(160deg, #46301f, #1d120c);
  box-shadow: var(--shadow-phone);
}
.phone img { width: 100%; height: auto; border-radius: 31px; background: var(--cream-1); }
.stage .phone { position: absolute; }
.phone--main { z-index: 2; left: 0; top: 0; width: var(--pw); }
.phone--second { z-index: 1; right: -2%; top: 56px; width: calc(var(--pw) * 0.8); transform: rotate(6deg); }
/* Bobo stands below the phone, with his bubble to the side: nothing covers the screenshot text */
.bobo { position: absolute; z-index: 4; left: 4%; bottom: 0; width: clamp(84px, 22vw, 124px); height: auto; filter: drop-shadow(0 14px 14px rgba(120, 60, 10, 0.3)); }
.bubble {
  position: absolute; z-index: 4; left: calc(4% + clamp(84px, 22vw, 124px) + 6px); bottom: 38px;
  padding: 8px 16px; border-radius: 20px 20px 20px 4px; background: var(--white); border: 2px solid var(--line);
  font-weight: 800; font-size: 1rem; line-height: 1.3; box-shadow: 0 12px 22px -14px rgba(120, 60, 10, 0.5);
}
.sticker {
  position: absolute; z-index: 4; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-m); font-weight: 800; line-height: 1.1;
  background: var(--mint); color: var(--ink); box-shadow: 0 16px 26px -16px rgba(15, 122, 113, 0.9);
}
.sticker b { font-size: 1.9rem; }
.sticker span { font-size: 1rem; }
.sticker--words { right: 2%; top: 4px; transform: rotate(-7deg); }
.sticker--langs { right: 4%; bottom: 40px; gap: 8px; background: var(--ink); color: var(--cream-0); transform: rotate(4deg); }
.sticker--langs span { padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.16); font-size: 0.95rem; }

/* ---------- stats ---------- */
.stats { background: var(--white); border-block: 2px solid var(--line); }
.stats__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; padding-block: 28px; }
.stats li { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.stats b { font-size: clamp(2.3rem, 1.6rem + 3vw, 3.5rem); line-height: 1; font-weight: 800; }
.stats li:nth-child(1) b { color: var(--orange-deep); }
.stats li:nth-child(2) b { color: var(--mint-ink); }
.stats li:nth-child(3) b { color: var(--sky-ink); }
.stats li:nth-child(4) b { color: var(--rose-ink); }
.stats span { display: grid; font-weight: 800; line-height: 1.25; }
.stats small { color: var(--ink-3); font-weight: 600; }

/* ---------- bands ---------- */
.band { padding-block: var(--section); }
.band--cream { background: var(--cream-1); }
.h2 { margin-top: 14px; font-size: var(--step-2); line-height: 1.25; font-weight: 800; letter-spacing: -0.005em; text-wrap: balance; }
.h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
.h3--spaced { margin-top: clamp(40px, 6vw, 64px); }
.note { margin-top: 20px; color: var(--ink-3); max-width: 44em; }
.note--center { margin-inline: auto; text-align: center; }

/* steps */
.steps { display: grid; gap: 22px; margin-top: 36px; }
.step {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px 0; border-radius: var(--r-l); background: var(--cream-1); border: 2px solid var(--line); overflow: hidden;
}
.step__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); font-size: 1.4rem; font-weight: 800; line-height: 1;
}
.step h3 { font-size: 1.28rem; font-weight: 800; line-height: 1.3; }
.step p { color: var(--ink-2); margin-bottom: 20px; }
/* the three phones sit on the card's bottom edge whatever their height, so no card has a blank strip under its phone */
.phone--step { width: min(236px, 74%); margin: auto auto 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; box-shadow: 0 -10px 40px -26px rgba(120, 60, 10, 0.5); }
.phone--step img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* languages */
.words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.word { display: grid; justify-items: center; gap: 4px; padding: 18px 10px 16px; border-radius: var(--r-l); background: var(--white); border: 2px solid var(--line); box-shadow: var(--shadow-card); text-align: center; }
.word img { width: 96px; height: 96px; margin-bottom: 4px; }
.word__zh { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.word__zh small { display: block; font-size: 0.9rem; color: var(--rose-ink); letter-spacing: 0.04em; }
.word__row { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; }
.word__row i { padding: 1px 9px; border-radius: var(--r-pill); font-style: normal; font-size: 0.78rem; line-height: 1.6; background: var(--sky-soft); color: var(--sky-ink); }
.word__row:last-child i { background: var(--mint-soft); color: var(--mint-ink); }
.classes { margin-top: clamp(36px, 5vw, 56px); }
.classes__list { display: grid; gap: 12px; margin-top: 16px; }
.classes__list li { display: grid; gap: 2px; padding: 16px 20px; border-radius: var(--r-m); background: var(--white); border: 2px solid var(--line); }
.classes__list b { font-size: 1.1rem; }
.classes__list span { color: var(--ink-2); }

/* worlds */
.worlds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.world:last-child:nth-child(odd) { grid-column: 1 / -1; } /* five cards: the last one spans the row on two columns */
.world { text-align: center; padding: 14px 10px 18px; border-radius: var(--r-l); border: 2px solid transparent; }
.world img { width: min(190px, 100%); margin: 0 auto 6px; }
.world h3 { font-size: 1.28rem; font-weight: 800; }
.world p { color: var(--ink-2); font-weight: 700; font-size: 0.96rem; }
.world--nature { background: #dff5e6; }
.world--me { background: var(--rose-soft); }
.world--home { background: var(--sun-soft); }
.world--life { background: var(--sky-soft); }
.world--play { background: var(--mint-soft); }
.subjects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.subjects li { padding: 8px 14px; border-radius: var(--r-pill); background: var(--white); border: 2px solid var(--line); font-weight: 800; text-align: center; }
.subjects li:nth-child(4n + 1) { background: var(--rose-soft); }
.subjects li:nth-child(4n + 2) { background: var(--sun-soft); }
.subjects li:nth-child(4n + 3) { background: var(--sky-soft); }
.subjects li:nth-child(4n + 4) { background: var(--mint-soft); }

/* games */
.games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
.games li { display: grid; justify-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: var(--r-m); background: var(--white); border: 2px solid var(--line); text-align: center; font-weight: 800; }
/* some icons are square art, some are cut-outs: one radius makes the ten look like a set */
.games img { width: min(96px, 100%); height: auto; border-radius: 20px; }

/* parents */
.split { display: grid; gap: clamp(32px, 6vw, 72px); align-items: center; }
.phone--solo { width: min(340px, 84%); margin-inline: auto; }
.tips { display: grid; gap: 16px; margin-top: 26px; }
.tips li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.tips__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 1.6rem; line-height: 1; }
.tips__icon--sun { background: var(--sun-soft); }
.tips__icon--mint { background: var(--mint-soft); }
.tips__icon--sky { background: var(--sky-soft); }
.tips__icon--rose { background: var(--rose-soft); }
.tips h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.35; }
.tips p { color: var(--ink-2); }

/* safety */
.cards { display: grid; gap: 18px; margin-top: 32px; }
.card { padding: 26px 24px; border-radius: var(--r-l); background: var(--white); border: 2px solid var(--line); box-shadow: var(--shadow-card); }
.card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 16px; background: var(--cream-1); font-size: 1.6rem; line-height: 1; }
.card h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.card p { margin-top: 6px; color: var(--ink-2); }
.card a { font-weight: 800; color: var(--accent-ink); }

/* faq */
.faq { display: grid; gap: 12px; margin-top: 28px; }
.faq details { border-radius: var(--r-m); background: var(--cream-1); border: 2px solid var(--line); }
.faq summary {
  position: relative; min-height: 60px; padding: 16px 56px 16px 22px; cursor: pointer; list-style: none;
  font-size: 1.1rem; font-weight: 800; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange); font-size: 1.3rem; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 22px 20px; color: var(--ink-2); }
.faq a { font-weight: 800; color: var(--accent-ink); }

/* finale */
.finale { padding-block: clamp(56px, 8vw, 96px); text-align: center; background: linear-gradient(180deg, var(--orange) 0%, #ffa860 100%); }
.finale__in { display: grid; justify-items: center; gap: 10px; }
.finale__bobo { width: 104px; height: 104px; }
.finale .lead { color: var(--ink); margin-top: 0; margin-bottom: 14px; }

/* footer */
.foot { background: var(--cream-2); border-top: 2px solid var(--line); padding-block: 24px; font-size: 0.95rem; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.foot__brand img { width: 32px; height: 32px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-weight: 700; text-underline-offset: 4px; }

/* ---------- wider screens ---------- */
@media (min-width: 560px) {
  .games { grid-template-columns: repeat(5, 1fr); }
  .subjects { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) {
  .stage { --pw: 270px; }
  .stats__in { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .classes__list { grid-template-columns: repeat(3, 1fr); }
  .words { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .phone--step { width: min(236px, 86%); }
  .worlds { grid-template-columns: repeat(6, 1fr); }
  .world { grid-column: span 2; }
  .world:nth-child(n+4), .world:last-child:nth-child(odd) { grid-column: span 3; }
}
@media (min-width: 900px) {
  .nav { display: flex; }
  .top__in { padding-block: 16px; }
  .hero__in { grid-template-columns: 1.04fr 0.96fr; }
  .stage { --pw: 292px; }
  .phone--main { left: 2%; }
  .phone--second { top: 84px; }
  .sticker--langs { right: 0; bottom: 86px; }
  .subjects { grid-template-columns: repeat(6, 1fr); }
  .worlds { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .world, .world:nth-child(n+4), .world:last-child:nth-child(odd) { grid-column: auto; }
  .split { grid-template-columns: 1.05fr 0.95fr; }
}
@media (max-width: 639px) {
  .step { padding-inline: 20px; }
  .phone { border-radius: 32px; padding: 7px; }
  .phone img { border-radius: 25px; }
  .sticker b { font-size: 1.5rem; }
  .btn--big { padding-inline: 22px; font-size: 1.125rem; white-space: nowrap; }
  .btn--small { padding-inline: 14px; font-size: 0.875rem; }
  .btn--small .btn__play { display: none; }
}
/* the header keeps lockup + (nav) + language link + Play on one row: phones, and narrow desktops where the nav appears, use the
   short Play label; the hero and the finale always show the full one */
.btn__label--short { display: none; }
@media (max-width: 639px), (min-width: 900px) and (max-width: 1099px) {
  .btn--small .btn__label { display: none; }
  .btn--small .btn__label--short { display: inline; }
}
@media (min-width: 900px) and (max-width: 1099px) { .nav { gap: 2px; } .nav a { padding-inline: 10px; } }

/* ---------- 404 (landing/404.html, rendered by scripts/render_404.mjs) ---------- */
.nf { min-height: 100vh; background: linear-gradient(180deg, var(--cream-1) 0%, var(--cream-0) 60%); }
.nf__in { display: grid; gap: 22px; max-width: 720px; padding-block: clamp(36px, 8vw, 88px) 64px; }
.nf__block { padding: clamp(22px, 4vw, 34px); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-card); }
.nf__title { font-size: var(--step-2); line-height: 1.2; font-weight: 800; }
.nf__body { margin: 10px 0 20px; color: var(--ink-2); }

/* ---------- motion: only when the visitor has not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .bobo { animation: bob 3.6s ease-in-out infinite; }
  .sticker--words { animation: wiggle 5s ease-in-out infinite; }
  .blob--sun { animation: drift 14s ease-in-out infinite alternate; }
  .blob--mint { animation: drift 11s ease-in-out infinite alternate-reverse; }
  .phone--second { animation: tilt 7s ease-in-out infinite alternate; }
  @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  @keyframes wiggle { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
  @keyframes drift { from { translate: 0 0; } to { translate: 14px -12px; } }
  @keyframes tilt { from { rotate: 0deg; } to { rotate: 1.6deg; } }
}