/* One drawn arrow for the brand and navigation, independent of the UI font. */
:root {
  --ui-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-arrow, .action-forward::after, .action-back::before {
  display:inline-block; width:1.1em; height:1.1em; flex:0 0 auto;
  vertical-align:-.16em; background:currentColor;
  -webkit-mask:var(--ui-arrow) center / contain no-repeat;
  mask:var(--ui-arrow) center / contain no-repeat;
  pointer-events:none;
}
.action-forward::after { content:""; margin-left:.65em; }
.action-back::before { content:""; margin-right:.65em; transform:rotate(180deg); }
@media (forced-colors:active) {
  .ui-arrow, .action-forward::after, .action-back::before { background:ButtonText; forced-color-adjust:none; }
}