@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],[data-state=open]) .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}.end-slot{isolation:isolate;position:relative}.end-slot:before{content:"";z-index:-1;border:2px dashed 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-transform:uppercase;min-width:0;font-size:2rem;font-weight:900;font-stretch:125%;line-height:1}.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}.meter-level i{flex:1 1 0;height:.75rem}@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{transform-origin:50% 100%;animation:sticker 6.5s cubic-bezier(.25, .7, .3, 1) var(--q,0s) both;justify-items:center;gap:.25rem;display:grid;position:absolute;bottom:0;translate:-50%}.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:6rem;color:var(--pc);letter-spacing:.08em;text-transform:uppercase;transform:skewX(var(--skew));padding:.25rem .5rem;font-size:.8125rem;font-weight:900;font-stretch:118%}@keyframes sticker{0%{opacity:0;transform:translateY(2rem) scale(calc(.3 * var(--size,1))) rotate(-24deg)}6%{opacity:1;transform:translateY(-1rem) scale(calc(1.15 * var(--size,1))) rotate(var(--r))}11%{transform:translateY(-1.5rem) scale(var(--size,1)) rotate(var(--r))}86%{opacity:1}to{opacity:0;transform:translateY(calc(var(--rise,16rem) * -1)) scale(calc(.9 * var(--size,1))) rotate(var(--r))}}.perch{bottom:calc(100% - .3125rem);left:calc(.75rem + (var(--at) + .5) * (100% - 1.5rem) / 4);pointer-events:none;height:2.5rem;position:absolute;translate:-50%}.invite[data-state=open]{animation:invite-in .32s var(--slam) both}.invite[data-state=closed]{animation:invite-out .2s var(--ease-in-quick) both}@keyframes invite-in{0%{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes invite-out{0%{clip-path:inset(0)}to{clip-path:inset(0 0 100%)}}.invite-qr{width:min(100% - 1.5rem,20rem,46dvh);position:relative}.invite-qr-under{background:var(--pc);transform:translate(.625rem, .625rem) skewX(var(--skew));position:absolute;inset:0}.invite .qr-paper{fill:var(--paper)}.invite .qr-modules{fill:var(--stage-black)}.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}.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}.invite-qr-under{--drop:4;animation:1s infinite beat-drop}.stub{--nod:2;animation:beat-bar-nod 4s calc(var(--i,0) * 1s) infinite}.dock{inset-inline:0;bottom:calc(4.125rem + .875rem + env(safe-area-inset-bottom));z-index:15;pointer-events:none;max-width:36rem;margin-inline:auto;padding-inline:1.375rem;position:fixed}.dock-key{pointer-events:auto}.tray{z-index:40;transform-origin:0 100%;width:min(31rem,100vw - 4.5rem);margin-left:.875rem;padding:.875rem .875rem 1.125rem;position:relative}.tray:before{content:"";z-index:-1;background:var(--raised);transform:skewX(var(--skew));position:absolute;inset:0;box-shadow:0 .75rem 1.75rem #0000008c}.tray[data-state=open]{animation:tray-in .26s var(--slam) both}.tray[data-state=open] .tray-key{animation:pop-key .3s var(--pop) calc(80ms + var(--n) * 16ms) both}.tray[data-state=closed]{animation:tray-out .16s var(--ease-in-quick) both}@keyframes tray-in{0%{opacity:0;transform:translateY(1rem)scale(.9)}}@keyframes tray-out{to{opacity:0;transform:translateY(.75rem)scale(.96)}}@keyframes pop-key{0%{opacity:0;transform:translateY(.75rem)}}@media (prefers-reduced-motion:reduce){.tray[data-state],.tray[data-state=open] .tray-key{animation:.2s linear both fade-in}.tray[data-state=closed]{animation:none}.slam-in,.slam-left,.invite[data-state=open],.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}.invite[data-state=closed]{animation:none}.sticker{scale:var(--size,1);animation:6.5s linear both rm-fade}.key-top{transition:none}}@keyframes rm-fade{0%,to{opacity:0}10%,80%{opacity:1}}}