:root{--bg:#16181d;--panel:#262b34;--panel2:#1c2027;--alt:#2a2433;--line:#2c313b;--txt:#e7e9ee;--accent:#5b8cff;--min:#c07a3a;--minlbl:#e7b889;--altsel:#9b6ad6;--dim:#8a90a0}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--txt);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));align-items:stretch;gap:6px;font:16px/1.2 system-ui,sans-serif;display:flex;overflow:hidden}@media (orientation:portrait){body{flex-direction:column}}button{font:inherit;color:var(--txt);-webkit-user-select:none;user-select:none;touch-action:none}.wheelwrap{flex:1 1 0;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex}svg{aspect-ratio:1;touch-action:none;width:100%;max-width:100%;height:100%;max-height:100%;display:block}.rcol{touch-action:none;flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.rtrack{flex-direction:column;transition:transform .25s;display:flex;position:absolute;inset:0}.rpanel{flex:0 0 100%;justify-content:center;align-items:center;height:100%;display:flex}.pagedots{flex-direction:column;gap:6px;display:flex;position:absolute;top:50%;right:3px;transform:translateY(-50%)}.dot{background:var(--line);border-radius:50%;width:7px;height:7px}.dot.on{background:var(--accent)}.tile path{fill:var(--panel);stroke:var(--bg);stroke-width:.8px;transition:fill 80ms}.tile.min path{fill:var(--panel2)}.tile.alt path{fill:var(--alt)}.tile.alt.inner path{fill:#241e2c}.tile.note path{fill:#1d2b25}.tile.note.inner path{fill:#16211d}.tile text{fill:var(--txt);text-anchor:middle;pointer-events:none;font-size:4.2px;font-weight:600}.tile.min text{fill:var(--minlbl);font-size:3.7px}.tile.alt text{font-size:3.6px}.tile.alt.inner text{font-size:3.3px}.tile.note text{font-size:3.7px}.tile.note.inner text{font-size:3.3px}.tile.on path{fill:var(--accent)}.tile.min.on path{fill:var(--min)}.tile.note.on path{fill:#2e9e6b}.tile.alt.sel path{fill:var(--altsel)}.tile.out{opacity:.28}.hub-bg{fill:var(--bg);stroke:var(--line);stroke-width:.8px}#chordHub,#altHub{fill:var(--txt);text-anchor:middle;pointer-events:none;font-size:4.6px;font-weight:700}.hub-cap{fill:var(--dim);text-anchor:middle;pointer-events:none;text-transform:uppercase;letter-spacing:.3px;font-size:2.6px}#altHubGroup{cursor:pointer}.gear{top:calc(6px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));background:var(--panel);border:1px solid var(--line);cursor:pointer;z-index:5;border-radius:9px;width:34px;height:34px;padding:0;font-size:18px;line-height:1;position:fixed}.settings{z-index:10;background:#00000080;justify-content:flex-end;display:flex;position:fixed;inset:0}.settings[hidden]{display:none}.panel{background:var(--bg);border-left:1px solid var(--line);flex-direction:column;gap:18px;width:min(340px,82vw);height:100%;padding:18px;display:flex;overflow:auto}.panel-head{justify-content:space-between;align-items:center;font-size:18px;display:flex}.panel .gear{position:static}.panel label{color:var(--dim);align-items:center;gap:10px;display:flex}.panel input[type=range]{flex:1}.panel select{font:inherit;color:var(--txt);background:var(--panel);border:1px solid var(--line);border-radius:8px;flex:1;padding:6px 8px}.panel .row{gap:14px;display:flex}.panel .row label{flex:1}.panel .check{color:var(--txt)}.val{text-align:right;min-width:26px;color:var(--txt)}.hint{color:var(--dim);font-size:13px;line-height:1.4}