.reading-original { max-width: 74ch; }
.reading-original .reading-word.spoken {
  color: var(--teal);
  background-color: #e6efea;
  border-radius: .18em;
}
.reading-original .reading-word.speaking {
  color: white;
  background-color: var(--teal);
  box-shadow: 0 0 0 .09em var(--teal);
}
.reading-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: end;
}
.reading-tools label { display: grid; gap: .25rem; font-size: .9rem; font-weight: 600; }
#reading-translation { max-width: 74ch; font-size: 1.05rem; line-height: 1.8; margin-top: 1rem; }
#reading-translation:lang(ja), #reading-translation:lang(zh-Hans) { max-width: 48em; line-break: strict; }
#reading-translation .hint { margin-top: 1rem; }
.further-reading{padding:.85rem 1rem;border-left:3px solid var(--teal);background:#eef4ef;margin:1rem 0}.further-reading small,.further-reading a{display:block}.further-reading a{font-weight:700}.further-reading span{font:italic 1rem Georgia,serif}.story-scene,.listen-entry{display:flex;align-items:center;gap:1rem}.story-scene{margin:.7rem 0}.story-scene img{width:clamp(62px,9vw,108px);aspect-ratio:1;object-fit:cover;border-radius:8px}.listen-entry{margin:1rem 0;padding:clamp(1rem,3vw,2rem);border-radius:12px;justify-content:space-between;flex-wrap:wrap;color:#fff;background:#173f40}.listen-entry .btn{background:#eef1cf;color:#154844}.heard-total{margin:1rem 0}.reading-tip .reading-links,.reading-vocab .reading-links{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}.reading-links button,.reading-links a{min-height:36px}.reading-original .reading-term { display:inline; font:inherit; color:inherit; background:none; border:0; border-radius:.15em; padding:0; text-align:inherit; text-decoration:underline dotted var(--teal); text-underline-offset:.2em; }
.reading-original .reading-term:hover { text-decoration-style:solid; }
#reading-milk:focus { outline:3px solid #d88018; outline-offset:3px; }
.reading-vocab ol { padding-inline-start:1.55rem; margin:1rem 0; }
.reading-vocab li { margin-bottom:1rem; padding:.5rem .3rem 1rem; border-bottom:1px solid var(--edge); }
.reading-vocab h3 { margin-bottom:.45rem; }
.reading-vocab li > strong { color:var(--muted); font-size:.86rem; font-weight:600; }
.reading-vocab li > p { margin:.1rem 0; }
.reading-equivalents { display:grid; gap:.25rem; margin:.6rem 0 0; }
.reading-equivalents div { display:grid; grid-template-columns:4.3rem minmax(0,1fr); align-items:baseline; gap:.3rem; }
.reading-equivalents dt { color:var(--muted); font-size:.78rem; }
.reading-equivalents dd { margin:0; }
.reading-tip { position:fixed; z-index:12; max-height:min(80vh,24rem); overflow-y:auto; width:min(23rem,calc(100vw - 16px)); padding:.9rem 1rem; border:1px solid #96b5a9; border-radius:.65rem; background:#fff; color:var(--ink); box-shadow:0 .3rem 1.2rem #172d3024; }
.reading-tip p { margin:.3rem 0; }
.reading-tip .reading-equivalents { font-size:.88rem; }
.reading-links .reading-clip { display:block; text-align:left; white-space:normal; max-width:100%; }
.reading-clip span { display:block; margin-top:.2em; font-weight:400; }
[data-fragment][aria-pressed="true"] { background:#e2eee9; color:var(--teal); }
.reading-tip .reading-links { align-items:flex-start; }
.recognition fieldset { border:0; margin:1rem 0 0; padding:0; }
.recognition legend { font-weight:600; margin-bottom:.4rem; }
.recognition label { display:inline-block; margin:.25rem 1rem .25rem 0; }
.recognition-result { margin-top:1rem; }
.recognition [hidden], .recognition-return[hidden] { display:none; }