/* 線上鋼琴頁專用樣式 */
.pk-honest { background: #fff7ed; border-left: 4px solid var(--warn); padding: 10px 14px; border-radius: 6px; font-size: 1rem; }
.pk-now { margin: 8px 0; min-height: 3.2em; padding: 8px 12px; border: 2px solid var(--brand); border-radius: 12px; background: #eff4ff; text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.pk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.pk-bar .btn { min-height: 44px; }
.pk-bar .pk-range { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 8.5em; text-align: center; }
.pk-wrap { overflow-x: auto; border: 2px solid #222; border-radius: 10px; background: #222; -webkit-overflow-scrolling: touch; }
.pk-board { position: relative; height: clamp(150px, 38vh, 230px); min-width: calc(var(--w, 22) * 26px); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-x; }
.pk-key { position: absolute; top: 0; cursor: pointer; }
.pk-key.white { bottom: 0; background: #fff; border: 1px solid #777; border-radius: 0 0 6px 6px; z-index: 1; }
.pk-key.black { height: 62%; background: #1b1b1b; border-radius: 0 0 4px 4px; z-index: 2; }
.pk-key.white.on { background: #bfd2ff; }
.pk-key.black.on { background: #3b5bdb; }
.pk-nm { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: .72rem; color: #333; line-height: 1.2; pointer-events: none; }
.pk-kb { position: absolute; left: 0; right: 0; text-align: center; font-size: .72rem; font-weight: 700; pointer-events: none; line-height: 1.2; }
.pk-key.white .pk-kb { bottom: 24px; color: var(--brand); }
.pk-key.black .pk-kb { bottom: 6px; color: #fff; }
.pk-board.hide-hints .pk-kb { display: none; }
.pk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: end; }
.pk-opts > * { min-width: 0; }
.pk-range-input { width: 100%; min-height: 36px; }
.it-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 1rem; cursor: pointer; }
.it-check input { width: 20px; height: 20px; flex: none; }
@media (max-width: 480px) { .pk-opts { grid-template-columns: 1fr; } }
@media (orientation: landscape) and (max-height: 500px) { .pk-board { height: clamp(110px, 42vh, 190px); } .pk-nm { font-size: .65rem; } }
.sources li { overflow-wrap: anywhere; }