/* Keywise tools (pn-tl-*). */
.view-tools [hidden] { display: none !important; }
.pn-tl-chord { font-size: clamp(44px, 9vw, 76px); color: var(--accent); overflow-wrap: anywhere; min-height: 1em; }
.pn-tl-monitor { align-items: start; }
.pn-tl-log { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 2px; font: 13px var(--font-mono); color: var(--muted); }
.pn-tl-log b { color: var(--fg); }
.pn-tl-checks { gap: 6px 18px; }
.pn-tl-prog { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.pn-tl-prog-chord { padding: 8px; gap: 2px; min-height: 60px; justify-content: center; }

/* metronome */
.pn-tl-met-display { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pn-tl-bpm { font-variant-numeric: tabular-nums; }
.pn-tl-met-tempo { flex-wrap: nowrap; }
.pn-tl-met-tempo input[type="range"] { flex: 1; min-width: 0; }
.pn-tl-lights { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pn-tl-light {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px var(--font-mono); color: var(--muted);
  background: var(--surface-2); border: 2px solid var(--line); transition: background .06s, transform .06s;
}
.pn-tl-light.group { border-color: var(--cool); }
.pn-tl-light.down { border-color: var(--accent); }
.pn-tl-light.on { background: var(--fg); color: var(--bg); transform: scale(1.08); }
.pn-tl-light.down.on { background: var(--accent); color: var(--accent-ink); }
.pn-tl-light.group.on { background: var(--cool); color: var(--bg); }

/* circle of fifths */
.pn-tl-circle-panel { align-items: center; }
.pn-tl-circle { width: 100%; max-width: 420px; height: auto; display: block; }
.pn-tl-seg { cursor: pointer; outline: none; }
.pn-tl-seg path { stroke: var(--bg); stroke-width: 2; transition: fill .15s; }
.pn-tl-seg.pn-tl-major path { fill: var(--surface-2); }
.pn-tl-seg.pn-tl-minor path { fill: var(--surface); }
.pn-tl-seg text { fill: var(--fg); font-family: var(--font-display); font-weight: 800; pointer-events: none; }
.pn-tl-seg.pn-tl-minor text { fill: var(--muted); font-family: var(--font-body); font-weight: 600; }
.pn-tl-seg .pn-tl-sig { font: 500 10px var(--font-mono); fill: var(--muted); }
.pn-tl-seg:hover path { fill: var(--accent-soft); }
.pn-tl-seg.pn-tl-rel path { fill: var(--cool-soft); }
.pn-tl-seg.on path { fill: var(--accent); }
.pn-tl-seg.on text, .pn-tl-seg.on .pn-tl-sig { fill: var(--accent-ink); }
.pn-tl-seg:focus-visible path { stroke: var(--accent); stroke-width: 3; }
.pn-tl-circle-key { font: 800 26px var(--font-display); fill: var(--fg); }
.pn-tl-circle-sub { font: 500 12px var(--font-mono); fill: var(--muted); }