@font-face{font-family:'Inter Tight';src:url(/fonts/inter-tight-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/inter-700.woff2) format('woff2');font-weight:700;font-display:swap}
/* --y1..--y3 are the logo's own background (top, middle, floor), so the cut-out dog sits in the same yellow studio */
:root{--y1:#f4b80f;--y2:#fbc40c;--y3:#fed11e;--ink:#111111;--ink2:rgba(17,17,17,.74);--muted:rgba(17,17,17,.68);--hi:#ffd84a;
  --word:clamp(88px,min(34vw,31vh),260px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--y1);color-scheme:light}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:var(--ink);
  font:400 17px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(60% 50% at 50% 50%,rgba(255,228,110,.5),rgba(255,228,110,0) 70%),linear-gradient(180deg,var(--y1) 0%,var(--y2) 50%,var(--y3) 100%)}
main{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(18px,3.5vh,40px) 16px 0;overflow-x:hidden;overflow-x:clip}

/* the name sits behind the dog: its ears and head overlap the bottom of the letters */
.word{position:relative;z-index:0;margin:0;font:800 var(--word)/.8 'Inter Tight','Inter',system-ui,-apple-system,sans-serif;letter-spacing:-.045em;
  color:var(--ink);white-space:nowrap;padding-right:.045em}
.dog{position:relative;z-index:1;margin:calc(var(--word) * -.3) 0 0}
.dog img{display:block;height:auto;width:min(84vw,400px);
  width:max(220px,min(84vw,calc((100svh - var(--word) * .5 - 250px) * .713),470px))}
.dog::after{content:"";position:absolute;z-index:-1;left:14%;right:10%;bottom:-2.2%;height:6.5%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,66,0,.34),rgba(122,66,0,0))}

.tag{margin:clamp(12px,2.2vh,22px) 0 0;font:700 clamp(19px,2.3vw,26px)/1.25 'Inter',system-ui,sans-serif;letter-spacing:-.012em}
.tag b{font-weight:700;background:var(--ink);color:var(--hi);border-radius:8px;padding:0 .3em;margin-left:.1em}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(14px,2.4vh,24px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:700 16px/1 'Inter',system-ui,sans-serif;text-decoration:none;
  transition:transform .2s ease,background-color .2s ease}
.btn-buy{background:var(--ink);color:var(--hi)}
a.btn:hover{transform:translateY(-1px)}
a.btn:not(.btn-buy):hover{background:rgba(17,17,17,.07)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn.is-off{cursor:default}
.btn.is-off::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--hi)}

.ca-wrap{display:grid;justify-items:center;gap:8px;max-width:100%;margin:clamp(20px,3.6vh,36px) 0 0}
.ca{display:flex;align-items:center;gap:12px;max-width:min(560px,100%);padding:11px 16px;border-radius:14px;background:var(--ink);color:#fff}
.ca span{flex:none;font-weight:700;color:var(--hi)}
.ca code{font:600 14px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all;user-select:all;text-align:left}
.ca-note{margin:0;font-size:14px;color:var(--ink2)}
footer{padding:28px 16px calc(28px + env(safe-area-inset-bottom));text-align:center;font-size:12px;line-height:1.45;color:var(--muted)}
footer p{max-width:620px;margin:0 auto}

@media (prefers-reduced-motion:no-preference){
  .word{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .dog{animation:pop 1s .12s cubic-bezier(.2,.8,.25,1.12) both}
  .dog img{transform-origin:50% 94%;animation:laugh 4.2s 1.4s ease-in-out infinite}
  .tag,.ctas,.ca-wrap{animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
  .btn.is-off::before{animation:ping 1.8s ease-out infinite}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes pop{from{opacity:0;transform:translateY(36px) scale(.95)}}
/* a short fit of laughter, then still */
@keyframes laugh{0%,36%,100%{transform:none}5%{transform:rotate(-2deg) translateY(-3px)}10%{transform:rotate(1.8deg)}
  15%{transform:rotate(-1.5deg) translateY(-2px)}20%{transform:rotate(1.1deg)}25%{transform:rotate(-.7deg) translateY(-1px)}30%{transform:rotate(.3deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,216,74,.75)}70%,100%{box-shadow:0 0 0 8px rgba(255,216,74,0)}}