@font-face {
  font-family: 'Agraw Tifinagh';
  src: url('talsa/presentation/NotoSansTifinagh-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+2D30-2D7F;
}
.agraw-language { display: inline-flex; align-items: center; flex-shrink: 0; position: relative; color: inherit; }
.agraw-language::after { content: '⌄'; position: absolute; right: 7px; pointer-events: none; font-size: 11px; }
.agraw-language select { appearance: none; -webkit-appearance: none; width: 120px; min-height: 32px; padding: 5px 20px 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: 12px 'Agraw Tifinagh', ui-sans-serif, system-ui, sans-serif; }
.agraw-language option { background: var(--chrome-bg, #082b3d); color: var(--chrome-ink, #fff); font-family: 'Agraw Tifinagh', ui-sans-serif, system-ui, sans-serif; }
.agraw-language select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-script="tfng"] { --font-ui: 'Agraw Tifinagh', ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-ui); }
html[data-script="tfng"] body,
html[data-script="tfng"] :is(button, input, select, option, .about-content h2, .unavailable-content h2) { font-family: 'Agraw Tifinagh', ui-sans-serif, system-ui, sans-serif; }
html[data-script="tfng"] .about-content { line-height: 1.9; }
html[data-script="tfng"] :is(.about-content h2, .unavailable-content h2) { letter-spacing: normal; }
@media (max-width: 760px) {
  .menubar { gap: 12px; padding-inline: 12px; }
  .menubar nav { gap: 12px; }
  .system-menu { gap: 5px; }
  .menubar .agraw-language select { width: 106px; font-size: 11px; padding-left: 6px; }
}
@media (max-width: 520px) {
  .menubar { gap: 7px; padding-inline: 8px; }
  .menubar .agraw-mark { width: 74px; }
  .menubar nav { gap: 8px; }
  .menubar nav::before { display: none; }
  .menubar nav button { font-size: 10px; }
  .system-menu { gap: 2px; }
  .system-menu time { display: none; }
  .system-menu > button { min-width: 25px; padding: 3px; }
  .menubar .agraw-language select { width: 96px; font-size: 10px; padding-left: 4px; }
}
@media (max-width: 359px) {
  .menubar .agraw-mark { width: 50px; }
  .menubar { gap: 3px; padding-inline: 4px; }
  .menubar nav { gap: 4px; }
  .menubar .agraw-language select { width: 88px; }
}