@layer components{:root{--pc:var(--player-1);--bu:1px;--key-drop:.375rem;--slam:var(--ease-out-expo);--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;text-transform:uppercase;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{--cap:var(--spotlight);--cap-hover:var(--spotlight-hover);--cap-base:var(--spotlight-base);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(--cap-base);transform:skewX(var(--skew));position:absolute}.key-top{background:var(--cap);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(--cap-hover)}}.key[data-tone=quiet]{--cap:var(--raised);--cap-hover:var(--raised-hover);--cap-base:#000;color:var(--paper)}.key[data-tone=quiet] .key-top{box-shadow:inset 0 0 0 2px var(--rule)}.key[data-tone=hot]{--cap:var(--hot);--cap-hover:var(--hot);--cap-base:var(--hot-base)}.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}.empty-stage{--figure:min(10.5rem, 19dvh);--gap:clamp(.75rem, 2.5dvh, 1.25rem);text-align:center;flex-direction:column;flex:1;align-items:center;padding:1rem .375rem 0;display:flex}.empty-stage:before,.empty-stage:after{content:"";flex:2 1 0}.empty-stage:after{flex-grow:3}.stage-figure{justify-items:center;display:grid}.stage-figure>.pigeon-art{z-index:1;height:var(--figure);position:relative}.stage-riser{width:calc(var(--figure) * 1.3);height:.875rem;margin-top:calc(var(--figure) * -.05);position:relative}.stage-riser:before,.stage-riser:after{content:"";transform:skewX(var(--skew));position:absolute;inset:0}.stage-riser:before{background:var(--raised);transform:translate(.5rem, .5rem) skewX(var(--skew))}.stage-riser:after{background:var(--rule)}.empty-stage .stage-title{transform-origin:50% 80%}[data-docked] .empty-stage{--figure:min(10.5rem, 13dvh);--gap:clamp(.5rem, 1.5dvh, 1.25rem);padding-top:.25rem}.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}.field>*{transform:skewX(var(--skew))}.field>input{translate:0 -.09375rem}.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{background:var(--track);min-width:.25rem;height:.5625rem;transform:skewX(var(--skew));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%{background:var(--track);transform:skewX(var(--skew)) scaleY(.3)}}.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)))}}.toast-alarm{animation:wipe .3s var(--slam) var(--delay,0s) both, jolt .28s linear .3s}@keyframes jolt{25%{translate:-.375rem}50%{translate:.3125rem}75%{translate:-.1875rem}}.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%}.panel[data-state=active]:has(.empty-stage)~[role=tablist] .perch{display:none}.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(.5rem, .5rem) 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],[data-tone=quiet]) .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,.toast-alarm{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}}.notice{min-height:100dvh;padding:2rem max(1rem, (100% - 34rem) / 2) calc(1.75rem + env(safe-area-inset-bottom));flex-direction:column;display:flex;overflow:clip}.nt-head,.nt-copy{padding-inline:.375rem}.nt-mark{letter-spacing:.02em;text-transform:uppercase;transform:skewX(var(--skew));font-size:min(2.75rem,12.8vw);font-weight:900;font-stretch:125%;line-height:1;display:inline-block}.nt-tag{color:var(--ink-quiet);margin-top:.75rem;font-size:.9375rem}.nt-stage{--h:min(100cqh - 2rem, 21rem, 82cqw);--y:calc((100cqh - min(100cqh, 1.3 * var(--h))) / 2);flex:1 1 0;min-height:9rem;margin:1.5rem -1rem 1.75rem;position:relative;container-type:size}.nt-slab{top:var(--y);bottom:var(--y);transform:skewX(var(--skew));animation:nt-slab-in .44s var(--slam) var(--delay) both;position:absolute}.nt-slab-hot{--delay:60ms;left:calc(50% - .3 * var(--h));width:calc(.3 * var(--h));background:var(--hot)}.nt-slab-cyan{--delay:.11s;left:calc(50% - .08 * var(--h));width:calc(.24 * var(--h));background:var(--cyan)}.nt-slab-dark{--delay:.16s;left:calc(50% + .16 * var(--h));background:var(--slat);border-left:2px solid var(--slab-edge);display:none;right:-100vw}@keyframes nt-slab-in{0%{transform:translateX(28rem) skewX(var(--skew))}72%{transform:translateX(-.5rem) skewX(var(--skew))}to{transform:skewX(var(--skew))}}.nt-pigeon{--delay:.26s;--pg-land:.6s;bottom:var(--y);height:var(--h);position:absolute;left:50%;translate:-50%}.nt-call{--delay:.38s}.nt-title{text-transform:uppercase;text-wrap:balance;background:var(--chrome) 0 0 / 100% .96em repeat-y;color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(2.25rem,12.5vw,3.25rem);font-weight:900;font-stretch:125%;line-height:.96}.nt-body{--delay:.5s;max-width:30ch;color:var(--ink-quiet);margin-top:1rem;font-size:1.0625rem;line-height:1.45}@media (width>=64rem){.notice{grid-template:".stage"1fr"head stage""copy stage"".stage"1fr/minmax(0,1fr) minmax(0,.85fr);column-gap:3rem;padding:3rem max(4rem,50% - 40rem);display:grid}.nt-head{grid-area:head;margin-bottom:3.5rem}.nt-copy{grid-area:copy}.nt-stage{--h:min(100cqh, 100cqw);grid-area:stage;align-self:center;height:min(34rem,100dvh - 6rem);margin:0}.nt-slab{top:-100dvh;bottom:-100dvh}.nt-slab-dark{display:block}.nt-mark{font-size:3.25rem}.nt-tag{font-size:1.0625rem}.nt-title{font-size:clamp(3.75rem,6vw,5.25rem)}.nt-body{max-width:34ch;margin-top:1.5rem;font-size:1.25rem}}@media (prefers-reduced-motion:reduce){.nt-slab{animation:.2s linear both fade-in}}}
