@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
/* ===== the button ===== */
.gbtn{--h:60px;position:relative;isolation:isolate;height:var(--h);padding:0 30px 0 24px;border:0;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  font:600 17px/1 Inter,sans-serif;letter-spacing:.01em;color:#FFF6E2;
  background:linear-gradient(180deg,#B98237 0%,#9A651B 55%,#8A5713 100%);
  box-shadow:0 0 0 5px rgba(212,163,90,.16),0 14px 38px -10px rgba(212,163,90,.75),inset 0 1px 0 rgba(255,236,196,.35),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .3s,box-shadow .3s}
.gbtn:active{transform:scale(.97)}
.gbtn .glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 80% at 50% 115%,rgba(255,221,150,.75) 0%,rgba(255,221,150,0) 70%);z-index:-1;animation:breathe 3.2s ease-in-out infinite}
.gbtn .halo{position:absolute;inset:-26px -30px;border-radius:999px;background:radial-gradient(closest-side,rgba(212,163,90,.35),rgba(212,163,90,0));z-index:-2;filter:blur(4px);animation:breathe 3.2s ease-in-out infinite}
.gbtn .ring{position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 72%,rgba(255,234,190,.0) 74%,#FFE9B8 86%,rgba(255,234,190,0) 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:orbit 3s linear infinite}
.gbtn .dots{position:absolute;inset:-30px -20px;pointer-events:none;z-index:1}
.gbtn .dots i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFE3A6;opacity:0;animation:rise 3.4s ease-out infinite}
.gbtn .ic{position:relative;width:24px;height:24px;flex:none}.gbtn .ic svg{position:absolute;inset:0}
.gbtn .ic .big{animation:bigstar 2.8s ease-in-out infinite;transform-origin:12px 12px}.gbtn .ic .small{animation:smallstars 2.8s ease-in-out infinite;transform-origin:12px 12px}
.gbtn .lbl{position:relative;text-shadow:0 1px 0 rgba(90,52,8,.35)}
/* idle / disabled */
.gbtn.off{background:linear-gradient(180deg,#2A231B,#221C15);color:#6B5E4E;box-shadow:0 0 0 1px #2F271E,inset 0 1px 0 rgba(255,255,255,.04);cursor:default}
.light .gbtn.off{background:linear-gradient(180deg,#EADCBC,#E2D2AE);color:#A8987D;box-shadow:0 0 0 1px #DCCBA6}
.gbtn.off .glow,.gbtn.off .halo,.gbtn.off .ring,.gbtn.off .dots{opacity:0;animation:none;transition:opacity .4s}.gbtn.off .ic svg{animation:none}.gbtn.off .ic .big{opacity:1;transform:none}.gbtn.off .ic .small{opacity:0}
.gbtn.off .ic svg path{fill:currentColor}
.gbtn .glow,.gbtn .halo,.gbtn .ring,.gbtn .dots{transition:opacity .5s}
.light .gbtn{box-shadow:0 0 0 5px rgba(150,97,24,.12),0 14px 30px -12px rgba(150,97,24,.7),inset 0 1px 0 rgba(255,236,196,.35),inset 0 -1px 0 rgba(0,0,0,.25)}
@keyframes orbit{to{--a:360deg}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes rise{0%{opacity:0;transform:translateY(8px) scale(.6)}15%{opacity:.9}100%{opacity:0;transform:translateY(-26px) scale(1)}}
@keyframes bigstar{0%,35%{transform:scale(0) rotate(-45deg);opacity:0}50%,85%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(0) rotate(45deg);opacity:0}}
@keyframes smallstars{0%,30%{opacity:1;transform:scale(1)}45%,90%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gbtn *{animation:none!important}}