.mbs{--color-grid: #151518;position:absolute;inset:0;overflow:hidden;pointer-events:none}.mbs *,.mbs *:before,.mbs *:after{box-sizing:border-box}.mbs-group{--sp: 124px;position:absolute;left:50%;top:50%;width:660px;transform:translate(-50%,-50%) scale(var(--s, 1))}.mbs-band{display:flex;justify-content:space-around;padding:0 8px;position:relative;z-index:1}.mbs svg.sprite{stroke:none;stroke-width:0}.mbs .sprite{display:block;image-rendering:pixelated;width:var(--sp);height:var(--sp)}.mbs .sprite[data-family=guitar],.mbs .sprite[data-family=voice],.mbs .sprite[data-family=bass]{transform:translateY(calc(var(--sp) * 5 / 32))}.mbs-card{container-type:inline-size;border-radius:12px;overflow:hidden}.mbs .mini-roll{position:relative;border-radius:8px;overflow:hidden;--lanes: 11;height:calc(200px + 18.6cqw);--kw: calc(100cqw / var(--lanes));--kr: min(6px, calc(var(--kw) * .09));--kd: min(9px, calc(var(--kw) * .13));--br: min(4px, calc(var(--kw) * .06));--bd: min(7px, calc(var(--kw) * .1));--nr: min(8px, calc(var(--kw) * .13));background-color:var(--color-grid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(rgb(255 255 255 / .07) 1px,transparent 1px);background-size:200px 200px,100% 60px;background-position:0 0,0 -1px}.mbs .mini-roll .pa-keys{height:18.6cqw}.mbs .pa-field{position:absolute;inset:0 0 auto;height:var(--field);overflow:hidden}@property --hit{syntax: "<color>"; inherits: false; initial-value: transparent;}.mbs .pa-note{position:absolute;top:0;border-radius:var(--nr, 8px);background:var(--b) linear-gradient(to bottom,transparent 50%,var(--hit) 50%) no-repeat;box-shadow:0 5px 0 var(--s);will-change:transform}.mbs .pa-piece{position:absolute;top:0;width:10px;height:10px;background:var(--c);opacity:0;pointer-events:none}.mbs .pa-keys{position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--field))}.mbs .pa-key{position:absolute;top:0;bottom:0;box-sizing:border-box;padding:0 1px}.mbs .pa-key:before,.mbs .pa-lit:before{content:"";position:absolute;inset:0 1px;border-radius:0 0 var(--kr, 6px) var(--kr, 6px);background:var(--f);box-shadow:inset 0 calc(-1 * var(--kd, 9px)) 0 var(--s)}.mbs .pa-key.black{bottom:auto;height:62%}.mbs .pa-key.black:before,.mbs .pa-key.black .pa-lit:before{border-radius:0 0 var(--br, 4px) var(--br, 4px);box-shadow:inset 0 calc(-1 * var(--bd, 7px)) 0 var(--s)}.mbs .pa-lit{position:absolute;inset:0;opacity:0;pointer-events:none}.mbs .pa-lit:before{background:var(--lit);box-shadow:inset 0 calc(-1 * var(--kd, 9px)) 0 var(--lit),0 -4px 22px var(--glow)}.mbs .pa-key.black .pa-lit:before{box-shadow:inset 0 calc(-1 * var(--bd, 7px)) 0 var(--lit),0 -4px 22px var(--glow)}