*,*:before,*:after{box-sizing:border-box}:root{--background: #eee;--text: #333;--panel: rgba(238, 238, 238, .8);--veil: rgba(238, 238, 238, .6);--border: rgba(51, 51, 51, .25);color-scheme:light;--top: calc(16px + env(safe-area-inset-top)) ;--right: calc(16px + env(safe-area-inset-right)) ;--bottom: calc(16px + env(safe-area-inset-bottom)) ;--left: calc(16px + env(safe-area-inset-left)) }body.dark{--background: #000;--text: #ccc;--panel: rgba(20, 20, 20, .8);--veil: rgba(0, 0, 0, .6);--border: rgba(204, 204, 204, .25);color-scheme:dark}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--background)}canvas{display:block}body{color:var(--text);font-family:system-ui,sans-serif}.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;border:0;background:var(--veil);color:inherit;font:inherit;font-size:1.5rem;cursor:pointer}.overlay[hidden]{display:none}.overlay small{font-size:.875rem;opacity:.6}.track{position:fixed;left:var(--left);bottom:var(--bottom);display:flex;align-items:center;gap:8px;font-size:.75rem}.track select,.track .play{height:26px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:inherit;font:inherit;cursor:pointer}.track select{padding:0 8px}.track .play{display:grid;place-items:center;width:28px;padding:0}.track .play svg{width:12px;height:12px}.track span{opacity:.6}.options{position:fixed;right:var(--right);bottom:var(--bottom);display:flex;gap:8px}.options label{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel);font-size:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.options input{margin:0;accent-color:var(--text);cursor:pointer}.credits{position:fixed;top:var(--top);right:var(--right);z-index:1;margin:0;font-size:.75rem;opacity:.6}.credits a{color:inherit}@media(hover:none){.track span{display:none}}@media(max-width:640px){:root{--tap: 44px}.stats{display:none}.track{right:var(--right);bottom:calc(var(--bottom) + var(--tap) + 8px)}.track select{flex:1;min-width:0;height:var(--tap);font-size:16px}.track .play{flex:none;width:var(--tap);height:var(--tap)}.track .play svg{width:16px;height:16px}.track span{display:none}.options{left:var(--left)}.options label{flex:1;justify-content:center;height:var(--tap);font-size:.875rem}.options input{width:18px;height:18px}}body.dragging:after{content:"Drop to play";position:fixed;inset:16px;display:flex;align-items:center;justify-content:center;border:2px dashed currentColor;border-radius:12px;background:var(--panel);font-size:1.5rem;pointer-events:none}