/* Plush ’Em Up landing. Layout and palette from the Claude Design file "Landing Page.dc.html" (8 October 2026):
   chalk ground, ink type and rules, coral accents, arch-topped art. No cobalt in UI chrome. */

@font-face { font-family: 'Archivo Black'; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ArchivoBlack-Regular.woff2') format('woff2'), url('/assets/fonts/ArchivoBlack-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/Archivo-Medium.woff2') format('woff2'), url('/assets/fonts/Archivo-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/Archivo-SemiBold.woff2') format('woff2'), url('/assets/fonts/Archivo-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Archivo-Bold.woff2') format('woff2'), url('/assets/fonts/Archivo-Bold.ttf') format('truetype'); }

:root {
  color-scheme: light;
  --chalk: #F4F1E9; --paper: #FBFAF6; --sand: #E7E3D8; --ink: #242424; --ink-body: #4A4740; --ink-soft: #6B675E; --ink-faint: #BDB8AC;
  --coral: #EC796B; --coral-deep: #D9604F;
  --rule: 1.5px solid var(--ink);
  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  /* The app's tight Archivo Black tracking, −1.4 at 22 pt as a share of size (PCType.tightRatio). */
  --tight: calc(-1.4em / 22);
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Gutters clear the notch in landscape (viewport-fit=cover in build.mjs) */
  --safe: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter: max(16px, var(--safe)); --max: 1216px;
  --r-group: 20px; --r-card: 24px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--chalk); color: var(--ink); font: 500 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: var(--tight); }
p { margin: 0; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--chalk); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* Type helpers */
.eyebrow { font: 700 13px/1.2 var(--body); letter-spacing: .24em; text-transform: uppercase; }
.lead { font-size: 21px; line-height: 1.45; text-wrap: pretty; }
.wordmark { font-family: var(--display); font-size: 21px; letter-spacing: var(--tight); line-height: 1; white-space: nowrap; }
.wordmark.stacked { font-size: 30px; line-height: .88; white-space: normal; }

/* Arch: the design's signature frame, round on top and square at the base */
.arch { position: relative; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--field, var(--sand)); }
.arch > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Screenshots are 800×1740; the ratio holds the space before a lazy image loads */
.screen { position: relative; display: block; aspect-ratio: 800 / 1740; border-radius: 30px; overflow: hidden; box-shadow: 0 0 0 6px var(--ink); background: var(--paper); }
.screen img { width: 100%; display: block; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(244,241,233,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 16px; }
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand-mark { position: relative; width: 32px; height: 40px; flex: none; background: var(--coral); border-radius: 999px 999px 0 0; overflow: hidden; }
.brand-mark img { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 38px; max-width: none; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--body); text-decoration: none; padding: 0 10px; border-radius: 999px; }
.nav-links a:hover { color: var(--ink-soft); }
.nav-links a[aria-current] { text-decoration: underline; text-decoration-thickness: 1.5px; }
/* Download: an ink capsule, so it reads as the one action in the bar */
.nav-links .nav-cta { margin-left: 6px; padding: 0 18px; background: var(--ink); color: var(--chalk); font-weight: 700; transition: background .15s ease, color .15s ease; }
.nav-links .nav-cta:hover { background: var(--coral); color: var(--ink); }
/* Phones: the wordmark stacks on two lines, as in the footer, so all three links fit from 371 px
   (brand 111 + links 206 + gap 12); below that Support is footer-only (see Narrow phones).
   Once the app is live the bar holds only the Download button; Gameplay, Worlds and Support are a scroll or the footer away */
@media (max-width: 520px) {
  .header-inner { gap: 12px; } .brand { gap: 10px; } .nav-links { gap: 0; } .nav-links a { font-size: 14px; padding: 0 7px; }
  .site-header .wordmark { font-size: 20px; line-height: .88; } .site-header .wordmark span { display: block; }
  .nav-links:has(.nav-cta) a:not(.nav-cta) { display: none; } .nav-links .nav-cta { margin-left: 0; padding: 0 18px; }
  .lead { font-size: 19px; }
}
/* Short landscape phones: a slimmer bar */
@media (orientation: landscape) and (max-height: 500px) { .header-inner { min-height: 60px; } section { scroll-margin-top: 68px; } }

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: var(--chalk); font: 700 16px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; transition: background .15s ease, color .15s ease, transform .12s ease; }
.btn-primary:hover { background: var(--coral); color: var(--ink); }
.btn-primary:active { transform: scale(.97); }
.btn-primary .arrow { width: 20px; height: 20px; }
.btn-primary.is-pending { cursor: default; }
.btn-primary.is-pending:active { transform: none; }
.btn-primary[disabled] { opacity: .6; cursor: progress; }

/* Numbered rows: a ringed number beside a title and text */
.numbered { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.num { width: 38px; height: 38px; border-radius: 50%; border: var(--rule); display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--body); }

