:root {
  --cobalt: #1f3bff; --tomato: #ff3b2f; --acid: #eeff3a; --lime: #a6f03b; --bubblegum: #ff6fb5;
  --paper: #f6f1e7; --cream: #fff6e3; --blush: #ffd3dc; --ink: #121212;
  --display: "Anton", "Impact", system-ui, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink); min-height: 100dvh;
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background-image: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.2px); background-size: 14px 14px;
}
a { color: inherit; }
.wrap { max-width: 520px; margin: 0 auto; padding: 28px 16px 48px; }
.mast { font: 400 clamp(88px, 30vw, 150px)/0.9 var(--display); letter-spacing: -1px; }
body { overflow-x: hidden; }
.home { font-family: var(--marker); color: var(--tomato); font-size: 22px; text-decoration: none; display: inline-block; transform: rotate(-4deg); margin-bottom: 14px; }
.note { font-family: var(--marker); color: var(--tomato); font-size: 22px; transform: rotate(-4deg); display: inline-block; margin: 6px 0 0 36%; }
.lede { font-size: 19px; font-weight: 700; margin: 22px 0 26px; max-width: 30ch; }
.logo { display: block; width: 200px; height: auto; transform: rotate(-3deg); }
.home-logo { display: inline-block; margin-bottom: 14px; }
.home-logo img { width: 84px; height: auto; display: block; }
.star { position: absolute; right: 18px; top: 26px; width: 70px; transform: rotate(14deg); }
.hero { position: relative; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 17px 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--cream); font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1;
  box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .12s ease;
}
.btn:active { transform: scale(.97); }
.btn.acid { background: var(--acid); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: default; }
section { margin-top: 56px; }
.headline { font: 400 clamp(38px, 11vw, 56px)/1.02 var(--display); text-transform: uppercase; margin: 26px 0 0; }
.fine { font-size: 14px; font-weight: 700; opacity: .6; text-align: center; margin-top: 10px; }
.kicker { font: 400 34px/1.05 var(--display); text-transform: uppercase; margin-bottom: 18px; }
.kicker.small { font-size: 26px; margin-bottom: 8px; }
.stickies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sticky { padding: 16px 14px; border-radius: 6px; font-weight: 800; font-size: 16px; line-height: 1.25; box-shadow: 0 8px 14px rgba(0,0,0,.12); }
.s1 { background: var(--acid); transform: rotate(-2deg); }
.s2 { background: var(--blush); transform: rotate(1.5deg); }
.s3 { background: var(--cream); transform: rotate(1deg); }
.s4 { background: var(--lime); transform: rotate(-1.5deg); }
.scrawl { font-family: var(--marker); color: var(--tomato); font-size: 24px; transform: rotate(-3deg); margin-top: 20px; }
.decks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.deck { border-radius: 18px; padding: 14px 14px 16px; font-weight: 800; font-size: 15px; line-height: 1.25; min-height: 150px; box-shadow: 0 10px 18px rgba(0,0,0,.14); }
.deck small { display: block; font: 400 15px var(--display); letter-spacing: .8px; margin-bottom: 8px; }
.deck:nth-child(odd) { transform: rotate(-1.4deg); }
.deck:nth-child(even) { transform: rotate(1.2deg); }
.d-love { background: var(--blush); color: #c8102e; }
.d-deep { background: var(--cobalt); color: var(--cream); }
.d-cream { background: var(--cream); color: var(--cobalt); }
.d-cobalt { background: #3b2bd9; color: var(--acid); }
.d-lime, .d-lime2 { background: var(--lime); color: var(--ink); }
.d-acid { background: var(--acid); color: var(--cobalt); }
.d-spicy { background: var(--tomato); color: var(--cream); }
.d-hot { background: var(--ink); color: var(--tomato); }
.d-hot2 { background: var(--bubblegum); color: var(--ink); }
.steps { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 16px 16px 16px 64px; background: var(--cream); border-radius: 16px; box-shadow: 0 8px 14px rgba(0,0,0,.08); }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 10px; font: 400 36px var(--display); color: var(--tomato); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { border: 2px solid var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 15px; background: #fff; }
.chips span:nth-child(3n+1) { transform: rotate(-2deg); }
.chips span:nth-child(3n+2) { transform: rotate(1.5deg); }
.cta { text-align: center; }
.cta .big { font: 400 32px/1.1 var(--display); text-transform: uppercase; margin-bottom: 20px; }
.others { border-top: 2px dashed rgba(0,0,0,.2); padding-top: 22px; font-size: 16px; }
footer { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; font-weight: 700; margin-top: 36px; opacity: .8; }

/* share page */
.card { border-radius: 22px; padding: 22px 18px; box-shadow: 0 14px 28px rgba(0,0,0,.18); transform: rotate(-1deg); background: var(--cobalt); color: var(--cream); }
.card small { font: 400 15px var(--display); letter-spacing: 1px; opacity: .9; }
.card h1 { font-size: 24px; line-height: 1.25; margin-top: 10px; }
.from { font-family: var(--marker); color: var(--tomato); font-size: 22px; transform: rotate(-3deg); margin: 22px 0 14px; }
.bubble { position: relative; background: var(--cream); color: var(--ink); border-radius: 18px; padding: 16px; min-height: 76px; box-shadow: 0 8px 16px rgba(0,0,0,.1); overflow: hidden; }
.bubble b { display: block; font-size: 12px; letter-spacing: .8px; opacity: .6; text-transform: uppercase; margin-bottom: 4px; }
.bubble .blurred { filter: blur(7px); user-select: none; }
.lock { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--marker); color: var(--tomato); font-size: 20px; transform: rotate(-3deg); }
.stamp { position: absolute; right: 12px; top: 10px; font: 400 14px var(--display); color: var(--tomato); border: 2px solid var(--tomato); border-radius: 6px; padding: 2px 6px; transform: rotate(8deg); }
form { display: grid; gap: 12px; margin-top: 18px; }
textarea, input { width: 100%; border: 2px solid var(--ink); border-radius: 16px; padding: 14px; font-family: inherit; font-size: 17px; background: #fff; color: var(--ink); }
textarea { min-height: 110px; resize: vertical; }
.err { color: var(--tomato); font-weight: 700; }
.muted { text-align: center; opacity: .75; margin-top: 12px; }
.stack { display: grid; gap: 12px; margin-top: 20px; }
.loader { font-family: var(--marker); font-size: 24px; text-align: center; padding: 80px 0; animation: wob 1s ease-in-out infinite alternate; }
@keyframes wob { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .loader { animation: none; } }

/* reveal: the locked bubble flips to their answer */
.flip-wrap { position: relative; perspective: 1200px; }
.flip { display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1.15); }
.flip.done { transform: rotateY(180deg); }
.face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); background: var(--acid); }
.face.back .their { font-size: 20px; font-weight: 800; line-height: 1.3; padding-right: 70px; }
.stamp.slam { animation: slam .45s .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes slam { from { transform: rotate(8deg) scale(3); opacity: 0; } to { transform: rotate(8deg) scale(1); opacity: 1; } }
.bit { position: absolute; left: 50%; top: 50%; pointer-events: none; font-weight: 900; animation: bit 1.3s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes bit { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 60px)) rotate(var(--r)) scale(1); opacity: 0; } }
form.leave { animation: leave .26s ease-in forwards; }
@keyframes leave { to { opacity: 0; transform: translateY(24px) scale(.97); } }
.btn.busy { animation: pulse .7s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(.97); opacity: .8; } }
.bubble.mine { margin-top: 14px; transform: rotate(.8deg); }
.bubble.mine.rise { animation: rise .5s .9s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px) rotate(4deg); } to { opacity: 1; transform: translateY(0) rotate(.8deg); } }

