:root{
  --cream:#efe6d6;
  --cream-2:#e7dcc7;
  --ink:#1a1614;
  --ink-soft:#5a5148;
  --line:#d8cbb2;
  --spoke:#f4f0e8;
  --accent:#171717;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100dvh;
  background:
    radial-gradient(120% 80% at 50% 0%, #f5eee0 0%, var(--cream) 46%, var(--cream-2) 100%);
  color:var(--ink);
  font-family:"Nunito",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  padding:clamp(16px,4vw,40px) 18px;
}
.stage{
  width:100%;max-width:560px;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.6vw,22px);
  text-align:center;
}

/* brand */
.brand{display:flex;flex-direction:column;align-items:center;gap:2px}
.wordmark{
  font-family:"Baloo 2",cursive;font-weight:800;
  font-size:clamp(44px,11vw,80px);line-height:.92;margin:0;
  letter-spacing:-.01em;color:var(--ink);
}
.ticker{
  margin:0;font-weight:800;letter-spacing:.28em;
  font-size:clamp(12px,3vw,15px);color:var(--ink-soft);
  padding-left:.28em;
}

/* cat + throbber */
.cat-wrap{
  position:relative;
  aspect-ratio:687/1010;
  height:min(56vh,540px);
  max-width:100%;
  cursor:pointer;
  user-select:none;
  filter:drop-shadow(0 24px 30px rgba(60,40,20,.22));
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.cat-wrap:active{transform:scale(.98)}
.cat-wrap.pet{animation:wob .5s ease}
@keyframes wob{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-2.2deg)}
  60%{transform:rotate(1.8deg)}
}
.cat{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.throbber{
  position:absolute;left:55%;top:18%;
  width:20%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  animation:spin 1s steps(12,end) infinite;
  will-change:transform;
}
.throbber i{
  position:absolute;left:calc(50% - 3.2%);top:6%;
  width:6.4%;height:24%;border-radius:99px;
  background:var(--spoke);
  transform-origin:50% 183%;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* loading bar */
.loadbox{width:min(340px,86%);display:flex;flex-direction:column;gap:9px;margin-top:2px}
.bar{
  height:12px;border-radius:99px;background:#e0d3ba;
  border:1px solid var(--line);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(90,70,40,.18);
}
.fill{
  display:block;height:100%;width:0%;
  border-radius:99px;
  background:linear-gradient(90deg,#3a332c,#1a1614);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.status{
  margin:0;font-weight:700;font-size:14px;color:var(--ink-soft);
  letter-spacing:.01em;
}
#pct{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

/* cta */
.cta{display:flex;flex-direction:column;align-items:center;gap:11px;width:min(340px,86%)}
.buy{
  width:100%;padding:15px 22px;border-radius:16px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:"Baloo 2",cursive;font-weight:800;font-size:19px;
  box-shadow:0 8px 0 #000, 0 14px 22px rgba(0,0,0,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
.buy:hover{transform:translateY(-2px);box-shadow:0 10px 0 #000,0 18px 26px rgba(0,0,0,.26)}
.buy:active{transform:translateY(6px);box-shadow:0 2px 0 #000,0 6px 12px rgba(0,0,0,.22)}
.ca{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-radius:12px;cursor:pointer;
  background:#f7f1e6;border:1px dashed #cbbd9f;color:var(--ink-soft);
  font-family:inherit;font-weight:700;font-size:13px;
  transition:border-color .15s ease,background .15s ease;
}
.ca:hover{border-color:#a9986f;background:#fbf7ee}
.ca-label{
  font-weight:800;color:#fff;background:var(--accent);
  padding:3px 8px;border-radius:7px;font-size:11px;letter-spacing:.08em;
}
.ca-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}

/* socials */
.socials{display:flex;gap:10px;margin-top:2px}
.socials a{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;color:var(--ink);
  background:#f7f1e6;border:1px solid var(--line);
  transition:transform .14s ease,background .14s ease,color .14s ease;
}
.socials a:hover{transform:translateY(-3px);background:var(--accent);color:#fff}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--accent);color:#fff;padding:10px 18px;border-radius:12px;
  font-weight:700;font-size:14px;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .throbber{animation:none;transform:translate(-50%,-50%) rotate(0)}
  .fill{transition:none}
  .cat-wrap.pet{animation:none}
}