[hidden] { display: none !important; }
button, select, input { font-family: var(--font-tw); }
button, summary, select, a { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible, .token:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
select { max-width: 100%; padding: .4rem; border: 1px solid var(--rule); background: var(--card-bg); color: var(--ink); border-radius: 3px; }
#error { margin: .5rem 0; }
.token { cursor: pointer; }
#word-tooltip { position: absolute; z-index: 20; max-width: min(22rem, calc(100vw - 1rem)); background: var(--card-bg); color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 4px; padding: .5rem .7rem; font-size: calc(1.05rem * var(--ui)); line-height: 1.5; box-shadow: 0 2px 10px rgba(42,38,32,.18); font-family: var(--font-tw); pointer-events: none; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  body { padding: 1rem .75rem 2rem; }
  h1 { font-size: calc(1.45rem * var(--ui)); line-height: 1.5; }
  .lede { font-size: calc(1.1rem * var(--ui)); margin-bottom: 1rem; }
  section.panel { padding: 1rem; margin-bottom: 1rem; }
  textarea { min-height: 6rem; padding: .65rem; font-size: calc(1rem * var(--fs, 1.5)); }
  .controls { margin-top: .75rem; gap: .6rem; }
  .controls:not(.toggles) { flex-direction: row; flex-wrap: wrap; }
  .controls:not(.toggles) > div { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
#word-tooltip .alt-title { margin-top: .5rem; padding-top: .4rem; border-top: 1px dashed var(--rule); font-size: calc(1rem * var(--ui)); color: var(--ink-soft); }
#word-tooltip .alt-reading { margin-top: .3rem; }
#word-tooltip .alt-reading b { font-family: var(--font-tailo); color: var(--jade); font-weight: normal; }