.btn{--btn-w:170px;--btn-h:40px;--radius:10px;--color-blue:var(--color-neon,#d4ff00);--color-blue-deep:var(--color-neon,#a8cc00);--color-orange:var(--color-ink,#1a1a1a);--color-orange-deep:#000;--border-thickness:2px;--paint-duration:.85s;--paint-ease:cubic-bezier(.65, 0, .35, 1);--progress:0;width:min(var(--btn-w), 90vw);height:var(--btn-h);cursor:pointer;border-radius:var(--radius);isolation:isolate;will-change:transform;background:0 0;border:none;padding:0;text-decoration:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1);display:inline-block;position:relative;transform:translate(0)scale(1)}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.btn *{box-sizing:border-box}.btn:hover,.btn.is-hover{transform:translate(0)scale(1.03)}.btn:focus-visible{outline-offset:6px;outline:2px solid #fff}.btn .glow-ring{inset:calc(var(--border-thickness) * -1);border-radius:calc(var(--radius) + var(--border-thickness));padding:var(--border-thickness);z-index:0;background:conic-gradient(from var(--angle), var(--color-neon,#d4ff00) 0deg, var(--color-neon,#d4ff00) 360deg);-webkit-mask-composite:xor;will-change:transform, --angle;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;animation:4s linear infinite paintbtn-spin-ring;position:absolute;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.btn .glow-ring:after{content:"";border-radius:inherit;background:inherit;filter:blur(6px);opacity:.65;z-index:-1;position:absolute;inset:0}@keyframes paintbtn-spin-ring{to{--angle:360deg}}.btn.is-hover .glow-ring,.btn:hover .glow-ring{filter:brightness(1.25)}.btn .btn__inner{z-index:1;border-radius:var(--radius);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.btn .btn__base{z-index:1;background:radial-gradient(120% 160% at 30% 20%, color-mix(in oklab, var(--color-neon,#d4ff00) 70%, #fff) 0%, var(--color-blue) 45%, var(--color-blue-deep) 100%);position:absolute;inset:0}.btn .btn__paint{z-index:2;width:calc(var(--progress) * 100%);background:linear-gradient(90deg, #333 0%, var(--color-orange) 55%, var(--color-orange-deep) 100%);transition:width var(--paint-duration) var(--paint-ease);will-change:width;position:absolute;inset:0}.btn .btn__paint:after{content:"";filter:blur(4px);opacity:0;mix-blend-mode:screen;pointer-events:none;background:linear-gradient(#000,#333 35%,#1a1a1a 65%,#000 100%);width:16px;transition:opacity .35s;position:absolute;top:0;bottom:0;right:0;transform:translate(50%)}.btn.is-active .btn__paint:after{opacity:.8}.btn .btn__trail{top:50%;left:calc(var(--progress) * 100%);z-index:3;opacity:0;transition:left var(--paint-duration) var(--paint-ease), opacity .3s ease;pointer-events:none;flex-direction:column;gap:6px;display:flex;position:absolute;transform:translate(-115%,-50%)}.btn.is-active .btn__trail{opacity:.55}.btn .trail-line{filter:blur(.5px);background:linear-gradient(270deg,#1a1a1ae6,#1a1a1a00);border-radius:2px;height:2px;animation:1s ease-in-out infinite paintbtn-trail-flicker}.btn .trail-line:first-child{width:34px}.btn .trail-line:nth-child(2){width:22px;animation-delay:.12s}.btn .trail-line:nth-child(3){width:14px;animation-delay:.24s}@keyframes paintbtn-trail-flicker{0%,to{opacity:.35;transform:translate(0)}50%{opacity:.8;transform:translate(-4px)}}.btn .btn__runner{top:50%;left:calc(var(--progress) * 100%);aspect-ratio:1609/1124;z-index:4;opacity:0;width:auto;height:78%;transition:left var(--paint-duration) var(--paint-ease), opacity .25s ease;will-change:left, transform;position:absolute;transform:translate(-46%,-50%)}.btn.is-active .btn__runner{opacity:1;animation:.5s ease-in-out infinite paintbtn-runner-bounce}.btn .btn__runner svg{width:100%;height:100%;display:block;overflow:visible}.btn .runner-figure path{fill:#0a0a0a}@keyframes paintbtn-runner-bounce{0%,to{transform:translate(-46%,-50%)rotate(-1.5deg)}50%{transform:translate(-46%,-55%)rotate(2deg)}}.btn .btn__label{z-index:5;color:#1a1a1a;letter-spacing:.05em;text-shadow:0 1px #ffffff40;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;font-size:clamp(10px,.85vw,12px);font-weight:800;position:relative}.btn .btn__label--top{color:#fff;text-shadow:none;z-index:6;clip-path:inset(0 calc((1 - var(--progress)) * 100%) 0 0);transition:clip-path var(--paint-duration) var(--paint-ease);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.btn.is-hover{--progress:1}@media (width<=480px){.btn{--btn-w:150px;--btn-h:38px}}
