@property --hba-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes hba-in{0%{opacity:0;filter:blur(8px);transform:translateY(14px)}}@keyframes hba-fade{0%{opacity:0}}@keyframes hba-spin{to{--hba-angle:360deg}}@keyframes hba-turn{to{transform:rotate(360deg)}}@keyframes hba-glint{0%{background-position:0 0,0 0}22%,to{background-position:100% 0,0 0}}@keyframes hba-sheen{0%{transform:translate(-120%)}28%,to{transform:translate(120%)}}@keyframes hba-twinkle{0%,to{opacity:.15;transform:scale(.6)}50%{opacity:.95;transform:scale(1)}}@keyframes hba-shoot{0%{opacity:0;transform:rotate(160deg)translate(0)}1.5%{opacity:1}8%{opacity:0;transform:rotate(160deg) translateX(var(--run,440px))}to{opacity:0}}@keyframes hba-float{50%{transform:translateY(var(--lift,-4px))}}@keyframes hba-digit{0%,14%,to{border-color:#60a5fa80;box-shadow:inset 0 0 12px #3b82f61f}7%{border-color:#a5cdfff2;box-shadow:0 0 16px #3b82f699,inset 0 0 14px #60a5fa4d}}@keyframes hbt-rise{0%{opacity:0;transform:translateY(18px)scale(.985)}}@keyframes hbt-fill{0%{transform:scaleX(0)}}@keyframes hbt-pop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}}@keyframes hbt-type{0%{opacity:0;transform:translateY(6px)}}@keyframes hbt-breathe{50%{box-shadow:0 0 34px 2px #f59e0b6b,0 30px 60px -30px #000414e6,inset 0 1px #fef3c71f}}.hba[data-play] :is(.hba-pill,.hba-h1>span,.hba-sub,.hba-actions,.hba-note){animation:hba-in .9s cubic-bezier(.2, .7, .2, 1) var(--in,0s) both}.hba-pill{--in:50ms}.hba-h1>span:first-child{--in:.16s}.hba-sub{--in:.42s}.hba-actions{--in:.56s}.hba-note{--in:.7s}.hba[data-play] .hba-h1>.hba-h1-glow{background-image:linear-gradient(100deg,#0000 42%,#ecf8ffd9 50%,#0000 58%),linear-gradient(90deg,#5d8bff 0%,#4fb0ff 45%,#3fdcf2 100%);background-repeat:no-repeat;background-size:250% 100%,100% 100%;animation:.9s cubic-bezier(.2,.7,.2,1) .28s both hba-in,7s ease-in-out 1.8s infinite hba-glint}.hba-fx{z-index:0;pointer-events:none;opacity:0;position:absolute;inset:0}.hba[data-play] .hba-fx{opacity:1;animation:2.4s .3s both hba-fade}.hba-star{opacity:0;background:#fff;border-radius:50%;position:absolute;box-shadow:0 0 6px 1px #bfdbfecc}.hba[data-play] .hba-star{animation:hba-twinkle var(--d) ease-in-out calc(var(--i) * -.37s) infinite}.hba-shoot{opacity:0;background:linear-gradient(90deg,#0000,#bfdbfee6 80%,#fff);border-radius:2px;height:2px;position:absolute}.hba[data-board=desktop] .hba-shoot{width:150px;top:60px;left:640px}.hba[data-board=phone] .hba-shoot{--run:220px;width:90px;top:36px;left:220px}.hba[data-play] .hba-shoot{animation:11s linear 3.2s infinite hba-shoot}.hba[data-play] .hbt{--rise:.4s;--float:8s;animation:hbt-rise .9s cubic-bezier(.2, .7, .2, 1) var(--rise) both, hba-float var(--float) ease-in-out calc(var(--rise) + 1s) infinite;will-change:transform}.hba[data-play] .hbt-record{--rise:.4s;--float:8.5s}.hba[data-play] .hbt-code{--rise:.55s;--float:7s;--lift:-3px}.hba[data-play] .hbt-review{--rise:.67s;--float:7.8s;--lift:-3px;animation:hbt-rise .9s cubic-bezier(.2, .7, .2, 1) var(--rise) both, hba-float var(--float) ease-in-out calc(var(--rise) + 1s) infinite, hbt-breathe 4.5s ease-in-out 2.6s infinite}.hba[data-play] .hbt-renewal{--rise:.79s;--float:9s;--lift:-3px}.hba[data-board=phone][data-play] .hbt{--lift:-2px}.hba[data-play] .hbt:before{content:"";border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--hba-angle), transparent 0deg 240deg, var(--edge,#bfdbfef2) 300deg, transparent 345deg);-webkit-mask-composite:xor;animation:hba-fade 1.2s ease calc(var(--rise) + .9s) both, hba-spin 8s linear calc(var(--rise) * -6) infinite;padding:1px;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-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}.hba[data-play] .hbt-review:before{--edge:#fde68af2}.hba[data-board=desktop][data-play] :is(.hbt,.hba-copy,.hba-fx){transition:translate .9s cubic-bezier(.2,.7,.2,1)}.hba[data-board=desktop][data-play] .hbt-record{translate:calc(var(--mx,0) * 6px) calc(var(--my,0) * 6px)}.hba[data-board=desktop][data-play] :is(.hbt-code,.hbt-review,.hbt-renewal){translate:calc(var(--mx,0) * 10px) calc(var(--my,0) * 10px)}.hba[data-board=desktop][data-play] .hba-copy{translate:calc(var(--mx,0) * -3px) calc(var(--my,0) * -3px)}.hba[data-board=desktop][data-play] .hba-fx{translate:calc(var(--mx,0) * -8px) calc(var(--my,0) * -5px)}.hba[data-board=desktop][data-play] .hbt:after{content:"";border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%), #93c5fd21, transparent 70%);transition:opacity .4s;position:absolute;inset:0}.hba[data-board=desktop][data-play][data-pointer] .hbt:after{opacity:1}.hba[data-play] .hba-primary{isolation:isolate;position:relative;overflow:hidden}.hba[data-play] .hba-primary:after{content:"";z-index:-1;pointer-events:none;background:linear-gradient(105deg,#0000 30%,#ffffff52 50%,#0000 70%);animation:5s ease-in-out 2.4s infinite hba-sheen;position:absolute;inset:0;transform:translate(-120%)}.hba .hba-primary:hover{box-shadow:0 0 0 1px #2563eb4d,0 14px 38px -8px #3b82f6f2,inset 0 1px #ffffff59}.hba[data-play] .hbt-bar>span[data-on]{transform-origin:0;animation:hbt-fill .5s ease-out calc(1.15s + var(--i) * .14s) both, hba-glint 4.5s ease-in-out calc(2.6s + var(--i) * .12s) infinite;background-image:linear-gradient(100deg,#0000 40%,#ffffff8c 50%,#0000 60%),linear-gradient(#4ee3b0,#2cc58f);background-repeat:no-repeat;background-size:400% 100%,100% 100%}.hba[data-play] .hbt-tick{animation:hbt-pop .45s cubic-bezier(.3, .9, .3, 1.2) calc(1.25s + var(--i) * .16s) both}.hba[data-play] .hbt-open{position:relative}.hba[data-play] .hbt-open:after{content:"";filter:drop-shadow(0 0 3px #60a5facc);border:2px solid #0000;border-top-color:#93c5fd;border-radius:50%;animation:.6s 2s both hba-fade,1.8s linear 2s infinite hba-turn;position:absolute;inset:-2px}.hba[data-play] .hbt-digits>span{animation:hbt-type .35s ease-out calc(1.35s + var(--i) * .12s) both, hba-digit 6s ease-in-out calc(2.4s + var(--i) * 90ms) infinite}
