.tool[data-tool=virtual-piano] .piano-tool{gap:var(--space-4);display:grid}.tool[data-tool=virtual-piano] .lbl{font-weight:600}.tool[data-tool=virtual-piano] .oct-row{align-items:center;gap:var(--space-3);display:flex}.tool[data-tool=virtual-piano] .oct-row .btn,.tool[data-tool=virtual-piano] .btn{min-block-size:var(--tap);min-inline-size:var(--tap)}.tool[data-tool=virtual-piano] .oct{text-align:center;min-inline-size:3rem}.tool[data-tool=virtual-piano] .check{align-items:center;gap:var(--space-2);min-block-size:var(--tap);display:flex}.tool[data-tool=virtual-piano] .media-note{font-size:var(--fs-sm);color:var(--c-text-2);margin:0}.tool[data-tool=virtual-piano] .board-scroll{min-inline-size:0;padding-block-end:var(--space-2);overflow-x:auto}.tool[data-tool=virtual-piano] .board{block-size:11rem;min-inline-size:calc(var(--whites) * 56px);-webkit-user-select:none;user-select:none;touch-action:none;position:relative}.tool[data-tool=virtual-piano] .key{cursor:pointer;touch-action:none;font-size:var(--fs-sm);flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;margin:0;padding:0;display:flex;position:absolute;inset-block-start:0}.tool[data-tool=virtual-piano] .white{color:#1b1b1b;border-radius:0 0 var(--r-sm) var(--r-sm);box-sizing:border-box;background:#fff;border:1px solid #8a8a8a;block-size:100%}.tool[data-tool=virtual-piano] .white.on{background:#cfe3ff}.tool[data-tool=virtual-piano] .black{color:#e8e8e8;border-radius:0 0 var(--r-sm) var(--r-sm);z-index:2;box-sizing:border-box;background:#1d1d1f;border:1px solid #000;block-size:62%}.tool[data-tool=virtual-piano] .black.on{background:#3f6fd1}.tool[data-tool=virtual-piano] .note{font-weight:600}.tool[data-tool=virtual-piano] .hot{opacity:.6;padding-block-end:4px;font-size:.7rem}