.midi-visualizer{margin-top:20px;border-radius:8px;padding:12px;background:#0b0b12;color:#e6e6e6;min-width:0;overflow:hidden;width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column}.midi-roll .mv-roll-wrap{border-radius:8px;overflow:hidden;background:linear-gradient(#07070a,#0b0b12);border:1px solid rgba(255,255,255,.04);width:100%;box-sizing:border-box;max-width:100%;flex-shrink:0}.midi-roll .mv-roll-wrap canvas{display:block;max-width:100%;width:100%!important;height:100%!important}.midi-roll .mv-keyboard-wrap{border-radius:6px;overflow:hidden;background:linear-gradient(#0b0b12,#0b0b12);border:1px solid rgba(255,255,255,.03);margin-top:10px;width:100%;box-sizing:border-box;max-width:100%;flex-shrink:0}.midi-roll .mv-keyboard-wrap canvas{display:block;max-width:100%;width:100%!important;height:100%!important}.mv-debug-toggle{position:absolute;right:10px;top:10px;z-index:20;background:#0009;color:#ffd54f;border:1px solid rgba(255,255,255,.05);padding:4px 8px;border-radius:4px;cursor:pointer;font-weight:600}.mv-debug-toggle:hover{background:#ffffff05}.midi-visualizer code{background:#ffffff05;padding:2px 6px;border-radius:3px}.keyboard{display:flex;position:relative;height:160px;-webkit-user-select:none;user-select:none;align-items:flex-end}.key{position:relative;display:inline-flex;justify-content:center;align-items:flex-end;box-sizing:border-box}.key.white{width:28px;height:100%;background:linear-gradient(#fff,#f0f0f0);border:1px solid #ccc;margin-right:-1px;z-index:1}.key.black{width:18px;height:62%;background:linear-gradient(#222,#000);margin-left:-9px;margin-right:-9px;z-index:2;color:#fff;border-radius:4px}.key.active.white{background:linear-gradient(#ffd27f,#ffdfb3)}.key.active.black{background:linear-gradient(#ffb74d,#ff9800)}.key .label{font-size:9px;opacity:.7;padding:3px}.midi-visualizer .keyboard{overflow-x:auto;padding-bottom:6px}body *{-webkit-font-smoothing:subpixel-antialiased!important;text-rendering:optimizeLegibility!important}h1,h2{font-weight:500}.switch-wrapper{background:var(--background);position:relative;width:100%}.switch-wrapper>div{position:absolute}.content{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}.midi-card-box{flex:1;position:relative}.image-box{flex-shrink:0;width:307px;height:307px;display:flex;align-items:center;justify-content:center;overflow:hidden}.midi-image{width:100%;height:100%;object-fit:cover;border-radius:10px}@media(max-width:768px){.image-box{display:none}.midi-card-box{background-size:cover;background-position:center;background-repeat:no-repeat}}.switch-wrapper>div{background:var(--background);position:absolute;width:100%}.route{background:var(--background);position:relative}.route>div{position:absolute;width:100%}button .icon{vertical-align:middle;font-size:17px}.button{font-size:1em;background:#0000001a;border:1px solid rgba(255,255,255,.04);box-shadow:0 2.5px 5px #000000b3;padding:20px;border-radius:15px;margin:5px 0}.button:hover{background:#0000001a!important}.midi-player{width:100%}.midi-player::part(control-panel){background:transparent}.midi-player::part(play-button){color:#fff;content:""}.router{background:var(--background)}