.piano-photo-open { display: block; height: 100%; cursor: zoom-in; }
.piano-photo-hint {
    position: absolute; bottom: 1rem; right: 1rem; z-index: 3;
    padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.35);
    border-radius: 2px; background: rgba(28,25,22,.8); color: #fff;
    font-size: .78rem; letter-spacing: .03em; pointer-events: none;
}
.piano-thumbs a { flex-shrink: 0; display: block; cursor: zoom-in; }
.piano-thumbs a img { display: block; cursor: zoom-in; }
.piano-photo-open:focus-visible, .piano-thumbs a:focus-visible {
    outline: 3px solid var(--accent-gold, #8b7355); outline-offset: -3px;
}
.piano-gallery {
    box-sizing: border-box; position: fixed; inset: 0; margin: 0;
    width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
    padding: max(1.25rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
    border: 0; background: rgba(22,21,19,.97); color: #f5f0e9;
}
.piano-gallery::backdrop { background: rgba(15,14,12,.8); }
.piano-gallery[open] { display: flex; flex-direction: column; gap: 1rem; }
.piano-gallery-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-shrink: 0; }
.piano-gallery-kicker { margin: 0 0 .4rem; font: 500 .65rem var(--font-sans, sans-serif); text-transform: uppercase; letter-spacing: .16em; color: #cfb896; }
.piano-gallery h2 { margin: 0; color: inherit; font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.2; }
.piano-gallery-status { margin: .4rem 0 0; font-size: .8rem; color: #cfb896; }
.piano-gallery-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.piano-gallery-image { width: 100%; height: 100%; object-fit: contain; user-select: none; touch-action: pan-y pinch-zoom; }
.piano-gallery-message { position: absolute; max-width: 30rem; padding: 1rem; text-align: center; color: #d8cec0; font-size: .9rem; pointer-events: none; }
.piano-gallery-footer { display: flex; align-items: center; justify-content: center; gap: 1.75rem; flex-shrink: 0; }
.piano-gallery-counter { min-width: 5rem; margin: 0; text-align: center; font-size: .8rem; letter-spacing: .06em; color: #d8cec0; }
.piano-gallery-button {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 48px; height: 48px; padding: 0; border: 1px solid #716354;
    border-radius: 50%; background: transparent; color: #f5f0e9; cursor: pointer;
    font: 400 1.5rem var(--font-sans, sans-serif); transition: background .18s, border-color .18s;
}
.piano-gallery-button:hover { background: #443b30; border-color: #cfb896; }
.piano-gallery-button:focus-visible { outline: 2px solid #e2c39d; outline-offset: 4px; }
.piano-gallery [hidden] { display: none !important; }
@media (max-width: 600px) {
    .piano-gallery { padding-left: max(.9rem, env(safe-area-inset-left)); padding-right: max(.9rem, env(safe-area-inset-right)); }
    .piano-gallery-kicker { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) { .piano-gallery-button { transition: none; } }