.player{font:14px system-ui,sans-serif;color:#dce7f7;background:#101b2d;border:1px solid #253651;border-radius:14px;overflow:hidden;min-width:0}
.player header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px 10px}.player strong{font-size:17px}.subtitle{color:#91a5c2;margin-left:12px;font-size:12px}.note-count{color:#91a5c2;font-size:12px}
.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 18px}.player button,.player select{border:1px solid #3b506c;border-radius:7px;background:#24364f;color:#eef5ff;padding:7px 11px;cursor:pointer;font:inherit}.player button:disabled{opacity:.4;cursor:default}.player .play{background:#6ce2b6;color:#102d28;border-color:transparent;min-width:82px;font-weight:650}.clock{font-variant-numeric:tabular-nums;font-size:12px;min-width:90px}.speed-label{margin-left:auto;font-size:12px;color:#b3c5dd}.player select{padding:5px;font-size:12px}.seek{display:block;width:calc(100% - 36px);margin:10px 18px;accent-color:#6ce2b6}.roll-wrap{position:relative;height:300px}.roll{display:block;width:100%;height:300px;touch-action:pan-y;cursor:crosshair}.empty{position:absolute;top:42%;left:60px;right:12px;text-align:center;color:#a5b7ce;pointer-events:none}.error{margin:0;padding:0 18px 10px;color:#ffb3a9;font-size:12px}.error:empty{display:none}.player :focus-visible{outline:2px solid #84bfff;outline-offset:2px}@media(max-width:480px){.player header,.transport{padding-left:10px;padding-right:10px}.subtitle{display:block;margin:3px 0 0}.transport{gap:7px}.speed-label{margin-left:0}}
.player strong{color:#e7f0ff!important}.player .clock{color:#dce7f7!important}.player .empty{color:#a5b7ce!important}

html,body{margin:0;padding:0;background:transparent}*{box-sizing:border-box}.player{border-radius:12px}.player header{padding:12px 14px 8px}.roll-wrap,.roll{height:270px}.player .error{overflow-wrap:anywhere}.player .title{overflow-wrap:anywhere}.player .subtitle{display:none}.player [hidden]{display:none!important}
.loading{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:28px;color:#6ce2b6;cursor:help}.status-icon{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.loading[data-phase=loading][data-stage=soundfont] .icon-soundfont,.loading[data-phase=loading][data-stage=warmup] .icon-warmup,.loading[data-phase=ready] .icon-ready,.loading[data-phase=error] .icon-error{display:block}.download-arrow{animation:midi-download 1.2s ease-in-out infinite}.icon-warmup path{transform-origin:center;animation:midi-warmup .9s ease-in-out infinite}.icon-warmup path:nth-child(2){animation-delay:.15s}.icon-warmup path:nth-child(3){animation-delay:.3s}.loading[data-phase=ready]{color:#91a5c2}.loading[data-phase=error]{color:#ffb3a9}.transport{flex-wrap:nowrap;gap:8px}.speed-label{white-space:nowrap}.clock{min-width:0;white-space:nowrap}.player .play{min-width:70px}.player[aria-busy=true] .play{opacity:.5}
@keyframes midi-download{0%,100%{transform:translateY(-2px);opacity:.55}55%{transform:translateY(1px);opacity:1}}@keyframes midi-warmup{0%,100%{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}@media(prefers-reduced-motion:reduce){.download-arrow,.icon-warmup path{animation:none}}@media(max-width:480px){.transport{gap:6px}.player button{padding:6px 7px}.player .play{min-width:62px}.speed-label{font-size:0}.speed-label select{font-size:11px}.clock{font-size:10px}}

.player[data-fit=auto] .roll-wrap{height:clamp(180px,45vw,320px)}.player[data-fit=auto] .roll{height:100%}
.player[data-fit=height]{display:flex;flex-direction:column;height:100vh;min-height:280px}.player[data-fit=height]>.roll-wrap{flex:1 1 0;min-height:100px;height:auto}.player[data-fit=height] .roll{height:100%}.player[data-fit=height]>header,.player[data-fit=height]>.transport,.player[data-fit=height]>.error{flex-shrink:0}
@media(max-width:320px){.transport{flex-wrap:wrap}}

.transport .seek{flex:1 1 0;width:0;min-width:24px;margin:0;accent-color:#6ce2b6}.transport{padding-bottom:10px;flex-wrap:nowrap}.speed-label{margin-left:0}@media(max-width:380px){.transport{gap:4px}.transport .clock{font-size:9px}.transport .loading{flex-basis:18px;width:18px}.transport .play{min-width:48px;padding:6px 4px}.transport .restart{padding:6px 4px}}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.player .download{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:#91a5c2;border-radius:5px;text-decoration:none}.player .download:hover{color:#6ce2b6;background:#24364f}.player header>div:first-child{min-width:0}