: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:100vh;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:12px 16px;display:flex}.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;letter-spacing:2px;color:var(--grey);-webkit-user-select:none;user-select:none;padding:0 16px 14px;font-size:9px;transition:opacity .8s}#hint.gone{opacity:0}