/* The reference's Tailwind classes define the appearance; only interaction support lives here. */
[hidden] { display: none !important; }
.material-symbols-outlined { vertical-align: middle; }
a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid #f0bf5c;
  outline-offset: 3px;
}
.searching .kana-gap { display: none; }
#keyboard-help {
  margin: auto; width: min(480px, calc(100% - 32px)); padding: 24px;
  border-radius: 8px; background: #efe7d6; color: #1f2430; border: 1px solid #ded3be;
}
#keyboard-help::backdrop { background: #171d34d9; }
.help-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.help-heading h2 { font: 500 20px 'Noto Serif', serif; }
.help-heading button { width: 32px; height: 32px; font-size: 24px; }
#keyboard-help p { font: 400 14px/1.8 Inter, sans-serif; }
@media (max-width: 1279px) {
  #kana-navigation[data-open] {
    position: absolute; top: 64px; left: 0; right: 0; display: flex; flex-direction: column;
    align-items: stretch; padding: 16px 20px; background: #171d34;
    border-bottom: 1px solid #f0bf5c33; max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  #kana-navigation a { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}