/* Rest masks and motion frames share one fixed crop. */
.ink-extra-button {
  appearance:none; display:block; position:relative; padding:0; border:0;
  color:var(--ink); background:transparent; cursor:pointer; overflow:visible;
  min-width:44px; min-height:44px; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; animation:none !important; transform:none !important;
  transition:none !important; aspect-ratio:var(--ink-frame-ratio);
}
.ink-extra-button:hover,.ink-extra-button:active { background:transparent; }
.ink-extra-button:focus-visible { outline:2px solid var(--ink); outline-offset:5px; border-radius:4px; }
.ink-extra-button:disabled { cursor:default; opacity:1; }
.ink-extra-rest,.ink-extra-frame { display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ink-extra-frame { object-fit:contain; }
.ink-extra-rest { background:var(--ink); -webkit-mask:var(--ink-rest) center/contain no-repeat; mask:var(--ink-rest) center/contain no-repeat; }
.ink-extra-playing .ink-extra-rest { visibility:hidden; }
.ink-extra-button [hidden] { display:none; }
.ink-extra-button.divider-log { height:auto; aspect-ratio:var(--ink-frame-ratio); }
.spot-good:hover .ink-extra-button,.spot-bad:hover .ink-extra-button,.plaques:hover .ink-extra-button,
.divider:hover .ink-extra-button { animation:none !important; transform:none !important; }
@media print { .ink-extra-button { display:none; } }