button,select,label,input[type=range]{touch-action:manipulation}button,a,select,input[type=range],canvas{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}input[type=range]{touch-action:pan-y}@media (width<=700px) and (pointer:fine){.palette,.deck{border-radius:22px;flex-wrap:wrap;justify-content:center;max-width:94vw}}@media (pointer:coarse){.palette{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:28px;flex-wrap:nowrap;justify-content:flex-start;gap:2px;width:calc(100vw - 16px);max-width:none;padding:5px 10px;overflow:auto hidden}.palette::-webkit-scrollbar{display:none}.palette>*{flex:none}.palette button,.palette select{min-width:44px;min-height:44px;padding:8px 12px;font-size:14px}.palette label{white-space:nowrap;min-height:44px}.palette input[type=range]{width:104px;height:44px}.palette .sep{display:none}main.deck{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;width:calc(100vw - 16px);max-width:none;padding:10px 12px}main.deck button{min-width:44px;min-height:44px}main.deck .fader{gap:4px}main.deck .fader input[type=range]{width:92px;height:40px}body .bar{overscroll-behavior-x:contain;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;gap:6px;padding:4px 12px;overflow:auto hidden}body .bar::-webkit-scrollbar{display:none}body .bar>*{flex:none}body .bar button,body .bar select{min-height:40px;padding:6px 12px}body .bar input[type=range]{width:88px;height:40px}body .bar label{white-space:nowrap}.crosslink{margin:-10px -12px;padding:10px 12px}.palette button:hover,.deck button:hover,.bar button:hover,.crosslink:hover{color:inherit}#hint{bottom:84px}}:root{--void:#000;--bone:#e9e6e0;--grey:#4a4a48;--red:#ff2d3f}*{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;height:100%}body{background:var(--void);color:var(--bone);flex-direction:column;height:100dvh;font-family:JetBrains Mono,Consolas,monospace;display:flex;overflow:hidden}.mark{-webkit-user-select:none;user-select:none;align-items:baseline;gap:14px;padding:20px 24px 10px;display:flex}.mark h1{letter-spacing:8px;font-size:18px;font-weight:700}.mark .tag{letter-spacing:3px;color:var(--grey);font-size:10px}.crosslink{letter-spacing:2px;color:var(--grey);margin-left:auto;font-size:10px;text-decoration:none}.crosslink:hover,.crosslink:focus-visible{color:var(--bone)}main{flex:1;justify-content:center;align-items:center;min-height:0;padding:8px 24px;display:flex}#cv{touch-action:none;cursor:pointer;image-rendering:pixelated}.bar{-webkit-user-select:none;user-select:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:6px 16px;display:flex}.bar:first-of-type{padding-top:12px}.bar button{background:var(--void);color:var(--grey);border:1px solid var(--grey);letter-spacing:2px;cursor:pointer;padding:7px 14px;font-family:inherit;font-size:11px}.bar button:hover{color:var(--bone);border-color:var(--bone)}.bar button:focus-visible{outline:2px solid var(--red);outline-offset:2px}.bar button.on{background:var(--bone);color:var(--void);border-color:var(--bone)}#rec.rec-on{color:var(--red);border-color:var(--red)}.bar select{background:var(--void);color:var(--grey);border:1px solid var(--grey);letter-spacing:2px;cursor:pointer;padding:7px 8px;font-family:inherit;font-size:11px}.bar select:hover{color:var(--bone);border-color:var(--bone)}.bar label{letter-spacing:2px;color:var(--grey);align-items:center;gap:8px;font-size:10px;display:flex}#bpm{width:100px;accent-color:var(--red)}#hint{text-align:center;padding:0 16px max(14px, env(safe-area-inset-bottom));letter-spacing:2px;color:var(--grey);-webkit-user-select:none;user-select:none;font-size:9px;transition:opacity .8s}#hint.gone{opacity:0}