.lesson-token {
  --token-color: #edf0f2;
  background: transparent;
  border-radius: .22em;
  padding: .08em .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
  transition: box-shadow 120ms ease;
}
.lesson-token:link, .lesson-token:visited { color: inherit; text-decoration: none; }
.lesson-ja { font-size: clamp(1.2rem, 2.8vw, 1.65rem); font-weight: 550; overflow-wrap: anywhere; }
.lesson-romaji { margin-top: 4px; color: #53615a; font-size: .85rem; }
.lesson-meaning { margin-top: 12px; font-size: 1rem; }
.lesson-gloss { margin-top: 10px; font-size: .9rem; }
.lesson-audio { margin-top: 10px; }
.lesson-token[data-lesson-color="frequency"] { --token-color: #eee3fa; }
.lesson-token[data-lesson-color="object"] { --token-color: #dcefe3; }
.lesson-token[data-lesson-color="verb"] { --token-color: #dfeafa; }
.lesson-token[data-lesson-color="negative"] { --token-color: #fbe6d4; }
.lesson-token[data-lesson-color="time"] { --token-color: #f5edc8; }
.lesson-token[data-lesson-color="place"] { --token-color: #d7efef; }
.lesson-token[data-lesson-color="person"] { --token-color: #f6e0eb; }
.lesson-token[data-lesson-color="quality"] { --token-color: #e8edcf; }
.lesson-token[data-lesson-color="reply"] { --token-color: #ece4db; }
.lesson-token.is-linked { background: var(--token-color); }
.lesson-token.is-linked[data-lesson-match="frequency negative"] { background: linear-gradient(110deg, #eee3fa 50%, #fbe6d4 50%); }
.lesson-token.is-linked, .lesson-token:focus-visible {
  box-shadow: 0 0 0 2px #526b62, 0 0 10px 2px #526b6233;
  outline: none;
}
.lesson-sentence ruby { ruby-align: center; }
.lesson-sentence rt { font-size: .55em; font-weight: 400; }
.lesson-sentence [data-sentence-field="ja"] { line-height: 2.3; }
@media (prefers-reduced-motion: reduce) {
  .lesson-token { transition: none; }
}
@media (forced-colors: active) {
  .lesson-token { border-bottom: 1px dotted; }
  .lesson-token.is-linked, .lesson-token:focus-visible { outline: 2px solid Highlight; }
}