/* ---------- Hero ---------- */
.hero { display: grid; gap: 56px; align-items: center; padding: 40px 0 96px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
/* One column: sized so "FLUFF AROUND" (7.9em) fits the line; two columns from 760 px use the original scale */
.hero-title { font-size: clamp(36px, 11.8vw - 4px, 80px); line-height: .9; letter-spacing: var(--tight); text-transform: uppercase; }
.hero .lead { max-width: 480px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { font: 600 14px/1 var(--body); border: var(--rule); border-radius: 999px; padding: 9px 14px; }
.hero-visual { position: relative; width: 100%; max-width: min(520px, 66vh); aspect-ratio: 520 / 660; justify-self: center; }
.sun { position: absolute; right: -2%; top: 6%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }
.hero-arch { position: absolute; left: 8%; right: 8%; top: 0; bottom: 10.6%; }
.hero-plush { position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%); width: 68%; max-width: 340px; }
/* Hero phone: ink bezel around a gameplay clip (720x1566), standing where Fuzz stood */
.hero-phone { position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%); width: 58%; max-width: 300px; padding: 8px; border-radius: 40px; background: var(--ink); box-shadow: 0 18px 40px -18px rgba(36,36,36,.55); }
.hero-phone::before { content: ''; position: absolute; z-index: 1; top: 17px; left: 50%; transform: translateX(-50%); width: 28%; height: 15px; border-radius: 999px; background: var(--ink); }
.phone-screen { display: block; width: 100%; aspect-ratio: 720 / 1566; object-fit: cover; border-radius: 32px; background: var(--sand); }

/* ---------- Ruled bands ---------- */
section { scroll-margin-top: 84px; }
.band { border-top: var(--rule); }
.band > .wrap { padding: 96px 0; }
/* Promo: kept small and centred so it sits above the section rather than taking it over */
.sizzle { width: min(100%, 560px); margin: 0 auto 64px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 4px var(--ink); background: var(--chalk); }
.sizzle video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) { .sizzle { margin-bottom: 44px; border-radius: 16px; box-shadow: 0 0 0 3px var(--ink); } }
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(38px, 5vw, 68px); line-height: .95; letter-spacing: var(--tight); text-transform: uppercase; }
.section-head > p, .section-head.split > p { font-size: 18px; line-height: 1.5; max-width: 500px; text-wrap: pretty; }
.section-head.split { display: grid; gap: 24px 32px; align-items: end; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.section-head.split > div { display: flex; flex-direction: column; gap: 18px; }

/* How it plays */
/* One column on phones, two from 640 px (the third centred under them), three from 1024 px */
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px 32px; grid-template-columns: minmax(0, 1fr); }
.beat { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 440px; justify-self: center; }
/* The phone sits in front of the arch, not inside it, so the whole screen shows. The screen sets the height and
   rises above the arch top by 9% of it (44 px at the full 220 px). Short landscape screens get a smaller phone. */
.beat-visual { position: relative; display: flex; justify-content: center; padding: 36px 0 6px; }
.beat-visual .beat-arch { position: absolute; left: 0; right: 0; bottom: 0; top: calc(36px + 9%); }
.beat-visual .screen { z-index: 1; width: 58%; max-width: min(220px, 36vh); }
.beat h3, .fair-list strong { font: 700 22px/1.2 var(--body); letter-spacing: 0; }
.beat h3 { margin: 6px 0 8px; }
.beat p { font-size: 16px; color: var(--ink-body); text-wrap: pretty; }

/* Collections */
/* Five cards: 2 columns on phones, 3 from 640 px, 5 from 1024 px; a short last row is centred */
.col-list { --cols: 2; --col-gap: 16px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px var(--col-gap); }
.col-card { display: flex; flex-direction: column; gap: 16px; width: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols)); }
.col-arch { aspect-ratio: 200 / 340; }
/* Music previews: the whole arch is the button; the pill only shows once site.js is running */
.col-play { display: block; width: 100%; padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
html:not(.js) .col-play { cursor: default; } html:not(.js) .listen-pill { display: none; }
.col-play > img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.col-play[aria-pressed=true] > img { transform: scale(1.04); }
@media (hover: hover) { .col-play:hover > img { transform: scale(1.04); } }
.col-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.listen-pill { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; background: var(--chalk); color: var(--ink); font: 700 14px/1 var(--body); white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(36,36,36,.5); transition: background .15s ease, color .15s ease; }
.listen-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); position: relative; flex: none; }
.listen-icon::before { content: ''; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--chalk); }
.col-play[aria-pressed=true] .listen-pill { background: var(--ink); color: var(--chalk); }
.col-play[aria-pressed=true] .listen-icon { display: none; }
.eq { display: none; width: 22px; height: 22px; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; background: var(--coral); flex: none; }
.eq i { width: 3px; height: 10px; border-radius: 2px; background: var(--chalk); transform-origin: center; }
.col-play[aria-pressed=true] .eq { display: inline-flex; }
.col-play.is-loading .listen-icon { opacity: .4; }
.col-body { display: flex; flex-direction: column; gap: 8px; }
.col-body h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1; text-transform: uppercase; }
.col-sub { font: 600 15px/1.4 var(--body); }

