.eli5-visual { margin:24px 0; padding:20px 0; border-block:1px solid var(--line); }
.detail-content .eli5-visual :is(h2,h3) { margin:0 0 12px; padding:0; border:0; font:600 21px/1.4 Georgia,serif; }
.eli5-visual-scroll { overflow-x:auto; max-width:100%; }
.eli5-visual-scroll:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.eli5-visual svg { display:block; width:100%; height:auto; min-width:520px; max-height:340px; font:16px/1.4 system-ui,sans-serif; }
.eli5-visual svg.eli5-visual-mobile { display:none; }
.eli5-visual text { fill:var(--ink); }
.eli5-visual svg:is([data-visual-kind="trace"],[data-visual-kind="mix"]) { min-width:740px; max-height:none; }
.eli5-axis { fill:none; stroke:var(--muted); stroke-width:1.5; }
.eli5-mark { stroke:var(--muted); stroke-width:1; }
.eli5-visual .tone-0 { fill:#cfe3dc; }
.eli5-visual .tone-1 { fill:#d8e6f1; }
.eli5-visual .tone-2 { fill:#f0dfbf; }
.dark .eli5-visual .tone-0 { fill:#28473d; }
.dark .eli5-visual .tone-1 { fill:#283f51; }
.dark .eli5-visual .tone-2 { fill:#51432b; }
.eli5-visual figcaption { max-width:65ch; margin-top:12px; color:var(--muted); font-size:14px; line-height:1.7; }
.eli5-scroll-hint { display:none; }
@media(max-width:850px) { :is(.lesson-reader,.detail-content) .eli5-scroll-hint { display:block; font-size:12px; color:var(--muted); margin:8px 0; } }
@media(max-width:600px) {
  .lesson-reader .eli5-visual-scroll[data-mobile-layout="true"] { overflow-x:clip; }
  .lesson-reader .eli5-visual-scroll[data-mobile-layout="true"] + .eli5-scroll-hint { display:none; }
  .lesson-reader .eli5-visual svg.eli5-visual-desktop:is([data-visual-kind="bars"],[data-visual-kind="matrix"],[data-visual-kind="tokens"],[data-visual-kind="points"]) { display:none; }
  .lesson-reader .eli5-visual svg.eli5-visual-mobile { display:block; width:100%; min-width:0; max-height:none; font-size:15px; }
  .lesson-reader .eli5-visual .eli5-mobile-unit,
  .lesson-reader .eli5-visual .eli5-mobile-axis-label { fill:var(--muted); font-size:14px; }
  .lesson-reader .eli5-visual .eli5-mobile-row-label,
  .lesson-reader .eli5-visual .eli5-mobile-label { font-weight:600; }
  .lesson-reader .eli5-visual .eli5-mobile-column-label,
  .lesson-reader .eli5-visual .eli5-mobile-annotation { fill:var(--muted); font-size:14px; }
  .lesson-reader .eli5-visual .eli5-mobile-value,
  .lesson-reader .eli5-visual .eli5-mobile-token { font-weight:600; }
}