/* Drag the tree (/connections/rhythm-of-numbers/tree/): prefix tr-, on top of rn.css. Script: tree.js. */
.tr-inst canvas{display:block;width:100%;touch-action:none;border-radius:10px;background:var(--rn-soft)}
.tr-inst canvas:focus{outline:none}
.tr-inst canvas:focus-visible{outline:3px solid var(--rn-gold);outline-offset:2px}
.tr-presets{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.6rem}
.tr-lab{font-size:.85rem;color:var(--rn-muted);margin-right:.2rem}
.tr-presets button[aria-pressed="true"]{border-color:var(--rn-g);box-shadow:inset 0 0 0 1px var(--rn-g)}
.tr-read{margin-bottom:.6rem}
.tr-read dd{min-width:0;overflow-wrap:anywhere}
.tr-hint{font-weight:400;color:var(--rn-muted);font-size:.85em}
.tr-cf{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .2rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tr-cf button{font:inherit;min-width:2rem;min-height:2rem;padding:.1rem .4rem;border:1px solid var(--rn-line);border-radius:7px;background:var(--rn-panel);color:var(--rn-ink);cursor:pointer}
.tr-cf button:hover{border-color:var(--rn-g)}
.tr-cf button:focus-visible{outline:3px solid var(--rn-gold);outline-offset:1px}
.tr-cf button.lk{background:var(--rn-g);border-color:var(--rn-g);color:var(--rn-on);font-weight:700}
.tr-cf .sep{color:var(--rn-muted)}
.tr-ctl{margin-top:.6rem}
.tr-lock{min-height:1.4em;margin-top:.4rem}
.tr-lock b{color:var(--rn-g)}
.tr-note{min-height:1.4em;color:var(--rn-muted)}
.tr-read2{margin-top:.4rem}
.tr-rhythm{margin-top:.7rem}
.tr-rhythm canvas{background:transparent;border-radius:0;margin-top:.3rem}