.reading-explorer {
  margin: 1.5rem 0 1.8rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #deded9;
  border-radius: 10px;
  background: #fff;
  color: #333;
  font-family: "DejaVu Sans", system-ui, sans-serif;
  font-size: .92rem;
  max-width: 960px;
}
.reading-explorer .re-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.reading-explorer h4 { font-size:1.05rem; margin:0; color:#333; }
.reading-explorer button, .reading-explorer select { font:inherit; padding:.35rem .7rem; border:1px solid #bbb; border-radius:5px; background:white; color:#333; }
.reading-explorer button:hover { background:#edf6f3; }
.reading-explorer :focus-visible { outline:3px solid #278474; outline-offset:3px; }
.reading-explorer .re-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.reading-explorer .re-panel { min-width:0; }
.reading-explorer .re-panel-title { font-weight:600; text-align:center; margin:.3rem 0; font-size:.87rem; }
.reading-explorer svg { display:block; width:100%; height:auto; overflow:hidden; }
.reading-explorer svg text { font-family:"DejaVu Sans",system-ui,sans-serif; font-size:15px; fill:#333; }
.reading-explorer .re-controls { display:flex; flex-wrap:wrap; align-items:end; gap:1rem 1.5rem; padding:.9rem 0; border-top:1px solid #eee; margin-top:.6rem; }
.reading-explorer label { display:flex; flex-direction:column; gap:.25rem; min-width:140px; flex:1 1 150px; }
.reading-explorer label span { display:flex; justify-content:space-between; gap:1rem; }
.reading-explorer input[type=range] { width:100%; accent-color:#278474; min-height:28px; }
.reading-explorer output { font-variant-numeric:tabular-nums; color:#246f63; }
.reading-explorer .re-readout { padding:.65rem .8rem; background:#f1f7f5; border-radius:5px; line-height:1.6; font-variant-numeric:tabular-nums; min-height:3rem; }
.reading-explorer .re-legend { display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:.8rem; margin:.5rem 0; }
.reading-explorer .re-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.reading-explorer .re-legend i { display:inline-block; width:1.4rem; border-top:3px solid; }
.reading-explorer .re-legend i.dashed { border-top-style:dashed; }
.reading-explorer .re-summary { margin:.7rem 0; line-height:1.55; }
.reading-explorer.re-ready .re-summary { display:none; }
.reading-explorer .re-tokens { display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0; }
.reading-explorer .re-token { padding:.35rem .6rem; border-radius:4px; background:#eee; }
.reading-explorer .re-token.active { background:#d9eee8; border-bottom:3px solid #278474; }
.reading-explorer .re-token.future { opacity:.45; }
.reading-flow { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin:1.4rem 0; font-family:"DejaVu Sans",system-ui,sans-serif; font-size:.9rem; }
.reading-flow div { background:#f2f2ef; border-radius:5px; padding:.7rem 1rem; text-align:center; }
.reading-flow .reading-active { background:#d9eee8; }
.reading-flow small { font-size:.85em; }
@media(max-width:650px) {
  .reading-explorer { padding:.8rem; margin:1rem 0; }
  .reading-explorer .re-panels { grid-template-columns:1fr; gap:.6rem; }
  .reading-explorer .re-header { align-items:flex-start; }
  .reading-explorer h4 { line-height:1.4; }
  .reading-explorer label { min-width:120px; }
}
@media(prefers-reduced-motion:reduce) { .reading-explorer * { transition:none!important; } }
@media print { .reading-explorer .re-controls, .reading-explorer button { display:none; } .reading-explorer.re-ready .re-summary { display:block; } }

.reading-flow-vertical { flex-direction:column; gap:.2rem; }
.reading-flow-vertical div { min-width:260px; }
.reading-explorer button:disabled { opacity:.45; cursor:default; }