.blog-diagram{--diagram-bg:#0f1f38;--diagram-border:#94a3b838;--diagram-text:#e2e8f0;--diagram-muted:#94a3b8;--diagram-soft:#ffffff12;--diagram-cyan:#22d3ee;border:1px solid var(--diagram-border);background:linear-gradient(180deg, #22d3ee0f, #0f1f3800 42%), var(--diagram-bg);width:min(100%,880px);color:var(--diagram-text);border-radius:12px;margin:2rem auto;padding:clamp(1rem,2.5vw,1.5rem);box-shadow:0 18px 44px #0f172a2e}.blog-diagram__title{text-align:center;letter-spacing:.08em;text-transform:uppercase;margin:0 auto 1rem;font-size:.78rem;font-weight:800;line-height:1.4}.blog-diagram__panel{border:1px solid color-mix(in srgb, var(--accent) 46%, transparent);background:color-mix(in srgb, var(--accent) 7%, transparent);border-radius:10px;width:100%;min-width:0;padding:1.1rem}.blog-diagram__step-chain{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem;display:flex}.blog-diagram__step-group{justify-content:center;align-items:center;gap:.55rem;min-width:0;display:flex}.blog-diagram__chip{border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);min-height:2.25rem;color:var(--diagram-text);background:#ffffff0f;border-radius:8px;justify-content:center;align-items:center;padding:.45rem .8rem;font-size:.88rem;font-weight:650;line-height:1.35;display:inline-flex}.blog-diagram__connector{--accent:var(--diagram-cyan);flex:none;display:inline-block;position:relative}.blog-diagram__connector--horizontal{background:color-mix(in srgb, var(--accent) 62%, transparent);width:2rem;height:2px}.blog-diagram__connector--horizontal:after{content:"";border-top:2px solid color-mix(in srgb, var(--accent) 74%, transparent);border-right:2px solid color-mix(in srgb, var(--accent) 74%, transparent);width:.45rem;height:.45rem;position:absolute;top:50%;right:-1px;transform:translateY(-50%)rotate(45deg)}.blog-diagram__connector--vertical{background:color-mix(in srgb, var(--accent) 62%, transparent);width:2px;height:2rem;margin:.35rem auto}.blog-diagram__connector--vertical:after{content:"";border-right:2px solid color-mix(in srgb, var(--accent) 74%, transparent);border-bottom:2px solid color-mix(in srgb, var(--accent) 74%, transparent);width:.45rem;height:.45rem;position:absolute;bottom:-1px;left:50%;transform:translate(-50%)rotate(45deg)}.blog-diagram--comparison{grid-template-columns:minmax(0,1fr);align-items:center;gap:1rem;max-width:880px;display:grid}.blog-diagram__vs{color:var(--diagram-muted);letter-spacing:.12em;justify-content:center;align-items:center;font-size:.78rem;font-weight:800;display:flex}.blog-diagram__result{border-top:1px solid var(--diagram-soft);text-align:center;gap:.3rem;margin-top:1rem;padding-top:.9rem;display:grid}.blog-diagram__result span{color:var(--diagram-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:800}.blog-diagram__result strong{color:#7dd3fc;font-size:.95rem;font-weight:800;line-height:1.45}.blog-diagram--flow{flex-direction:column;align-items:center;max-width:760px;display:flex}.blog-diagram__flow-item{flex-direction:column;align-items:center;width:100%;display:flex}.blog-diagram__flow-card{width:min(100%,620px);color:var(--diagram-text);text-align:center;background:#22d3ee12;border:1px solid #22d3ee57;border-radius:8px;padding:.85rem 1rem;font-size:.95rem;font-weight:700;line-height:1.45}.blog-diagram--process{gap:.9rem;max-width:920px;display:grid}.blog-diagram__process-row{border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);background:#ffffff0b;border-radius:10px;grid-template-columns:minmax(11rem,.9fr) auto minmax(8rem,.8fr) auto minmax(11rem,.9fr);align-items:center;gap:.75rem;padding:.95rem;display:grid}.blog-diagram__process-row .blog-diagram__step-chain{gap:0}.blog-diagram__process-label,.blog-diagram__outcome{text-align:center;font-size:.9rem;font-weight:800;line-height:1.4}.blog-diagram__process-label{color:color-mix(in srgb, var(--accent) 88%, white)}.blog-diagram__outcome{color:#7dd3fc}.blog-diagram--box{max-width:760px}.blog-diagram__center-flow{padding:.35rem 0 1.1rem}.blog-diagram__detail-list{gap:.65rem;margin-top:.4rem;display:grid}.blog-diagram__detail-row{border:1px solid var(--diagram-soft);color:var(--diagram-muted);text-align:center;background:#ffffff0b;border-radius:8px;justify-content:center;gap:1rem;padding:.75rem .9rem;font-size:.92rem;font-weight:650;line-height:1.45;display:flex}.blog-diagram__detail-row strong{color:var(--diagram-text)}.blog-diagram--table{max-width:860px}.blog-diagram__metric-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;display:grid}.blog-diagram__metric-card{border:1px solid var(--diagram-soft);text-align:center;background:#ffffff0b;border-radius:10px;align-content:center;gap:.7rem;min-height:8.75rem;padding:1rem;display:grid}.blog-diagram .blog-diagram__metric-card h4,.blog-diagram .blog-diagram__metric-card p{margin:0}.blog-diagram .blog-diagram__metric-card h4{color:var(--diagram-text);text-align:center;font-size:.95rem;font-weight:800;line-height:1.35}.blog-diagram .blog-diagram__metric-card p{color:var(--diagram-muted);text-align:center;font-size:.9rem;font-weight:650;line-height:1.55}.blog-diagram--timeline{max-width:760px}.blog-diagram__timeline-list{gap:1rem;display:grid}.blog-diagram__timeline-row{gap:.55rem;display:grid}.blog-diagram__timeline-meta{color:var(--diagram-text);justify-content:space-between;align-items:center;gap:1rem;font-size:.92rem;font-weight:750;line-height:1.35;display:flex}.blog-diagram__timeline-meta strong{color:color-mix(in srgb, var(--accent) 86%, white);flex:none}.blog-diagram__timeline-segments{grid-template-columns:repeat(var(--segment-count), minmax(0, 1fr));gap:.28rem;display:grid}.blog-diagram__timeline-segment{background:#ffffff14;border:1px solid #94a3b824;border-radius:4px;min-height:.95rem}.blog-diagram__timeline-segment--filled{border-color:color-mix(in srgb, var(--accent) 72%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, white), var(--accent))}@media (max-width:760px){.blog-diagram{width:100%;margin:1.5rem auto;padding:.95rem}.blog-diagram--comparison{grid-template-columns:1fr}.blog-diagram__vs{min-height:1.5rem}.blog-diagram__process-row{grid-template-columns:1fr;justify-items:center}.blog-diagram__process-row>.blog-diagram__connector--horizontal{width:2px;height:1.5rem}.blog-diagram__process-row>.blog-diagram__connector--horizontal:after{border-top:0;border-left:0;border-right:2px solid color-mix(in srgb, var(--accent) 74%, transparent);border-bottom:2px solid color-mix(in srgb, var(--accent) 74%, transparent);inset:auto auto -1px 50%;transform:translate(-50%)rotate(45deg)}.blog-diagram__metric-list{grid-template-columns:1fr}.blog-diagram__metric-card{min-height:0}}@media (max-width:560px){.blog-diagram__step-chain,.blog-diagram__step-group{flex-direction:column}.blog-diagram__step-group{width:100%}.blog-diagram__chip{width:min(100%,18rem)}.blog-diagram__step-group .blog-diagram__connector--horizontal{width:2px;height:1.25rem}.blog-diagram__step-group .blog-diagram__connector--horizontal:after{border-top:0;border-left:0;border-right:2px solid color-mix(in srgb, var(--accent) 74%, transparent);border-bottom:2px solid color-mix(in srgb, var(--accent) 74%, transparent);inset:auto auto -1px 50%;transform:translate(-50%)rotate(45deg)}.blog-diagram__timeline-meta{flex-direction:column;align-items:flex-start;gap:.25rem}.blog-diagram__timeline-segments{gap:.18rem}.blog-diagram__timeline-segment{border-radius:3px;min-height:.8rem}}