/* Plushies: all 25 in a pile, offset like the game board and tossed at seeded angles (set in build.mjs).
   Each sits in two half-columns; --r/--x/--y/--s are its tilt, nudge and size. The name tag shows on hover, focus or tap. */
.plushies { overflow-x: hidden; overflow-x: clip; }
.plush-pile { list-style: none; margin: 0 auto; padding: 8px 0 28px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 520px; }
.plush { grid-row: var(--pr); grid-column: var(--pc) / span 2; position: relative; aspect-ratio: 1 / .86; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); }
.plush:hover, .plush:focus-within, .plush.is-poked { z-index: 2; }
.plush-btn { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.plush-btn:focus-visible { outline-offset: -4px; border-radius: 50%; }
.plush-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.plush-tag { position: absolute; left: 50%; bottom: 2%; translate: -50% 30%; rotate: calc(var(--r) * -1); padding: 6px 10px 5px; border-radius: 999px; background: var(--ink); color: var(--chalk); font: 400 13px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.plush-btn:focus-visible .plush-tag, .plush.is-poked .plush-tag { opacity: 1; }
@media (hover: hover) { .plush-btn:hover .plush-tag { opacity: 1; } }
/* Without the script there is no tap, so every name shows. */
html:not(.js) .plush-tag { opacity: 1; }

/* Earned, never bought */
.fair { background: var(--ink); color: var(--chalk); }
.fair-inner { display: grid; gap: 40px 56px; align-items: start; padding: 96px 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.fair .section-head { margin: 0; }
.fair .eyebrow { color: var(--coral); }
.fair-list { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 26px; }
.fair-list .num { border: 0; background: var(--coral); color: var(--ink); }
.fair-list p { margin-top: 7px; font-size: 18px; line-height: 1.5; }
.fair-list strong { font-size: inherit; line-height: inherit; }

/* Shelf */

/* Closing */
.closing { border-top: var(--rule); }
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-top: 96px; text-align: center; }
.closing h2 { font-size: clamp(40px, 6.4vw, 96px); line-height: .92; letter-spacing: var(--tight); text-transform: uppercase; }
.closing-cast { display: flex; justify-content: center; align-items: flex-end; width: 100%; max-width: 980px; margin-top: 16px; }
.closing-cast span { width: 18%; }
.closing-cast span:nth-child(3) { width: 26%; }
.closing-cast img { transform: translateY(var(--sink, 0%)); }

/* Footer */
.site-footer { background: var(--ink); color: var(--chalk); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 32px; padding: 56px 0 calc(56px + env(safe-area-inset-bottom, 0px)); }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-slogan { font: 600 15px/1.3 var(--body); }
.footer-note, .site-footer small { font: 500 14px/1.4 var(--body); color: var(--ink-faint); }
.site-footer small { font-size: 13px; }
.footer-end { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.footer-links { display: flex; gap: 12px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--body); text-decoration: none; padding: 0 4px; }
.footer-links a:hover { color: var(--coral); }
@media (max-width: 600px) { .footer-end { align-items: flex-start; } }

/* ---------- Documents: support, privacy, 404 ---------- */
.document { max-width: 640px; padding: 64px 0 88px; display: grid; gap: 16px; }
.document h1 { font-size: clamp(40px, 7vw, 64px); line-height: .95; letter-spacing: var(--tight); }
.document h2 { font-size: 26px; letter-spacing: var(--tight); margin-top: 28px; }
.document .lead { color: var(--ink-soft); }
.document ul, .document ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.doc-steps li::marker { font-weight: 700; }
.rule-card, .contact-card { background: var(--paper); border-radius: var(--r-card); padding: 24px; display: grid; gap: 12px; margin-top: 8px; }
.rule-card h3 { font-size: 20px; }
details { background: var(--paper); border-radius: var(--r-group); padding: 0 20px; }
summary { cursor: pointer; font-weight: 700; min-height: 56px; display: flex; align-items: center; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; margin-left: auto; font: 400 22px/1 var(--display); }
details[open] summary::after { content: '–'; }
details p { padding-bottom: 18px; color: var(--ink-soft); }
.notice { background: #FBE3DF; border-left: 4px solid var(--coral-deep); border-radius: 12px; padding: 14px 16px; }
.small-note { font-size: 14px; color: var(--ink-soft); }
code { font-size: .9em; background: rgba(36,36,36,.06); padding: 1px 5px; border-radius: 5px; }
.center-doc { justify-items: center; text-align: center; padding-top: 80px; }
.lost-plush { width: 150px; transform: rotate(-12deg); }

/* Contact form */
.contact-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 15px; }
.field input, .field textarea { font: 500 17px/1.4 var(--body); color: var(--ink); background: var(--chalk); border: 1.5px solid rgba(36,36,36,.16); border-radius: 14px; padding: 13px 14px; width: 100%; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--coral-deep); }
.field-error { color: #B23A2B; font-size: 14px; min-height: 0; }
.form-status:empty { display: none; }
.form-status { font-weight: 600; }
.form-status.is-error { color: #B23A2B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn-primary { justify-self: start; }

/* ---------- Narrow and wider screens ---------- */
/* Narrow phones (320–370): Support moves to the footer; the track pill and the longest section titles fit the column */
@media (max-width: 370px) {
  .nav-support { display: none; }
  .col-list { --col-gap: 12px; }
  .listen-pill { font-size: 13px; gap: 5px; padding: 7px 9px 7px 6px; }
  .listen-icon, .eq { width: 20px; height: 20px; } .listen-icon::before { left: 7px; top: 5px; }
  .section-head h2 { font-size: 34px; }
}
@media (min-width: 640px) {
  .beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beat:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 16px); }
  .col-list { --cols: 3; }
  .plush-tag { font-size: 15px; padding: 7px 12px 6px; }
}
/* The pile's three wide rows (8·9·8) on landscape screens and from 1024 px. Portrait tablets keep the taller
   phone pile, where each plushie is 130 px across rather than 78 px at 768. */
@media (min-width: 640px) and (orientation: landscape), (min-width: 1024px) {
  .plush-pile { grid-template-columns: repeat(18, minmax(0, 1fr)); max-width: none; padding: 8px 8px 36px; }
  .plush { grid-row: var(--wr); grid-column: var(--wc) / span 2; }
}
@media (min-width: 760px) {
  :root { --gutter: max(32px, var(--safe)); }
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 120px; }
  .hero-title { font-size: clamp(46px, 7.4vw, 108px); }
  .band > .wrap, .fair-inner { padding: 120px 0; }
  .closing-inner { padding-top: 120px; }
  .col-list { --col-gap: 20px; }
}
@media (min-width: 1024px) {
  .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .beat:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
  .col-list { --cols: 5; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--reveal-delay, 0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms); }
  .js [data-reveal].is-revealed { opacity: 1; transform: none; }
  .hero-arch { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
  .sun { animation: pop .6s cubic-bezier(.3,1.5,.5,1) .15s both; }
  .hero-plush, .hero-phone { animation: plush-in .55s cubic-bezier(.3,1.6,.5,1) .3s both; }
  .col-play[aria-pressed=true] .eq i { animation: eq .9s ease-in-out infinite; }
  .col-play[aria-pressed=true] .eq i:nth-child(2) { animation-delay: -.3s; } .col-play[aria-pressed=true] .eq i:nth-child(3) { animation-delay: -.6s; }
  .hero-copy > * { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; } .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; } .hero-copy > :nth-child(5) { animation-delay: .24s; }
  /* Plushies: each drops in on its own seeded delay as the pile scrolls in, wiggles on hover and on a tap. */
  .js .plush-pile[data-reveal] { transform: none; }
  .js .plush-pile.is-revealed .plush-btn { animation: plush-drop .55s cubic-bezier(.3,1.5,.5,1) var(--d) both; }
  .plush-btn img { transition: translate .25s cubic-bezier(.3,1.6,.5,1), scale .25s cubic-bezier(.3,1.6,.5,1); }
  .plush-btn:focus-visible img, .plush.is-poked img { translate: 0 -6%; scale: 1.06; }
  .plush.is-poked img { animation: wiggle .5s ease-in-out; }
  .plush-tag { translate: -50% 0; transition: opacity .15s ease, translate .2s cubic-bezier(.3,1.6,.5,1); }
  .plush-btn:focus-visible .plush-tag, .plush.is-poked .plush-tag, html:not(.js) .plush-tag { translate: -50% 30%; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .plush-btn:hover img { translate: 0 -6%; scale: 1.06; animation: wiggle .5s ease-in-out; }
  .plush-btn:hover .plush-tag { translate: -50% 30%; }
}
@keyframes plush-drop { from { opacity: 0; translate: 0 -40%; scale: .6; } }
@keyframes wiggle { 25% { rotate: -7deg; } 55% { rotate: 6deg; } 80% { rotate: -2deg; } }
@keyframes eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1.2); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes pop { from { opacity: 0; scale: .3; } }
@keyframes plush-in { from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(.8); } }