.reader { min-height: 100svh; padding: clamp(112px, 23vh, 230px) 32px 104px; }
.reading {
  width: min(100%, 800px);
  margin: 0 auto;
  transition: opacity 240ms ease, transform 240ms ease;
}
.reading.is-loading,
.reading.is-changing { opacity: 0; transform: translateY(4px); }

.sentence {
  min-height: 1.6em;
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(2rem, 3.15vw, 2.65rem);
  font-weight: 600;
  line-height: 1.58;
  letter-spacing: -0.02em;
}

.learning-item {
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.learning-item:hover,
.learning-item[aria-expanded="true"] { color: #000; border-bottom-color: var(--line); }
.learning-item:focus-visible { outline: 1px solid var(--focus); outline-offset: 4px; border-radius: 1px; }

.note {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transition: grid-template-rows 230ms ease, opacity 180ms ease, margin 230ms ease;
}
.note-content { min-height: 0; overflow: hidden; }
.note.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: 30px 0 6px;
}
.note-heading { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.note-term {
  margin: 0;
  font-family: var(--mono);
  font-size: .98rem;
  font-weight: 600;
}
.note-pattern {
  margin: 0;
  color: var(--quiet);
  font-family: var(--mono);
  font-size: .8rem;
  font-style: italic;
}
.note-meaning {
  margin: 11px 0 0;
  color: #555552;
  font-size: .9rem;
  line-height: 1.7;
}
.note-meaning-ja { margin-top: 3px; color: #747470; font-size: .86rem; }
.note-usage {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--soft-line);
  color: #777773;
  font-size: .84rem;
  line-height: 1.72;
}
.translations { margin-top: 36px; }
.translation { margin: 0; color: var(--muted); line-height: 1.75; }
.translation-zh { font-size: 1.16rem; }
.translation-ja { margin-top: 12px; color: #858580; font-size: 1rem; }
.refresh {
  position: fixed;
  right: 36px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #777773;
  font-family: Arial, sans-serif;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, transform 260ms ease, opacity 180ms ease;
}
.refresh:hover { color: var(--ink); transform: rotate(28deg); }
.refresh:active { transform: rotate(50deg) scale(.96); }
.refresh:focus-visible { outline: 1px solid var(--focus); outline-offset: 4px; }
.refresh:disabled { cursor: wait; opacity: .35; }
.error { width: min(100%, 800px); margin: 0 auto; color: var(--muted); font-size: .95rem; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .reading, .note, .refresh, .learning-item { transition-duration: .01ms; }
}
@media (max-width: 640px) {
  .reader { padding: clamp(96px, 20vh, 150px) 24px 92px; }
  .sentence { font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.62; letter-spacing: -.025em; }
  .translations { margin-top: 30px; }
  .translation-zh { font-size: 1rem; line-height: 1.72; }
  .translation-ja { margin-top: 10px; font-size: .91rem; line-height: 1.72; }
  .note.is-open { margin-top: 25px; }
  .note-term { font-size: .94rem; }
  .note-pattern { font-size: .77rem; }
  .note-meaning { font-size: .87rem; }
  .note-meaning-ja { font-size: .83rem; }
  .note-usage { font-size: .82rem; }
  .refresh { right: 18px; bottom: 20px; width: 46px; height: 46px; font-size: 28px; }
}

/* v1.5: every word is selectable; related phrases remain available from the note. */
.word-item.phrase-hover:not([aria-expanded="true"]) {
  border-bottom-color: #deded9;
}
.note-options {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.note-options[hidden] { display: none; }
.note-option {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #8a8a85;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.4;
  cursor: pointer;
}
.note-option:hover,
.note-option[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--line);
}
.note-option:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .note-options { gap: 7px 12px; margin-bottom: 12px; }
  .note-option { font-size: .73rem; }
}