/* The piano's controls, on the front page. */
h2.inline { margin: 0 8px 0 0; }
.pn-panel { padding: 16px; margin-bottom: 24px; }
.pn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pn-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pn-groups { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 14px; }
.pn-group h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 8px; }
.knobs { display: flex; flex-wrap: wrap; gap: 8px 4px; }

/* A keyboard, each key lit as it sounds: white keys in a row, each black
   key sitting over the join with the next. */
.pn-keys { display: flex; margin-top: 14px; height: 64px; max-width: 100%; }
.pn-key { position: relative; flex: 1; min-width: 0; border: 1px solid var(--line); border-left-width: 0; border-radius: 0 0 4px 4px; background: #f4f4f8; transition: background 0.4s; }
.pn-key:first-child { border-left-width: 1px; }
.pn-key[data-c]::after { content: attr(data-c); position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font: 9px var(--mono); color: #8d8d9f; }
.pn-black { position: absolute; z-index: 1; top: -1px; right: -30%; width: 60%; height: 60%; flex: none; border: 0; border-radius: 0 0 3px 3px; background: #24242e; }
.pn-key.on { background: var(--accent); transition: none; }