.free-diagrams{max-width:1280px;margin:auto;padding:30px 24px 100px;color:#e9f0fa}.free-diagrams h2{font-size:clamp(30px,4vw,42px);line-height:1.15;letter-spacing:-.025em;margin:12px 0}.free-diagrams>p{color:#acbdd2;max-width:680px;line-height:1.65}.fd-eyebrow{color:#54d8bb;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.fd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}.fd-card{background:linear-gradient(145deg,#151f32,#101827);border:1px solid #2c3c52;border-radius:24px;overflow:hidden;display:flex;flex-direction:column}.fd-head{padding:25px 26px 0}.fd-head h3{font-size:23px;line-height:1.2;color:#f5f8ff;margin:10px 0}.fd-head p{color:#a9bacf;line-height:1.5;margin:0}.fd-subject{color:#54d8bb;font-size:12px;letter-spacing:.1em;font-weight:700;text-transform:uppercase}.fd-image{margin:20px 16px 0;background:#0c1728;border:1px solid #263a51;border-radius:18px;overflow:hidden}.fd-image svg{display:block;width:100%;height:auto}.fd-image [data-part]{cursor:pointer;transition:opacity .2s,filter .2s}.fd-image [data-part]:hover,.fd-image [data-part]:focus,.fd-image [data-part].active{filter:drop-shadow(0 0 8px #66dfcf);outline:none}.fd-controls{display:flex;gap:8px;flex-wrap:wrap;padding:17px 22px 0}.fd-controls button{border:1px solid #35465e;border-radius:999px;background:#18253a;color:#d6e3f2;font-family:inherit;font-size:13px;font-weight:600;line-height:1.3;padding:8px 12px;cursor:pointer}.fd-controls button[aria-pressed=true]{background:#113d3d;border-color:#42c8ad;color:#adf5df}.fd-controls button:focus-visible,.fd-image [data-part]:focus-visible{outline:2px solid #77ebd1;outline-offset:3px}.fd-info{margin:17px 22px 22px;padding:17px 18px;border:1px solid #2c4055;border-radius:14px;background:#121d2e;min-height:112px}.fd-info h4{margin:0;color:#ecf8f5;font-size:16px}.fd-info p{margin:7px 0 0;color:#b4c6d9;font-size:14px;line-height:1.55}.fd-source{margin:auto 22px 20px;color:#899cb4;font-size:12px}.fd-source a{color:#8cbacb;text-decoration:underline;text-underline-offset:3px}@media(max-width:800px){.fd-grid{grid-template-columns:1fr}.free-diagrams{padding:20px 16px 75px}.fd-head{padding:22px 20px 0}}

/* Медленное движение показывает миграцию лейкоцита и направление кровотока. */
@keyframes fd-migrate{0%,15%{transform:translateY(-8px);opacity:1}70%,80%{transform:translateY(43px);opacity:1}100%{transform:translateY(43px);opacity:0}}
@keyframes fd-stream{to{stroke-dashoffset:-56}}
.fd-leukocyte{animation:fd-migrate 6s ease-in-out infinite}.fd-flow{animation:fd-stream 2s linear infinite}@media(prefers-reduced-motion:reduce){.fd-leukocyte,.fd-flow{animation:none}}

.fd-pause{align-self:flex-start;margin:10px 22px 0;padding:5px 0;background:none;border:0;color:#9cb7ce;font-family:inherit;font-size:12px;font-weight:500;line-height:1.3;cursor:pointer}.fd-pause:hover{color:#dffaf3}.fd-pause:focus-visible{outline:2px solid #77ebd1;outline-offset:3px}.fd-paused .fd-leukocyte,.fd-paused .fd-flow{animation-play-state:paused}