.persona-picker {
  --persona-accent: #9fe6d8;
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 90px;
  width: 144px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  color: #f2f3df;
  text-shadow: 0 2px 5px #00131e;
  background: radial-gradient(ellipse, #082636c9, transparent 72%);
}
.persona-copy { min-width: 0; text-align: center; }
.persona-copy strong {
  display: block;
  font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .3px;
  white-space: pre-line;
}
.persona-copy > span:not(.sr-only):not(.persona-pages) {
  display: block;
  margin-top: 4px;
  color: var(--persona-accent);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.persona-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #b5d3d466;
  border-radius: 50%;
  background: #0a2a3aa6;
  color: #eef3e6;
  transition: background .15s, border-color .15s;
}
.persona-arrow svg { width: 18px; height: 18px; }
.persona-arrow:hover:not(:disabled) { background: #31545f; border-color: #f4d28c; }
.persona-arrow:disabled { opacity: .35; cursor: default; }
.persona-arrow:focus-visible { outline: 2px solid #f4d28c; outline-offset: 3px; }
.persona-pages { display: flex; justify-content: center; gap: 5px; margin-top: 7px; }
.persona-pages i { width: 5px; height: 3px; border-radius: 2px; background: #adc3c675; }
.persona-pages .selected { width: 15px; background: #f4d28c; }
.persona-picker.locked { opacity: .75; }

@container (max-width: 550px) {
  .persona-picker { width: 124px; grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 2px; padding-block: 3px; }
  .persona-arrow { width: 26px; height: 26px; }
  .persona-copy strong { font-size: 17px; }
  .persona-copy > span:not(.sr-only):not(.persona-pages) { font-size: 9px; }
  .persona-pages { margin-top: 6px; }
  .scene-wallet .dev-button { left: auto; right: 0; }
}
@container (max-width: 350px) {
  .persona-picker { width: 114px; grid-template-columns: 24px minmax(0, 1fr) 24px; }
  .persona-arrow { width: 24px; height: 24px; }
  .persona-copy strong { font-size: 16px; }
  .persona-copy > span:not(.sr-only):not(.persona-pages) { font-size: 8.5px; }
}
@container (max-height: 260px) {
  .persona-picker { width: 124px; grid-template-columns: 26px minmax(0, 1fr) 26px; padding-block: 2px; gap: 2px; }
  .persona-arrow { width: 26px; height: 26px; }
  .persona-copy strong { font-size: 14px; }
  .persona-copy > span:not(.sr-only):not(.persona-pages) { margin-top: 2px; font-size: 8px; }
  .persona-pages { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .persona-arrow { transition: none; }
}