:root{--bg: #0a0a0a;--char: rgba(255, 255, 255, .65);--border-empty: rgba(255, 255, 255, .22);--border-filled: rgba(255, 255, 255, .07);--head-tint: rgba(255, 255, 255, .06);--fired: #ff3b30;--cell-size: 1.6em}html,body{margin:0;padding:0;background:var(--bg);color:var(--char);height:100%}body{display:grid;place-items:center;font-family:ui-monospace,SF Mono,Menlo,Sarasa Mono SC,Noto Sans Mono CJK SC,monospace}#grid{margin:0;padding:4ch;font-size:22px;line-height:var(--cell-size);letter-spacing:0;-webkit-user-select:none;user-select:none;cursor:pointer}.cell{display:inline-block;width:var(--cell-size);height:var(--cell-size);line-height:var(--cell-size);text-align:center;vertical-align:top;color:transparent;box-shadow:inset 0 0 0 1px var(--border-empty);transition:color 80ms linear,box-shadow 80ms linear,transform 80ms linear,background-color 80ms linear}.cell.on{color:var(--char);box-shadow:inset 0 0 0 1px var(--border-filled)}.cell.head{background-color:var(--head-tint)}.cell.on.head{color:var(--fired);font-weight:700;transform:scale(1.15)}#grid[data-color-mode=per-track-hue] .row{--track-color: hsl(var(--track-hue, 0) 70% 65%)}#grid[data-color-mode=per-track-hue] .cell.on{color:var(--track-color);opacity:.7}#grid[data-color-mode=per-track-hue] .cell.on.head{opacity:1}