.sra { margin-block: 1.25rem; padding: 1rem; border: 1px solid currentColor; border-radius: .5rem; min-width: 0; }
.sra[hidden] { display: none; }
.sra h3, .sra dd, .sra a { overflow-wrap: anywhere; }
.sra dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1rem; }
.sra dd { margin: 0; }
.sra button, .sra select, .sra-explore { font: inherit; min-height: 44px; max-width: 100%; white-space: normal; }
.sra button, .sra-explore { cursor: pointer; padding: .5rem .75rem; }
.sra button:disabled { cursor: default; opacity: .65; }
.sra-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-block: 1rem; }
.sra-navigation button { overflow-wrap: anywhere; }
.sra :focus-visible, .sra-explore:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sra-explore { align-self: center; justify-self: start; }
@media (max-width: 480px) {
  .sra { padding: .75rem; }
  .sra-navigation { grid-template-columns: minmax(0, 1fr); }
  .sra dl { grid-template-columns: minmax(0, 1fr); }
  .sra dd { margin-bottom: .5rem; }
}