/* the App Store push */
.cta-card { position: relative; margin-top: 30px; background: var(--ink); color: var(--cream); border-radius: 26px; padding: 30px 20px 22px; transform: rotate(-1.2deg); box-shadow: 0 18px 34px rgba(0,0,0,.28); overflow: visible; }
.cta-card.pop { animation: pop .6s 1.35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(40px) rotate(4deg) scale(.9); } to { opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1); } }
.cta-note { position: absolute; top: -18px; right: 14px; background: var(--acid); color: var(--ink); font-family: var(--marker); font-size: 19px; padding: 4px 12px; border-radius: 8px; transform: rotate(5deg); box-shadow: 0 6px 12px rgba(0,0,0,.2); }
.cta-card h2 { font: 400 38px/1.02 var(--display); text-transform: uppercase; color: var(--acid); }
.cta-card p { margin: 10px 0 20px; font-size: 16px; opacity: .9; }
.store-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--cream); color: var(--ink); text-decoration: none; border-radius: 999px; padding: 16px 20px; font-weight: 900; font-size: 18px; position: relative; overflow: hidden; animation: nudge 3.2s 2.4s ease-in-out infinite; }
.store-btn svg { width: 20px; height: 24px; flex: none; }
.store-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.2s 2.4s ease-in-out infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes nudge { 0%, 70%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-2deg) scale(1.04); } 82% { transform: rotate(2deg) scale(1.04); } 88% { transform: rotate(0) scale(1); } }
.store-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .flip { transition: none; } .stamp.slam, .bubble.mine.rise, .cta-card.pop, .store-btn, .store-btn::after, form.leave { animation: none; }
}

/* language picker */
.langs { margin-top: 18px; font-size: 15px; font-weight: 700; }
.langs summary { cursor: pointer; list-style: none; opacity: .8; }
.langs summary::-webkit-details-marker { display: none; }
.langs nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.langs a { text-decoration: none; border: 1.5px solid rgba(0,0,0,.25); border-radius: 999px; padding: 6px 12px; background: #fff; }
.langs a[aria-current] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
[dir="rtl"] .star { right: auto; left: 18px; }
[dir="rtl"] .note { margin: 6px 36% 0 0; }
[dir="rtl"] .steps li { padding: 16px 64px 16px 16px; }
[dir="rtl"] .steps li::before { left: auto; right: 18px; }

/* official App Store badge */
.store-badge { display: flex; justify-content: center; margin: 4px auto 0; width: max-content; transition: transform .12s ease; }
.store-badge img { display: block; height: 60px; width: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); }
.store-badge:active { transform: scale(.96); }
.cta-card .store-badge img { height: 66px; filter: none; }
.store-badge.wiggle { animation: nudge 3.2s 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .store-badge.wiggle { animation: none; } }