@property --spotlight-size{syntax:"<length-percentage>";inherits:true;initial-value:18rem}@layer reset{html{box-sizing:border-box}body,p{margin:0}button{font:inherit}}@layer base{:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#050508;--paper:#f8f5ec;--acid:#dfff00;--hot-pink:#ff2a8a;--electric-blue:#3b5cff;--orange:#ff7438;--in-oklab: }body{background:var(--ink);min-block-size:100dvb;color:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button,canvas{-webkit-tap-highlight-color:transparent}.app{--pointer-x:50%;--pointer-y:50%;--spotlight-size:18rem;isolation:isolate;min-block-size:100dvb;position:relative}}@layer scene{.scene,.confetti,.impacts,.impact-pulse,.impact-flash,.grain,.grid,.spotlight,.impact-blast,.aurora,.impact-word{position:fixed;inset:0}.scene{z-index:0;background:radial-gradient(circle at 50% 48%, #1a1a24 0 .08rem, transparent .1rem), radial-gradient(circle at 50% 50%, #16161f 0, var(--ink) 58%);overflow:hidden}.spotlight{background:radial-gradient(circle var(--spotlight-size) at var(--pointer-x) var(--pointer-y), #dfff001f, transparent 72%);opacity:.55}.grid{transform-origin:50%;background-image:linear-gradient(#ffffff0e .0625rem,#0000 .0625rem),linear-gradient(90deg,#ffffff0e .0625rem,#0000 .0625rem);background-size:4rem 4rem;inset:-50%;transform:perspective(28rem)rotateX(62deg)translateY(24%);-webkit-mask-image:radial-gradient(circle,#000,#0000 64%);mask-image:radial-gradient(circle,#000,#0000 64%)}.grain{mix-blend-mode:soft-light;opacity:.18;pointer-events:none;background-image:repeating-radial-gradient(circle at 18% 24%,#ffffff14 0 .035rem,#0000 .045rem .17rem);background-size:.42rem .38rem}.aurora{aspect-ratio:1;filter:blur(5rem);opacity:0;border-radius:50%;inline-size:min(52rem,90vmax);inset:auto;transform:scale(.2)}.aurora--pink{background:var(--hot-pink);inset-block-start:-32vmax;inset-inline-start:-20vmax}.aurora--lime{background:var(--acid);inset-block-end:-36vmax;inset-inline-end:-18vmax}.aurora--blue{background:var(--electric-blue);inset-block-start:8%;inset-inline-end:-42vmax}.impacts{z-index:3;pointer-events:none;overflow:hidden}.impact-pulse{pointer-events:none;overflow:hidden}.impact-blast{inline-size:calc(10rem + var(--impact-power) * .55rem);aspect-ratio:1;pointer-events:none;inset:50% auto auto 50%;translate:-50% -50%}.impact-blast:before,.impact-blast:after{content:"" / "";opacity:0;border-radius:50%;position:absolute;inset:-160%}.impact-blast:before{background:repeating-conic-gradient(from 6deg, var(--acid) 0 1.5deg, transparent 1.5deg 9deg);-webkit-mask-image:radial-gradient(circle,#0000 0 17%,#000 18% 44%,#0000 68%);mask-image:radial-gradient(circle,#0000 0 17%,#000 18% 44%,#0000 68%)}.impact-blast:after{background:var(--paper);filter:blur(1.6rem);inset:-25%}.impact-ring{border:.2rem solid var(--paper);opacity:0;border-radius:50%;position:absolute;inset:0}.impact-ring--two{border-color:var(--hot-pink)}.impact-ring--three{border-color:var(--acid)}.impact-word{color:#0000;letter-spacing:-.085em;-webkit-text-stroke:clamp(.05rem, .25vw, .18rem) #f8f5ec47;opacity:0;text-align:center;-webkit-user-select:none;user-select:none;white-space:nowrap;place-items:center;font-size:clamp(4.8rem,24vw,24rem);font-weight:1000;line-height:.75;display:grid}.impact-flash{background:var(--paper);opacity:0;pointer-events:none}.confetti{z-index:4;pointer-events:none;block-size:100%;inline-size:100%}}@layer components{.stage{z-index:2;place-content:center;place-items:center;min-block-size:100dvb;padding:1.25rem;display:grid;position:relative}.combo{opacity:0;align-items:baseline;gap:.55rem;display:flex;position:absolute;inset-block-end:calc(50% + 5.4rem);transform:translateY(1rem)scale(.75)}.combo__label{color:var(--acid);letter-spacing:.18em;font-size:clamp(.74rem,2.5vw,1rem);font-weight:1000}.combo__value{color:var(--paper);letter-spacing:-.08em;text-shadow:.08em 0 var(--hot-pink), -.08em 0 var(--electric-blue);font-size:clamp(2.4rem,10vw,5.5rem);font-weight:1000;line-height:.8}.make-awesome{min-block-size:6rem;inline-size:min(88vi,40rem);color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:1.4rem;padding:0;position:relative;transform:translateY(0)}.make-awesome:focus-visible{outline:.3rem solid var(--paper);outline-offset:.55rem}.make-awesome__edge{border:.16rem solid var(--paper);border-radius:inherit;background:var(--hot-pink);box-shadow:0 1rem 0 var(--paper), 0 1.35rem 2.5rem #000000a6;position:absolute;inset:0;translate:0 .75rem}.make-awesome__face{z-index:1;border:.16rem solid var(--paper);border-radius:inherit;background:var(--acid);grid-template-columns:1fr auto;align-items:center;gap:1rem;min-block-size:6rem;padding-inline:clamp(1.15rem,5vw,3.4rem);transition:background .32s,color .32s,transform .12s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 .14rem #ffffffb8,inset 0 -.24rem #05050833}.make-awesome__face:before{content:"" / "";background:linear-gradient(105deg,#0000 38%,#ffffffbf 48%,#0000 58%);position:absolute;inset:-80% -30%;translate:-85%}.make-awesome__label{letter-spacing:-.055em;text-align:start;font-size:clamp(1.15rem,4.4vw,2.25rem);font-weight:1000;line-height:.9}.make-awesome__spark{font-size:clamp(2rem,6vw,3.3rem);line-height:1}.status{inline-size:min(88vi,40rem);color:var(--paper);letter-spacing:.11em;opacity:0;text-align:center;text-transform:uppercase;min-block-size:1lh;font-size:clamp(.82rem,2.4vw,1rem);font-weight:800;position:absolute;inset-block-start:calc(50% + 5.6rem)}@media (hover:hover) and (pointer:fine){.make-awesome:hover{transform:translateY(-.24rem)rotate(-.35deg)}.make-awesome:hover .make-awesome__face:before{transition:translate .65s;translate:85%}.make-awesome:hover .make-awesome__spark{rotate:15deg;scale:1.16}}.make-awesome:active{transform:translateY(.5rem)}.make-awesome:active .make-awesome__face{transform:translateY(.38rem)}}@layer motion{.app[data-state=powered]{--spotlight-size:calc(24rem + var(--combo-power) * 1.8rem)}.app[data-state=powered] .scene{filter:saturate(calc(1.05 + var(--combo-power) * .045));background:radial-gradient(circle,#ffffff24,#0000 28%),linear-gradient(128deg,#41002e 0%,#090a35 46%,#244500 100%)}.app[data-state=powered] .spotlight{opacity:clamp(.62, calc(.56 + var(--combo-power) * .025), 1)}.app[data-state=powered] .aurora{opacity:clamp(.24, calc(.18 + var(--combo-power) * .025), .68);transform:scale(calc(.9 + var(--combo-power) * .018));animation:5s ease-in-out infinite alternate aurora-drift}.app[data-state=powered] .aurora--lime{animation-delay:-1.7s}.app[data-state=powered] .aurora--blue{animation-delay:-3.4s}.app[data-state=powered] .grid{opacity:clamp(.45, calc(.4 + var(--combo-power) * .022), .82);animation:2.8s ease-in-out infinite alternate grid-breathe}.app[data-state=powered] .combo{opacity:1;transition:opacity .18s,transform .26s cubic-bezier(.2,.9,.2,1.25);transform:translateY(0)scale(1)}.app[data-state=powered] .make-awesome__face{background:linear-gradient(105deg var(--in-oklab), var(--hot-pink), var(--orange) 52%, var(--acid));box-shadow:inset 0 .14rem 0 #ffffffb8, inset 0 -.24rem 0 #05050833, 0 0 calc(1rem + var(--combo-power) * .35rem) #dfff0042}.app[data-state=powered] .make-awesome__edge{background:var(--electric-blue)}.app[data-state=powered] .make-awesome__spark{animation:1.1s ease-in-out infinite spark-done}.app[data-state=powered] .status{opacity:1;animation:.32s both status-done}.impact-pulse{animation:1.1s linear both pulse-life}.impact-flash{animation:.48s ease-out both flash}.impact-blast:before{animation:1s cubic-bezier(.1,.8,.2,1) both combo-rays}.impact-blast:after{animation:.56s ease-out both combo-core-blast}.impact-ring--one{animation:.92s cubic-bezier(.1,.8,.2,1) both combo-ring}.impact-ring--two{animation:.92s cubic-bezier(.1,.8,.2,1) 70ms both combo-ring}.impact-ring--three{animation:.92s cubic-bezier(.1,.8,.2,1) .14s both combo-ring}.impact-word{animation:1s cubic-bezier(.1,.8,.18,1) both combo-word-impact}@keyframes pulse-life{0%{opacity:1}to{opacity:.96}}@keyframes combo-rays{0%{opacity:0;transform:scale(.08)rotate(0)}12%{opacity:.96}to{opacity:0;transform:scale(calc(1.8 + var(--impact-power) * .08)) rotate(calc(24deg + var(--impact-power) * 1deg))}}@keyframes combo-core-blast{0%{opacity:.82;transform:scale(.1)}to{opacity:0;transform:scale(calc(2.8 + var(--impact-power) * .11))}}@keyframes combo-ring{0%{opacity:.98;transform:scale(.12)}to{opacity:0;transform:scale(calc(5.5 + var(--impact-power) * .28))}}@keyframes combo-word-impact{0%{opacity:0;transform:scale(calc(3.2 + var(--impact-power) * .08));filter:blur(1rem)}20%{opacity:.82;filter:blur()}58%{opacity:.38;transform:scale(.92)}to{opacity:0;transform:scale(1.04)}}.app[data-state=charging]{--spotlight-size:44rem}.app[data-state=charging] .make-awesome{animation:.7s cubic-bezier(.2,.9,.22,1) both charge-button}.app[data-state=charging] .make-awesome__face{background:var(--paper)}.app[data-state=charging] .make-awesome__spark{animation:.18s linear infinite spark-charge}.app[data-state=charging] .status{animation:.3s both status-in}.app[data-state=charging] .grid{animation:.72s cubic-bezier(.2,.9,.22,1) both grid-charge}.app[data-state=impact] .stage{animation:.42s cubic-bezier(.2,.8,.2,1) both stage-impact}.app[data-state=impact] .flash{animation:.52s ease-out both flash}.app[data-state=impact] .blast:before{animation:.9s cubic-bezier(.1,.8,.2,1) both rays}.app[data-state=impact] .blast:after{animation:.52s ease-out both core-blast}.app[data-state=impact] .blast__ring--one{animation:.9s cubic-bezier(.1,.8,.2,1) both ring}.app[data-state=impact] .blast__ring--two{animation:.9s cubic-bezier(.1,.8,.2,1) 90ms both ring}.app[data-state=impact] .blast__ring--three{animation:.9s cubic-bezier(.1,.8,.2,1) .18s both ring}.app[data-state=impact] .success-word{animation:.9s cubic-bezier(.1,.8,.18,1) both word-impact}.app[data-state=done] .scene{background:radial-gradient(circle,#ffffff29,#0000 28%),linear-gradient(128deg,#41002e 0%,#090a35 46%,#244500 100%)}.app[data-state=done] .spotlight{opacity:.8}.app[data-state=done] .aurora{opacity:.28;animation:8s ease-in-out infinite alternate aurora-drift;transform:scale(1)}.app[data-state=done] .aurora--lime{animation-delay:-2.4s}.app[data-state=done] .aurora--blue{animation-delay:-4.8s}.app[data-state=done] .grid{opacity:.58;animation:5s ease-in-out infinite alternate grid-breathe}.app[data-state=done] .success-word{opacity:.44;transform:scale(1.02)}.app[data-state=done] .make-awesome{animation:.54s cubic-bezier(.15,.9,.22,1.25) both button-return}.app[data-state=done] .make-awesome__face{background:linear-gradient(105deg var(--in-oklab), var(--hot-pink), var(--orange) 52%, var(--acid))}.app[data-state=done] .make-awesome__edge{background:var(--electric-blue)}.app[data-state=done] .make-awesome__spark{animation:2.1s ease-in-out infinite spark-done}.app[data-state=done] .status{opacity:1;animation:.62s both status-done}@supports linear-gradient(in oklab, white, black){:root{--in-oklab:in oklab}}@keyframes charge-button{0%{transform:scale(1)}28%{transform:scale(.94)rotate(1deg)}62%{transform:scale(1.06)rotate(-1deg)}to{transform:scale(.97)}}@keyframes spark-charge{to{rotate:90deg}}@keyframes grid-charge{to{transform:perspective(28rem)rotateX(62deg)translateY(34%)scale(1.45)}}@keyframes status-in{0%{opacity:0;translate:0 .5rem}to{opacity:1;translate:0}}@keyframes stage-impact{0%,to{transform:translate(0)}18%{transform:translate(-.7rem,.2rem)rotate(-.6deg)}38%{transform:translate(.65rem,-.25rem)rotate(.45deg)}58%{transform:translate(-.35rem,-.1rem)}78%{transform:translate(.2rem,.12rem)}}@keyframes flash{0%{opacity:0}8%{opacity:.94}to{opacity:0}}@keyframes rays{0%{opacity:0;transform:scale(.08)rotate(0)}15%{opacity:.92}to{opacity:0;transform:scale(2.1)rotate(32deg)}}@keyframes core-blast{0%{opacity:.8;transform:scale(.1)}to{opacity:0;transform:scale(3.4)}}@keyframes ring{0%{opacity:.95;transform:scale(.15)}to{opacity:0;transform:scale(8)}}@keyframes word-impact{0%{opacity:0;filter:blur(1rem);transform:scale(4.6)}24%{opacity:.76;filter:blur()}56%{opacity:.38;transform:scale(.94)}to{opacity:.44;transform:scale(1.02)}}@keyframes button-return{0%{opacity:0;transform:scale(.78)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes status-done{0%{opacity:0;translate:0 1rem}to{opacity:1;translate:0}}@keyframes spark-done{0%,to{rotate:0deg;scale:1}50%{rotate:24deg;scale:1.26}}@keyframes aurora-drift{0%{translate:-5% -3%;rotate:-7deg}to{translate:8% 6%;rotate:9deg}}@keyframes grid-breathe{0%{transform:perspective(28rem)rotateX(62deg)translateY(23%)scale(1)}to{transform:perspective(28rem)rotateX(62deg)translateY(29%)scale(1.08)}}}@layer accessibility{@media (pointer:coarse){.make-awesome{min-block-size:6.5rem}}@media (forced-colors:active){.make-awesome__face,.make-awesome__edge{color:buttontext;background:buttonface;border-color:buttontext}.make-awesome:focus-visible{outline-color:highlight}.impact-word{color:canvastext;-webkit-text-stroke:initial}}@media (prefers-reduced-motion:reduce){.aurora,.grid,.make-awesome,.make-awesome__face,.make-awesome__spark,.stage,.status,.combo{transition:none!important;animation:none!important}.impact-pulse{display:none}.app[data-state=impact] .flash,.app[data-state=impact] .blast,.app[data-state=impact] .blast__ring{display:none}.app[data-state=done] .success-word,.app[data-state=done] .status{opacity:1}.app[data-state=done] .aurora{opacity:.22;transform:scale(1)}.app[data-state=powered] .combo,.app[data-state=powered] .status{opacity:1;transform:none}.app[data-state=powered] .aurora{opacity:.28;transform:scale(1)}}}