/* Video to GIF, APNG & WebP landing page (tools/video-animation-pack only) */
.mt-public .tp-sample{display:grid;gap:16px;padding:22px}
.tp-sample-head{display:grid;gap:6px}
.tp-kicker{margin:0;color:#2a4fa8;font-size:.76rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.tp-sample-head h2{margin:0;font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.25;letter-spacing:-.015em;color:#101828}
.tp-sample-head p:last-child{margin:0;font-size:.92rem;line-height:1.55;color:#4a5670}
.tp-media{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;background:#0d1f3a}
.tp-out-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:.88rem;line-height:1.4;color:#27324a}
.tp-out-name b{flex:1 0 100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:#101828;overflow-wrap:anywhere}
.tp-outs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tp-out{min-width:0;display:grid;align-content:start;gap:10px;padding:10px;border:1px solid #d6dfec;border-radius:14px;background:#f8faff}
.tp-out.tp-in{background:#fff}
.tp-out.tp-in .tp-out-name em{background:#e3e9f3;color:#27324a}
.tp-out.tp-best{border-color:#8fcfab;background:#f1fbf5}
.tp-out picture{display:block}
.tp-out-text{display:grid;gap:6px}
.tp-out-text>p:last-child{margin:0;font-size:.84rem;line-height:1.45;color:#3d4a63}
.tp-out-name em{padding:1px 8px;border-radius:999px;background:#d9f2e3;color:#0f5c33;font-size:.7rem;font-style:normal;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.tp-size{font-size:1rem;font-weight:800;color:#101828;font-variant-numeric:tabular-nums}
.tp-bar{display:block;height:8px;border-radius:999px;background:#e3e9f3;overflow:hidden}
.tp-bar i{display:block;height:100%;border-radius:inherit;background:#6a7894}
.tp-best .tp-bar i{background:#16834b}
.tp-w8{width:8%}
.tp-w19{width:19%}
.tp-w29{width:29%}
.tp-w100{width:100%}
.tp-verdict{margin:0;padding:12px 14px;border-left:4px solid #16834b;border-radius:0 10px 10px 0;background:#f1fbf5;font-size:.94rem;line-height:1.5;color:#1d2a40}
.tp-note{margin:0;font-size:.82rem;line-height:1.55;color:#4a5670;overflow-wrap:anywhere}
.tp-sample video:focus-visible{outline:3px solid #1f5cf0;outline-offset:3px}

@media (max-width:480px){
  .mt-public .tp-sample{padding:16px;gap:14px}
  .tp-outs{grid-template-columns:minmax(0,1fr);gap:10px}
  .tp-out{grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:center}
  .tp-out.tp-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:340px){
  .tp-out{grid-template-columns:minmax(0,1fr)}
}