/* Tidehunter animation figures. Self-contained: the card carries its own dark "sonar" palette,
   so it looks the same on a light or dark page. No external fonts, no frameworks. */
.th-anim {
  --th-bg: #061a29;
  --th-panel: #0a2438;
  --th-line: #1c4a6a;
  --th-text: #d7e8f3;
  --th-dim: #8fb0c6;
  --th-accent: #38d6c4;   /* true / correct */
  --th-warn: #ff8a5c;     /* error / assumed */
  --th-gold: #ffd166;     /* emphasis */
  --th-blue: #4aa8ff;
  margin: 1.6rem 0;
  border: 1px solid var(--th-line);
  border-radius: 12px;
  background: var(--th-bg);
  color: var(--th-text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(2, 12, 20, .25);
}
.th-anim * { box-sizing: border-box; }
.th-anim__head { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 1rem .1rem; }
.th-anim__tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--th-accent); font-weight: 700; }
.th-anim__title { font-weight: 650; color: #fff; }
.th-anim svg { display: block; width: 100%; height: auto; background: var(--th-bg); }
.th-anim svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.th-anim__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .55rem 1rem; border-top: 1px solid var(--th-line); background: var(--th-panel); }
.th-anim__btn { appearance: none; border: 1px solid var(--th-line); background: #0d3049; color: var(--th-text); border-radius: 8px; padding: .3rem .75rem; cursor: pointer; font: inherit; }
.th-anim__btn:hover { border-color: var(--th-accent); }
.th-anim__btn:focus-visible, .th-anim input:focus-visible { outline: 2px solid var(--th-gold); outline-offset: 2px; }
.th-anim__scrub { flex: 1 1 140px; min-width: 120px; }
.th-anim__params { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: .55rem 1rem .7rem; background: var(--th-panel); border-top: 1px solid var(--th-line); }
.th-anim__param { display: flex; flex-direction: column; min-width: 150px; flex: 1 1 170px; }
.th-anim__param label { display: flex; justify-content: space-between; gap: .5rem; font-size: 12.5px; color: var(--th-dim); }
.th-anim__param output { color: var(--th-gold); font-variant-numeric: tabular-nums; font-weight: 650; }
.th-anim input[type=range] { width: 100%; accent-color: var(--th-accent); }

.th-anim__read { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .45rem .9rem; margin: 0; padding: .7rem 1rem; border-top: 1px solid var(--th-line); }
.th-anim__read div { background: var(--th-panel); border: 1px solid var(--th-line); border-radius: 8px; padding: .35rem .6rem; }
.th-anim__read dt { font-size: 11.5px; color: var(--th-dim); }
.th-anim__read dd { margin: 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; color: #fff; }
.th-anim__read dd.warn { color: var(--th-warn); }
.th-anim__read dd.good { color: var(--th-accent); }
.th-anim__cap { margin: 0; padding: .65rem 1rem .85rem; border-top: 1px solid var(--th-line); color: var(--th-dim); font-size: 13.5px; }
.th-anim__cap b { color: var(--th-text); }
.th-anim__cap .katex { font-size: 1.02em; color: var(--th-text); }
.th-anim__err { padding: 1rem; color: var(--th-warn); }

@media (max-width: 560px) {
  .th-anim__head { flex-direction: column; gap: 0; }
  .th-anim__param { flex-basis: 100%; }
}
@media print { .th-anim__bar, .th-anim__params { display: none; } }