/* 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; } }

/* ---- scroll-driven scenes ---- */
.th-anim.th-scroll { height: calc(var(--th-vh, 280) * 1vh); overflow: visible; border: 0; background: none; box-shadow: none; margin: 1.6rem 0; }
.th-scroll__pin { position: sticky; top: var(--th-sticky, 112px); border: 1px solid var(--th-line); border-radius: 12px; background: var(--th-bg); overflow: hidden; box-shadow: 0 6px 24px rgba(2, 12, 20, .25); }
.th-scroll__pin svg { max-height: calc(100vh - var(--th-sticky, 112px) - 64px); }
.th-scroll__hint { position: absolute; left: 0; right: 0; bottom: .6rem; text-align: center; font-size: 12.5px; color: var(--th-dim); transition: opacity .3s; pointer-events: none; }
@media print { .th-anim.th-scroll { height: auto; } .th-scroll__pin { position: static; } }

/* Flowcharts (replace ASCII diagrams): <div class="th-flow"> with .fl-n nodes, .fl-a arrows. Pure CSS; a soft light
   walks through the nodes in order to show the direction of the data. */
.th-flow {
  --th-bg: #061a29; --th-panel: #0a2438; --th-line: #1c4a6a; --th-text: #d7e8f3; --th-dim: #8fb0c6;
  --th-accent: #38d6c4; --th-gold: #ffd166; --th-warn: #ff8a5c; --th-blue: #4aa8ff;
  margin: 1.4rem 0; padding: 1.1rem 1rem; border: 1px solid var(--th-line); border-radius: 12px;
  background: var(--th-bg); color: var(--th-text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 6px 24px rgba(2, 12, 20, .2);
}
.th-flow * { box-sizing: border-box; }
.th-flow .fl-t { margin: 0 0 .8rem; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--th-accent); font-weight: 700; }
.th-flow .fl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: .5rem 0; }
.th-flow .fl-n {
  position: relative; background: var(--th-panel); border: 1px solid var(--th-line); border-radius: 10px;
  padding: .55rem .6rem; text-align: center; min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center;
  animation: flglow 8s linear infinite; animation-delay: calc(var(--i, 0) * .8s);
}
.th-flow .fl-n b { color: #fff; font-weight: 650; }
.th-flow .fl-n small { color: var(--th-dim); font-size: 12px; margin-top: .1rem; }
.th-flow .fl-n.dec { border-color: var(--th-gold); border-style: dashed; }
.th-flow .fl-n.end { border-color: var(--th-accent); }
.th-flow .fl-n.warn { border-color: var(--th-warn); }
.th-flow .fl-a { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; min-width: 38px; color: var(--th-accent); position: relative; font-size: 11.5px; color: var(--th-dim); }
.th-flow .fl-a::before { content: ""; display: block; width: 100%; min-width: 0; height: 2px; background: var(--th-accent); opacity: .85; }
.th-flow .fl-a::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -5px; border-left: 8px solid var(--th-accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.th-flow .fl-a span { position: absolute; top: -1.2em; left: 0; right: 8px; text-align: center; white-space: nowrap; font-size: 11.5px; color: var(--th-gold); }
/* vertical flowchart */
.th-flow .fl-v { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0; max-width: 460px; margin: 0 auto; }
.th-flow .fl-v .fl-n { width: 100%; flex: 0 0 auto; }
.th-flow .fl-v .fl-a { flex: 0 0 auto; flex-direction: column; min-height: 38px; width: 100%; min-width: 0; }
.th-flow .fl-v .fl-a::before { width: 2px; height: 100%; min-height: 24px; min-width: 0; }
.th-flow .fl-v .fl-a::after { right: auto; left: 50%; top: auto; bottom: 0; margin: 0 0 0 -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--th-accent); border-bottom: 0; }
.th-flow .fl-v .fl-a span { position: absolute; top: 50%; left: calc(50% + 12px); right: auto; margin-top: -.7em; text-align: left; }
.th-flow .fl-side { margin: .5rem auto 0; max-width: 460px; font-size: 12.5px; color: var(--th-dim); text-align: center; }
.th-flow .fl-side b { color: var(--th-warn); }
/* tree: one source feeding several branches */
.th-flow .fl-tree { display: flex; flex-direction: column; align-items: center; }
.th-flow .fl-tree > .fl-n { min-width: 240px; }
.th-flow .fl-tree .fl-stem { width: 2px; height: 22px; background: var(--th-accent); }
.th-flow .fl-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; width: 100%; max-width: 760px; position: relative; padding-top: 22px; }
.th-flow .fl-branches::before { content: ""; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 2px; background: var(--th-accent); }
.th-flow .fl-br { display: flex; flex-direction: column; align-items: center; position: relative; }
.th-flow .fl-br::before { content: ""; position: absolute; top: -22px; left: 50%; width: 2px; height: 22px; background: var(--th-accent); }
.th-flow .fl-chip { font-size: 11.5px; font-weight: 700; color: #032b33; background: var(--th-accent); border-radius: 99px; padding: .05rem .6rem; margin-bottom: .35rem; }
.th-flow .fl-br .fl-n { width: 100%; flex: 1; }
@media (max-width: 640px) {
  .th-flow .fl:not(.fl-v) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .th-flow .fl:not(.fl-v) .fl-n { flex: 0 0 auto; }
  .th-flow .fl:not(.fl-v) .fl-a { flex: 0 0 auto; min-height: 30px; min-width: 0; flex-direction: column; }
  .th-flow .fl:not(.fl-v) .fl-a::before { width: 2px; height: 100%; min-height: 20px; min-width: 0; }
  .th-flow .fl:not(.fl-v) .fl-a::after { right: auto; left: 50%; top: auto; bottom: 0; margin: 0 0 0 -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--th-accent); border-bottom: 0; }
  .th-flow .fl:not(.fl-v) .fl-a span { top: 50%; left: calc(50% + 12px); right: auto; margin-top: -.7em; text-align: left; }
  .th-flow .fl-branches { grid-template-columns: 1fr; padding-top: 0; }
  .th-flow .fl-branches::before, .th-flow .fl-br::before { display: none; }
  .th-flow .fl-br { padding-top: .2rem; }
}
@keyframes flglow { 0%, 11% { border-color: var(--th-gold); box-shadow: 0 0 0 2px rgba(255, 209, 102, .3), 0 0 14px rgba(255, 209, 102, .35); } 16%, 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .th-flow .fl-n { animation: none; } }