@layer components{:root{--pc:var(--player-1);--bu:1px;--key-drop:.375rem;--slam:cubic-bezier(.16, 1, .3, 1);--pop:cubic-bezier(.3, 0, .2, 1);scrollbar-color:var(--rule) var(--ground)}::selection{background:var(--accent);color:var(--stage-black)}input{caret-color:var(--accent)}input::placeholder{color:var(--ink-quiet);opacity:1}input[type=search]::-webkit-search-cancel-button{display:none}.wordmark{letter-spacing:.02em;transform:skewX(var(--skew));font-weight:900;font-stretch:125%;display:inline-block}.title{text-transform:uppercase;font-size:1.5625rem;font-weight:900;font-stretch:125%;line-height:1}.label{letter-spacing:.14em;text-transform:uppercase;font-size:.8125rem;font-weight:800}.key{min-height:2.75rem;margin-bottom:var(--key-drop);color:var(--stage-black);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;flex:none;padding:0;display:inline-grid;position:relative}.key-base{inset:var(--key-drop) 0 calc(var(--key-drop) * -1);background:var(--spotlight-base);transform:skewX(var(--skew));position:absolute}.key-top{background:var(--spotlight);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transform:skewX(var(--skew));justify-content:center;align-items:center;gap:.375rem;font-size:.9375rem;font-weight:900;font-stretch:118%;transition:transform 70ms ease-out,background-color .15s;display:flex;position:absolute;inset:0}@media (hover:hover){.key:hover:not(:disabled) .key-top{background:var(--spotlight-hover)}}.key:is(:active:not(:disabled),[data-down]) .key-top{transform:translateY(var(--key-drop)) skewX(var(--skew))}.key:disabled{cursor:default}.key:disabled:not([data-down]){opacity:.4}.key:focus-visible{outline:2px solid var(--paper);outline-offset:.375rem}.plate{isolation:isolate;position:relative}.plate:before{content:"";z-index:-1;background:var(--panel);border-left:3px solid var(--rule);transform:skewX(var(--skew));position:absolute;inset:0}.field{isolation:isolate;position:relative}.field:before{content:"";z-index:-1;border:2px solid var(--ink-quiet);transform:skewX(var(--skew));transition:border-color .15s;position:absolute;inset:0}.field:focus-within:before{border-color:var(--paper)}.field input:focus-visible{outline:none}.thumb{clip-path:polygon(.35rem 0,100% 0,calc(100% - .35rem) 100%,0 100%)}.thumb-wide,.jacket-under{clip-path:polygon(7.9% 0,100% 0,92.1% 100%,0 100%)}.jacket-under{background:var(--pc);position:absolute;inset:0;transform:translate(.5rem,.5rem)}.card{height:4.5rem;position:relative}.card-under{background:var(--pc);transform:translate(.5rem, .5rem) skewX(var(--skew));position:absolute;inset:0}.card-body{background:var(--raised);transform:skewX(var(--skew));display:flex;position:absolute;inset:0}.card-tag{background:var(--pc);min-width:6rem;max-width:62%;color:var(--stage-black);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;flex:none;align-items:center;gap:.375rem;padding:0 .875rem 0 1rem;display:flex}.card-tag:focus-visible{outline:2px solid var(--paper);outline-offset:3px}.card-name{text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:2rem;font-weight:900;font-stretch:125%;line-height:1;overflow:hidden}.card-name[data-length=mid]{font-size:1.5rem}.card-name[data-length=long]{font-size:1.1875rem;font-stretch:112%}.stub{isolation:isolate;flex-direction:column;flex:none;justify-content:center;align-self:stretch;width:4.125rem;padding-left:.875rem;line-height:1;display:flex;position:relative}.stub:before{content:"";z-index:-1;background:var(--raised);border-left:5px solid var(--pc);transform:skewX(var(--skew));position:absolute;inset:0}.mine-outline{position:relative}.mine-outline:after{content:"";border:2px solid var(--pc);transform:skewX(var(--skew));pointer-events:none;position:absolute;inset:0}.lean-bar{height:3px;transform:skewX(var(--skew));display:block}.meter{gap:3px;min-width:0;display:flex}.meter i{min-width:.25rem;height:.5625rem;transform:skewX(var(--skew));background:#1d2130;flex:0 .5625rem}.meter i[data-on]{background:var(--accent);animation:cell .26s cubic-bezier(.2, .8, .2, 1) var(--d,0s) both}@keyframes cell{0%{transform:skewX(var(--skew)) scaleY(.3);background:#1d2130}}.slam-in{animation:slam-in .46s var(--slam) calc(min(var(--i,0), 10) * var(--beat-s) * .25) both}@keyframes slam-in{0%{transform:translate(110%)}70%{transform:translate(-2.2%)}86%{transform:translate(.6%)}to{transform:none}}.slam-left{animation:slam-left .52s var(--slam) both}@keyframes slam-left{0%{transform:translate(-120%)}72%{transform:translate(.75rem)}88%{transform:translate(-.1875rem)}to{transform:none}}.pop-in{transform-origin:0 80%;animation:pop-in .36s var(--pop) var(--delay,0s) both}@keyframes pop-in{0%{opacity:0;transform:scale(1.9)}60%{opacity:1;transform:scale(.93)}to{transform:none}}.drop-in{animation:drop-in .28s var(--slam) var(--delay,0s) both}@keyframes drop-in{0%{opacity:0;transform:translateY(-1rem)}}.hop-in{animation:hop-in .46s var(--slam) var(--delay,.12s) both}@keyframes hop-in{0%{opacity:0;transform:translateY(2.5rem)}70%{opacity:1;transform:translateY(-.375rem)}86%{transform:translateY(.125rem)}to{transform:none}}.wipe{animation:wipe .3s var(--slam) var(--delay,0s) both}@keyframes wipe{0%{clip-path:inset(calc(-1 * var(--wipe-room)) calc(100% + var(--wipe-room)) calc(-1 * var(--wipe-room)) calc(-1 * var(--wipe-room)))}to{clip-path:inset(calc(-1 * var(--wipe-room)))}}.fly{pointer-events:none;height:3.5rem;line-height:0;animation:.76s cubic-bezier(.2,.7,.3,1) both fly;position:absolute;top:-.5rem;left:50%;translate:-50%}@keyframes fly{0%{opacity:0;transform:translateY(.5rem)scale(.6)}18%{opacity:1;transform:translateY(-1.5rem) scale(1.5) rotate(var(--r,0deg))}to{opacity:0;transform:translateY(-9rem) scale(1.1) rotate(var(--r,0deg))}}.sticker{animation:sticker 4s cubic-bezier(.25, .7, .3, 1) var(--q,0s) both;justify-items:center;gap:.25rem;display:grid;position:absolute;bottom:0}.sticker-pigeon{height:3.5rem;filter:drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper)) drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper)) drop-shadow(0 .5rem .625rem #00000080)}.sticker-name{background:var(--stage-black);max-width:7rem;color:var(--pc);letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;transform:skewX(var(--skew));padding:.25rem .5rem;font-size:.8125rem;font-weight:900;font-stretch:118%;overflow:hidden}@keyframes sticker{0%{opacity:0;transform:translateY(2rem)scale(.3)rotate(-24deg)}10%{opacity:1;transform:translateY(-1rem) scale(1.15) rotate(var(--r))}18%{transform:translateY(-1.5rem) scale(1) rotate(var(--r))}80%{opacity:1}to{opacity:0;transform:translateY(-16rem) scale(.9) rotate(var(--r))}}.panel[data-state=active][data-from=right]{animation:panel-from-right .34s var(--slam) both}.panel[data-state=active][data-from=left]{animation:panel-from-left .34s var(--slam) both}@keyframes panel-from-right{0%{opacity:0;transform:translate(32%)skew(-5deg)}55%{opacity:1}74%{transform:translate(-1.8%)}to{transform:none}}@keyframes panel-from-left{0%{opacity:0;transform:translate(-32%)skew(5deg)}55%{opacity:1}74%{transform:translate(1.8%)}to{transform:none}}.wordmark{--tick:-2;animation:1s infinite beat-tick}.wordmark.drop-in{animation:drop-in .28s var(--slam) var(--delay,0s) both, beat-tick 1s infinite}.card-under{--drop:3;animation:1s infinite beat-drop}.card-name{--pump:.03;transform-origin:0 60%;animation:4s infinite beat-bar-pump}[data-state=active]>.lean-bar{--pump-x:.35;--pump-y:.6;transform-origin:0;animation:1s infinite beat-pump}.field>svg:first-child,.toast-icon{--pump:.16;animation:1s infinite beat-pump}[data-beat=song] .key:not(:disabled,:active,[data-down]) .key-top{--nod:-2.5;animation:1s infinite beat-nod}.ratchet{animation:4s infinite beat-ratchet}.stub[data-now] b{--pump:.12;transform-origin:0 60%;animation:1s infinite beat-pump;display:inline-block}.hero>span{--nod:3;animation:1s infinite beat-nod;display:inline-block}.hero>span:last-child{animation-delay:.5s}.hero-bar{--pump-x:0;--pump-y:.5;transform-origin:0;animation:wipe .3s var(--slam) var(--delay,0s) both, beat-bar-pump 4s infinite}.meter[data-dance] i[data-on]{--nod:-2;animation:cell .26s cubic-bezier(.2, .8, .2, 1) var(--d,0s) both, beat-bar-nod 4s calc(var(--k) * 50ms) infinite}.playing-art .jacket-under{--drop:3;animation:1s infinite beat-drop}.playing-art .thumb-wide{--nod:2;animation:1s infinite beat-nod}.playing-strap>span:last-child{--pump:.05;transform-origin:0;animation:wipe .3s var(--slam) var(--delay,0s) both, beat-bar-pump 4s infinite}.sticker-pigeon{--sway:8deg;animation:2s infinite beat-sway}.progress-head{pointer-events:none;transition:translate 1s linear;position:absolute;inset:0}.progress-head i{--pump-x:.2;--pump-y:.9;background:var(--accent);width:.5rem;height:.5625rem;transform:skewX(var(--skew));animation:1s infinite beat-pump;position:absolute;top:-.1875rem;left:-.25rem}.stub{--nod:2;animation:beat-bar-nod 4s calc(var(--i,0) * 1s) infinite}@media (prefers-reduced-motion:no-preference){@keyframes beat-ratchet{0%{animation-timing-function:cubic-bezier(.2,.7,.3,1);rotate:0deg}8%,25%{animation-timing-function:cubic-bezier(.2,.7,.3,1);rotate:90deg}33%,50%{animation-timing-function:cubic-bezier(.2,.7,.3,1);rotate:180deg}58%,75%{animation-timing-function:cubic-bezier(.2,.7,.3,1);rotate:270deg}83%,to{rotate:360deg}}}@media (prefers-reduced-motion:reduce){.slam-in,.slam-left,.pop-in,.drop-in,.hop-in,.wipe{animation:.2s linear both fade-in}.meter i[data-on],.meter[data-dance] i[data-on]{animation:none}.panel[data-state=active][data-from],.wordmark.drop-in,.hero-bar,.playing-strap>span:last-child{animation:.2s linear both fade-in}.fly{animation:.6s linear both rm-fade}.sticker{animation:4s linear both rm-fade}.key-top{transition:none}}@keyframes rm-fade{0%,to{opacity:0}10%,80%{opacity:1}}}