@font-face { font-family: 'FuzzyBubbles'; src: url('Cherry_Bomb_One,Fuzzy_Bubbles,Pacifico/Fuzzy_Bubbles/FuzzyBubbles-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'FuzzyBubbles'; src: url('Cherry_Bomb_One,Fuzzy_Bubbles,Pacifico/Fuzzy_Bubbles/FuzzyBubbles-Bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Pacifico'; src: url('Cherry_Bomb_One,Fuzzy_Bubbles,Pacifico/Pacifico/Pacifico-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'CherryBombOne'; src: url('Cherry_Bomb_One,Fuzzy_Bubbles,Pacifico/Cherry_Bomb_One/CherryBombOne-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }

:root {
  --bg: #fff1f6; --card: #fffafc; --hover: #ffe4ee; --line: #f5c6d9;
  --text: #6b3a55; --text-p: #7a4560; --head: #d6457f;
  --pink: #ffc4dd; --accent: #f0679c; --hi: #b3306a; --soft: #c04b80;
  --muted: #94577a; --mint: #26805f; --ink: #4a2038;
  --f1: #b35a45; --f2: #e0916b; --f3: #fceee0; --f4: #f2a6c9; --f5: #7a3355;
  --flag-h: linear-gradient(180deg, var(--f1) 0 20%, var(--f2) 20% 40%, var(--f3) 40% 60%, var(--f4) 60% 80%, var(--f5) 80% 100%);
  --flag-v: linear-gradient(90deg, var(--f1) 0 20%, var(--f2) 20% 40%, var(--f3) 40% 60%, var(--f4) 60% 80%, var(--f5) 80% 100%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 2px rgba(150, 50, 100, 0.12), 0 4px 12px rgba(150, 50, 100, 0.1), 0 12px 32px rgba(150, 50, 100, 0.08);
  --gap: 28px;
}
* { box-sizing: border-box; }
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: 'Pacifico', cursive; cursor: default; }
::selection { background: var(--accent); color: var(--bg); }
a, button { cursor: pointer; }
#page { position: relative; z-index: 1; transition: opacity 0.5s cubic-bezier(0.45, 0, 0.25, 1); }
.box { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); }

.fade { opacity: 0; will-change: opacity; }
html.ready .fade { animation: fade 1.3s cubic-bezier(0.45, 0, 0.25, 1) var(--dl, 0s) forwards; }
@keyframes fade { to { opacity: 1; } }

nav { position: relative; padding: 20px 24px; text-align: center; background: var(--flag-h); box-shadow: 0 6px 18px rgba(150, 50, 100, 0.25), 0 1px 3px rgba(150, 50, 100, 0.2); overflow: hidden; }
nav::before, .flag::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; will-change: translate;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  translate: -100% 0; animation: shimmer-x 6.1s cubic-bezier(0.45, 0, 0.25, 1) var(--t61, 0.6s) infinite;
}
@keyframes shimmer-x { 0% { translate: -72% 0; } 38.52%, 100% { translate: 72% 0; } }
@keyframes shimmer-y { 0%, 50% { translate: 0 -72%; } 88.52%, 100% { translate: 0 72%; } }
@keyframes shimmer-xb { 0%, 50% { translate: -72% 0; } 88.52%, 100% { translate: 72% 0; } }

.logo {
  position: relative; display: inline-block; font: 700 24px 'FuzzyBubbles', cursive; color: var(--head);
  -webkit-text-stroke: 9px var(--bg); paint-order: stroke fill;
  transform-origin: 50% 85%; will-change: transform; backface-visibility: hidden;
  animation: boop 3.6s ease-in-out var(--t36, 1.4s) infinite;
}
.logo::before, .logo::after {
  content: ""; position: absolute; top: -2px; width: 14px; height: 14px; opacity: 0; pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f0679c' d='M16 28S3 20 3 11c0-4 3-7 7-7 3 0 5 2 6 4 1-2 3-4 6-4 4 0 7 3 7 7 0 9-13 17-13 17z'/%3E%3C/svg%3E");
}
.logo::before { left: 10%; --hx: -5px; --hr: -14deg; animation: heart 3.6s ease-out calc(var(--t36, 1.4s) + 0.15s) infinite; }
.logo::after { right: 8%; --hx: 6px; --hr: 16deg; animation: heart 3.6s ease-out calc(var(--t36, 1.4s) + 0.4s) infinite; }
@keyframes boop {
  0% { transform: scale(1, 1) translateY(0); }
  4.5% { transform: scale(1.14, 0.84) translateY(0); }
  10% { transform: scale(0.94, 1.1) translateY(-7px); }
  15.5% { transform: scale(1.05, 0.95) translateY(0); }
  20% { transform: scale(0.99, 1.02) translateY(-1px); }
  25%, 100% { transform: scale(1, 1) translateY(0); }
}
@keyframes heart {
  0% { opacity: 0; transform: translate(0, 4px) scale(0.4) rotate(0deg); }
  6% { opacity: 1; }
  30%, 100% { opacity: 0; transform: translate(var(--hx), -20px) scale(1.15) rotate(var(--hr)); }
}

.float { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.float .sway { position: absolute; inset: 0; }
.float .f { position: absolute; left: calc(var(--x) - var(--h)); bottom: 0; width: var(--s); height: var(--s); color: var(--accent); opacity: 0; animation: rise 48s linear var(--fd) infinite; will-change: transform, opacity; backface-visibility: hidden; }
.float .h { color: var(--head); }
.float .t { width: auto; height: auto; font: 700 var(--s) / 1 'FuzzyBubbles', cursive; white-space: nowrap; color: var(--head); }
.float svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes rise {
  0% { transform: translate3d(0, 20vh, 0); opacity: 0; }
  10%, 90% { opacity: var(--o); }
  100% { transform: translate3d(0, -115vh, 0); opacity: 0; }
}

.btn, .btn-o {
  display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: 8px;
  text-decoration: none; font: 700 18px 'FuzzyBubbles', cursive; letter-spacing: 0.5px;
  color: var(--ink); background: var(--pink); box-shadow: 0 3px 8px rgba(150, 50, 100, 0.25), 0 1px 3px rgba(150, 50, 100, 0.2);
  transform: translate3d(0, 0, 0); will-change: transform;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), background 0.55s var(--ease), border-color 0.55s var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translate3d(0, -2px, 0); background: #ffd6e8; box-shadow: 0 6px 14px rgba(150, 50, 100, 0.3); }
.btn-o { padding: 14px 30px; color: var(--hi); background: transparent; border: 2px solid var(--line); box-shadow: none; }
.btn-o:hover, .btn-o:focus-visible { transform: translate3d(0, -2px, 0); background: var(--card); border-color: var(--accent); }

.sbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 9px 10px; border: 0; border-radius: 6px;
  font: 700 12px 'FuzzyBubbles', cursive; letter-spacing: 0.3px; color: var(--hi); background: var(--bg);
  transform: translate3d(0, 0, 0); will-change: transform;
  transition: transform 0.55s var(--ease), background 0.55s var(--ease), color 0.55s var(--ease);
}
.sbtn:hover, .sbtn:focus-visible { transform: translate3d(0, -2px, 0); background: var(--hover); }
.sbtn:active, .sbtn.copied { background: var(--pink); color: var(--ink); }
.copied-text, .copied .copy-text { display: none; }
.copied .copied-text { display: inline; }

.hint { position: relative; }
.hint::after {
  content: attr(data-hint); position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  padding: 8px 18px; border-radius: 8px; background: var(--pink); color: var(--ink);
  font: 700 22px / 1.2 'FuzzyBubbles', cursive; white-space: nowrap; opacity: 0; pointer-events: none;
}
.hint.copied::after { content: "Copied!"; }
.hint:hover::after, .hint:focus-visible::after { animation: fade 0.6s cubic-bezier(0.45, 0, 0.25, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; }
  html.ready .fade, html.ready .bar i { animation: none !important; }
  nav::before, .flag::before, .logo, .logo::before, .logo::after { animation: none; }
  .hint:hover::after, .hint:focus-visible::after { animation: none; opacity: 1; }
  .float { display: none; }
}