:root{--ink:#fff1e8;--box:#111d35;--edge:#fff1e8;--shadow:#000;--hi:#ffa300;--s:2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#000;margin:0;font-family:"Press Start 2P",monospace;overflow:hidden}#app{position:fixed;inset:0}.screen{image-rendering:pixelated;touch-action:none;position:absolute;top:0;left:0}canvas.px{image-rendering:pixelated;flex:none;display:block}.hidden{display:none!important}.hud{pointer-events:none;--u:calc(var(--s) * 1px);position:absolute;inset:0}.hud>*{pointer-events:auto}.box{background:var(--box);border:calc(var(--u) * 2) solid var(--edge);box-shadow:0 0 0 var(--u) var(--shadow), calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--u) var(--shadow);padding:calc(var(--u) * 5) calc(var(--u) * 6);position:absolute}.line{align-items:center;gap:calc(var(--u) * 5);min-height:calc(var(--u) * 11);display:flex}.logo{left:calc(var(--u) * 8);top:calc(var(--u) * 8);align-items:center;gap:calc(var(--u) * 4);pointer-events:none;display:flex;position:absolute}.dock{left:calc(var(--u) * 8);bottom:calc(var(--u) * 8 + env(safe-area-inset-bottom));max-width:calc(100vw - var(--u) * 16);gap:calc(var(--u) * 6);pointer-events:none;flex-direction:column;display:flex;position:absolute}.transport{pointer-events:auto;background:linear-gradient(#e3e4e8,#c2c3c7 60%,#a7a8ad);border:2px solid #49333b;border-radius:6px;gap:5px;padding:8px 8px 16px;display:none;box-shadow:0 3px #00000080}.piano-key{all:unset;pointer-events:auto;touch-action:manipulation;cursor:pointer;background:linear-gradient(#5f574f 0 4px,#49333b 4px);border:2px solid #000;border-radius:3px;flex:1;place-items:center;min-width:52px;height:46px;transition:transform 70ms ease-out,box-shadow 70ms ease-out;display:grid;transform:translateY(0);box-shadow:0 8px #1a1214,0 10px #000}.piano-key.down,.piano-key:active{background:linear-gradient(#49333b 0 4px,#3a282e 4px);transform:translateY(6px);box-shadow:0 2px #1a1214,0 4px #000}button{touch-action:manipulation}@media (pointer:coarse){.transport{display:flex}}.pbtn{all:unset;pointer-events:auto;box-sizing:border-box;align-items:center;gap:calc(var(--u) * 3);padding:calc(var(--u) * 3) calc(var(--u) * 5);border:var(--u) solid var(--shadow);box-shadow:inset calc(var(--u) * -1) calc(var(--u) * -2) 0 #291814, inset var(--u) var(--u) 0 #c2c3c7;cursor:pointer;background:#5f574f;display:inline-flex}.pbtn:hover,.pbtn:focus-visible{background:#ab5236}.pbtn:active{box-shadow:inset var(--u) var(--u) 0 #291814;transform:translateY(var(--u))}.help-btn{right:calc(var(--u) * 8);top:calc(var(--u) * 8);position:absolute}.settings-btn{right:calc(var(--u) * 28);top:calc(var(--u) * 8);padding-top:calc(var(--u) * 4);padding-bottom:calc(var(--u) * 4);position:absolute}.settings{right:calc(var(--u) * 8);top:calc(var(--u) * 28);gap:calc(var(--u) * 4);min-width:calc(var(--u) * 150);flex-direction:column;display:flex}.hud-slider{pointer-events:auto;width:calc(var(--u) * 70);height:calc(var(--u) * 5);appearance:none;border:var(--u) solid #000;cursor:pointer;background:linear-gradient(90deg,#008751,#ffec27,#ff004d)}.hud-slider:disabled{filter:grayscale()brightness(.6);cursor:default}.hud-slider::-webkit-slider-thumb{appearance:none;width:calc(var(--u) * 5);height:calc(var(--u) * 9);border:var(--u) solid #000;background:#fff1e8}.hud-slider::-moz-range-thumb{width:calc(var(--u) * 5);height:calc(var(--u) * 9);border:var(--u) solid #000;background:#fff1e8;border-radius:0}.setting-row{justify-content:space-between;align-items:center;gap:calc(var(--u) * 10);display:flex}.help{right:calc(var(--u) * 8);top:calc(var(--u) * 28);column-gap:calc(var(--u) * 8);row-gap:calc(var(--u) * 3);cursor:pointer;grid-template-columns:max-content max-content;align-items:center;display:grid}.help-row{display:contents}@media (pointer:coarse){.help .only-mouse{display:none}}@media not (pointer:coarse){.help .only-touch{display:none}}.help-title{margin-bottom:calc(var(--u) * 3);grid-column:1/-1}.tooltip{pointer-events:none;background:var(--shadow);padding:calc(var(--u) * 2) calc(var(--u) * 3);border:var(--u) solid var(--hi);position:absolute;top:0;left:0}.toast{left:50%;top:calc(var(--u) * 10);background:var(--shadow);padding:calc(var(--u) * 3) calc(var(--u) * 5);border:var(--u) solid var(--hi);pointer-events:none;position:absolute;transform:translate(-50%)}.title-screen{background:repeating-linear-gradient(0deg, #000000d1 0 calc(var(--u) * 2), #111d35d1 calc(var(--u) * 2) calc(var(--u) * 4));cursor:pointer;place-items:center;display:grid;position:absolute;inset:0}.title-inner{align-items:center;gap:calc(var(--u) * 6);padding:calc(var(--u) * 16);flex-direction:column;display:flex}.spacer{height:calc(var(--u) * 6)}.blink{margin-top:calc(var(--u) * 10);animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}@media (aspect-ratio<=1){.dock{left:calc(var(--u) * 6);right:calc(var(--u) * 6);bottom:calc(var(--u) * 6)}}@media (prefers-reduced-motion:reduce){.blink{animation:none}}.sb{--metal:#3b3f4c;--metal-hi:#6a7082;--metal-lo:#1a1c24;--lcd:#050806;--lcd-ink:#00e436;--lcd-dim:#125359;background:linear-gradient(180deg, #454a59, var(--metal) 40%, #30333e);border-left:2px solid var(--metal-hi);width:300px;box-shadow:inset 1px 0 0 var(--metal-lo), -4px 0 0 #00000073;color:var(--lcd-ink);pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;gap:4px;padding:4px;font-family:VT323,Padauk,monospace;font-size:19px;line-height:1.1;transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:0;bottom:0;right:0}.sb.closed{transform:translate(calc(100% + 8px))}.sb button{font:inherit;color:inherit}.sb-bar{border:1px solid var(--metal-lo);height:16px;box-shadow:inset 1px 1px 0 var(--metal-hi);color:#ffa300;letter-spacing:1px;background:linear-gradient(#2a2d38,#1d1f27);flex:none;align-items:center;gap:6px;padding:0 3px;font-family:"Press Start 2P",monospace;font-size:8px;display:flex}.sb-bar.small{color:#c2c3c7;background:repeating-linear-gradient(#0000 0 3px,#ffa30059 3px 4px),linear-gradient(#2a2d38,#1d1f27);justify-content:center}.sb-stripes{background:repeating-linear-gradient(#ffa300 0 1px,#742f29 1px 2px,#0000 2px 3px);flex:1;height:8px}.sb-bar-title{color:#ffec27;font-style:italic}.sb-mini{all:unset;border:1px solid var(--metal-lo);cursor:pointer;background:#5f574f;place-items:center;width:12px;height:11px;display:grid;box-shadow:inset 1px 1px #c2c3c7}.sb-lcd{background:var(--lcd);border:2px solid var(--metal-lo);box-shadow:inset 0 0 0 1px #0d1a10, 0 1px 0 var(--metal-hi);text-shadow:0 0 4px #00e43673;flex:none;padding:4px 6px 3px}.sb-lcd-top{align-items:center;gap:8px;display:flex}.sb-state canvas{display:block}.sb-time{letter-spacing:2px;min-width:96px;font-size:40px;line-height:.9}.sb-time.blink{animation:1s step-end infinite blink}.sb-spec{width:114px;height:27px;image-rendering:pixelated;margin-left:auto}.sb-marquee{white-space:nowrap;height:22px;margin-top:3px;overflow:hidden}.sb-flags{color:var(--lcd-dim);text-shadow:none;gap:8px;font-size:15px;display:flex}.sb-flag.on{color:var(--lcd-ink);text-shadow:0 0 4px #00e43673}.sb-pos{border:1px solid var(--metal-lo);height:10px;box-shadow:0 1px 0 var(--metal-hi);cursor:pointer;background:#111;flex:none;position:relative}.sb-pos-fill{background:repeating-linear-gradient(90deg,#ab5236 0 3px,#742f29 3px 4px);position:absolute;inset:0 auto 0 0}.sb-pos-thumb{border:1px solid var(--metal-lo);background:linear-gradient(#c2c3c7,#83769c);width:14px;height:12px;margin-left:-7px;position:absolute;top:-2px}.sb-controls{flex:none;align-items:center;gap:6px;display:flex}.sb-transport{gap:2px;display:flex}.sb-btn{all:unset;box-sizing:border-box;border:1px solid var(--metal-lo);color:#fff1e8;cursor:pointer;background:linear-gradient(#6a7082,#474c5c);justify-content:center;align-items:center;gap:5px;min-width:24px;height:20px;padding:0 4px;font-family:"Press Start 2P",monospace;font-size:8px;display:inline-flex;box-shadow:inset 1px 1px #a9afc0,inset -1px -1px #2a2d38}.sb-btn:hover{background:linear-gradient(#7a8094,#555b6c)}.sb-btn:active{transform:translateY(1px);box-shadow:inset 1px 1px #2a2d38}.sb-btn.wide{padding:0 8px}.sb-vol{color:#c2c3c7;flex:1;align-items:center;gap:4px;min-width:0;font-size:15px;display:flex}.sb-slider{appearance:none;border:1px solid var(--metal-lo);cursor:pointer;background:linear-gradient(90deg,#008751,#ffec27,#ff004d);flex:1;min-width:0;height:10px}.sb-slider::-webkit-slider-thumb{appearance:none;border:1px solid var(--metal-lo);background:linear-gradient(#c2c3c7,#83769c);width:10px;height:14px}.sb-slider::-moz-range-thumb{border:1px solid var(--metal-lo);background:linear-gradient(#c2c3c7,#83769c);border-radius:0;width:10px;height:14px}.sb-info{background:var(--lcd);border:2px solid var(--metal-lo);flex-direction:column;flex:none;gap:6px;padding:6px;display:flex}.sb-info-head{gap:8px;display:flex}.sb-cover{object-fit:contain;width:84px;height:auto;max-height:120px;image-rendering:pixelated;background:#111;border:1px solid #5f574f;flex:none}.sb-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.sb-album{color:#fff1e8;overflow-wrap:anywhere;font-size:22px}.sb-artist{color:#fca;overflow-wrap:anywhere}.sb-dim{color:#5f8a6a;font-size:16px}.sb-side-up{color:#ffa300;font-size:16px}.sb-actions{gap:4px;display:flex}.sb-empty{color:#5f8a6a}.sb-list{background:var(--lcd);border:2px solid var(--metal-lo);scrollbar-width:thin;scrollbar-color:#5f574f var(--lcd);flex:1;min-height:60px;padding:2px 0;overflow-y:auto}.sb-side{color:#ffa300;border-bottom:1px dotted #125359;justify-content:space-between;padding:4px 6px 1px;font-size:16px;display:flex}.sb-row{all:unset;box-sizing:border-box;cursor:pointer;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;width:100%;padding:1px 6px;display:grid}.sb-row.lib{grid-template-columns:32px 1fr auto;padding:3px 6px}.sb-row:hover{background:#0d2a16}.sb-row.current{color:#fff1e8;background:#1d2b53}.sb-row.empty{color:#5f8a6a;cursor:default;display:block}.sb-row-n{color:#5f8a6a}.sb-row-title{text-overflow:ellipsis;white-space:nowrap;flex-direction:column;min-width:0;display:flex;overflow:hidden}.sb-row-title .sb-dim{font-size:15px}.sb-row-time{color:#5f8a6a}.sb-thumb{width:32px;height:32px;image-rendering:pixelated;background:#111}.sb-footer{color:#c2c3c7;text-align:right;flex:none;padding:2px 4px;font-family:"Press Start 2P",monospace;font-size:8px}.sb-main,.sb-side{flex-direction:column;gap:4px;min-height:0;display:flex}.sb-main{flex:none}.sb-side{flex:1}.sb-tab{all:unset;z-index:3;color:#ffec27;writing-mode:vertical-rl;cursor:pointer;pointer-events:auto;background:linear-gradient(90deg,#454a59,#30333e);border:2px solid #6a7082;border-right:none;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;font-family:"Press Start 2P",monospace;font-size:8px;transition:right .28s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.sb-tab.open{right:300px}.sb-tab canvas{writing-mode:horizontal-tb}.hud.sb-docked .help-btn,.hud.sb-docked .help,.hud.sb-docked .settings{right:calc(300px + var(--u) * 8)}.help,.settings{right:calc(var(--u) * 8 + 34px)}.hud.sb-docked .help,.hud.sb-docked .settings{right:calc(300px + 34px + var(--u) * 8)}@media (width<=719px) and (aspect-ratio<=1){.help,.settings{right:calc(var(--u) * 8)}}.hud.sb-docked .settings-btn{right:calc(300px + var(--u) * 28)}.hud.sb-docked .toast{left:calc(50% - 150px)}@media (width<=719px){.sb{z-index:2;width:min(320px,92vw)}.sb-tab.open{right:min(320px,92vw)}}@media (width<=719px) and (aspect-ratio<=1){.sb{width:auto;height:58vh;padding-bottom:calc(4px + env(safe-area-inset-bottom));border-top:2px solid #6a7082;border-left:none;inset:auto 0 0;box-shadow:0 -4px #00000073}.sb.closed{transform:translateY(calc(100% + 8px))}.sb{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4px;font-size:17px;display:grid}.sb>.sb-bar{grid-column:1/-1}.sb-main{scrollbar-width:none;overflow-y:auto}.sb-side .sb-list{flex:1}.sb-time{min-width:0;font-size:30px}.sb-spec{width:72px;height:22px}.sb-lcd-top{gap:6px}.sb-flags{gap:5px;font-size:13px}.sb-controls{flex-wrap:wrap}.sb-transport{width:100%}.sb-transport .sb-btn{flex:1;min-width:0;height:30px}.sb-vol{flex-basis:100%}.sb-cover{width:56px}.sb-album{font-size:18px}.sb-actions{flex-wrap:wrap}.sb-btn.wide{height:30px}.sb-tab{top:auto;right:10px;bottom:calc(118px + env(safe-area-inset-bottom));writing-mode:horizontal-tb;border:2px solid #6a7082;flex-direction:row;padding:8px 12px;transition:bottom .28s cubic-bezier(.2,.8,.2,1);transform:none}.sb-tab.open{bottom:calc(58vh + 4px);right:10px}.sb-tab canvas{transform:rotate(90deg)}}@media (width<=719px) and (aspect-ratio<=1) and (pointer:coarse){.sb-tab{bottom:calc(var(--s) * 6px + 74px + 8px)}}.edge-tint{pointer-events:none;z-index:1;height:2px;position:fixed;left:0;right:0}.edge-tint.top{top:0}.edge-tint.bottom{bottom:0}.piano-key,.setting-value,.sb-btn,.sb-mini{position:relative}.tap-haptic{opacity:0;z-index:1;width:100%;height:100%;cursor:inherit;margin:0;padding:0;position:absolute;inset:0}.no-tap-haptics .tap-haptic{pointer-events:none}