body { background:#fff; color:#1b1446; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
.no-js .reveal { opacity:1; transform:none; }
@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-12px) rotate(var(--r,0deg)); } }
@keyframes blob { 0%,100%{ border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; } 50%{ border-radius:61% 39% 38% 62% / 56% 62% 38% 44%; } }
@keyframes ping2 { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.4); opacity:0; } }
@keyframes scan { 0%,100%{ top:6%; } 50%{ top:88%; } }
@keyframes dash { to { stroke-dashoffset:0; } }
@keyframes pop { 0%{ opacity:0; transform:translateY(10px) scale(.97); } 100%{ opacity:1; transform:none; } }
.floaty { animation:floaty 6s ease-in-out infinite; }
.blob { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; animation:blob 14s ease-in-out infinite; }
.ping2 { animation:ping2 1.8s cubic-bezier(0,0,.2,1) infinite; }
.scanline { position:absolute; left:4%; right:4%; height:3px; border-radius:3px; background:#22D3A6; box-shadow:0 0 14px 3px rgba(34,211,166,.55); animation:scan 2.8s ease-in-out infinite; }
.draw { stroke-dasharray:300; stroke-dashoffset:300; animation:dash 2s .5s ease forwards; }
.pop { animation:pop .45s ease both; }
.grain { background-image:radial-gradient(rgba(91,61,245,.16) 1.2px, transparent 1.2px); background-size:22px 22px; }
.grid-lines { background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size:32px 32px; }
.qr rect { transition:opacity .3s ease; }
@media (prefers-reduced-motion: reduce){
  .floaty,.blob,.ping2,.scanline,.pop{ animation:none; }
  .draw{ animation:none; stroke-dashoffset:0; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}
details > summary { list-style:none; }
details > summary::-webkit-details-marker { display:none; }
details[open] .chev { transform:rotate(45deg); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid #22D3A6; outline-offset:2px; }