.specimen-plate .specimen-poster,
.specimen-plate canvas,
.specimen-gesture,
.specimen-tools {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.specimen-plate .specimen-poster { object-fit: contain; }
.specimen-plate canvas {
  display: block;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.specimen-ready canvas { opacity: 1; }
.specimen-ready .specimen-poster { opacity: 0; }
.specimen-gesture {
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.specimen-gesture:active { cursor: grabbing; }
.specimen-gesture:focus-visible { outline-offset: -4px; }
.specimen-tools {
  z-index: 4;
  pointer-events: none;
  color: var(--forest);
  font: 500 var(--type-caption)/1.3 var(--sans);
}
.specimen-tools button {
  pointer-events: auto;
  color: inherit;
  font: inherit;
  background: #f5f5e9f2;
}
.specimen-zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 1px solid #abb59f;
  border-radius: 4px;
  background: #f5f5e9f2;
}
.specimen-zoom button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  font: 22px/1 var(--sans);
  touch-action: manipulation;
}
.specimen-zoom button + button { border-top: 1px solid #c7cebb; }
.specimen-tools button:hover { background: #e4e9d8; }
.specimen-tools button:disabled { opacity: .46; }
.specimen-tools button:focus-visible { outline-offset: -3px; }
.specimen-hint { position: absolute; left: 15px; bottom: 29px; }
.specimen-plate .plate-art, .herb-viewer-stage { container: specimen-frame / inline-size; }
/* Give the two instructions separate corners when enlarged text fills the frame. */
@container specimen-frame (max-width: 17rem) {
  .specimen-plate .specimen-tools .specimen-hint { top: 14px; bottom: auto; max-width: calc(100% - 84px); }
}
.specimen-spin {
  position: absolute;
  right: 12px;
  bottom: 10px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid #abb59f;
  border-radius: 4px;
}
.specimen-plate figcaption { flex-wrap: wrap; gap: 8px 12px; }
.specimen-plate .plate-info { min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
.specimen-plate .plate-controls { flex: none; margin-inline-start: auto; }
.specimen-names { color: #4b5d4f; font-size: var(--type-caption); line-height: 1.3; }
.specimen-names i { font: italic var(--type-action)/1.25 var(--serif); }
.specimen-names > span[aria-hidden] { margin-inline: 2px; }
.specimen-name-link { display: inline-flex; align-items: baseline; gap: 6px; justify-self: start; color: var(--forest); text-decoration: none; line-height: 1; }
.specimen-name-link .plate-title { text-decoration: underline; text-decoration-color: #a8b298; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.specimen-name-link:hover .plate-title { text-decoration-color: currentColor; }
.specimen-name-link > [aria-hidden] { font: var(--type-link) var(--sans); color: #586b52; }
.specimen-picker { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid #999f8b; border-radius: 50%; }
.specimen-picker:hover { background: #dce2ce; }
.specimen-picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: var(--type-action); }
.specimen-picker:focus-within { outline: 2px solid var(--forest); outline-offset: 2px; }
@media (pointer: coarse) {
  .specimen-zoom button { width: 42px; height: 42px; }
  .specimen-spin { min-height: 42px; }
}