.diagram{margin:0}.diagram__heading{margin-bottom:1.6rem}.diagram__grid{gap:clamp(22px,2.8vw,40px);display:grid}.diagram__canvas{border-radius:var(--radius);border:1px solid var(--grey-line);background:#f2f4f6;overflow:hidden}.diagram__canvas svg{width:100%;height:auto;display:block}.diagram__legend{color:var(--text-2);flex-wrap:wrap;gap:.5rem 1.4rem;max-width:none;margin:0;padding:.9rem clamp(14px,2vw,20px) 1rem;font-size:.86rem;display:flex}.diagram__legend span{align-items:center;gap:.5rem;display:inline-flex}.swatch{border-radius:3px;flex:none;width:18px;height:5px}.swatch--them{background:#7a8492}.swatch--you{background:var(--navy)}.diagram__key{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.5vw,56px);margin:0;padding:0;list-style:none;display:grid}@media (width<=720px){.diagram__key{grid-template-columns:minmax(0,1fr)}}.diagram__key>li{border-top:1px solid var(--line);grid-template-columns:2rem 1fr;align-content:start;gap:1rem;padding-block:1.05rem;display:grid}.diagram__key>li:nth-child(3),.diagram__key>li:last-child{border-bottom:1px solid var(--line)}.diagram__n{background:var(--grey);color:#fff;font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;width:1.75rem;height:1.75rem;margin-top:.12rem;font-size:.85rem;font-weight:700;display:grid}.diagram__key>li.is-mine .diagram__n{background:var(--navy)}.diagram__key h3{flex-wrap:wrap;align-items:baseline;gap:.5rem .7rem;margin-bottom:.3rem;font-size:1rem;display:flex}.diagram__who{font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line-2);border-radius:var(--radius-pill);white-space:nowrap;padding:.14rem .55rem;font-size:.72rem;font-weight:700}.diagram__key>li.is-mine .diagram__who{color:#fff;border-color:var(--navy);background:var(--navy)}.diagram__key p{color:var(--text-2);max-width:44ch;font-size:.95rem}.diagram--compact .diagram__key p{font-size:.92rem}.spd-mine{stroke-dasharray:420;stroke-dashoffset:420px;animation:1.5s cubic-bezier(.22,.7,.2,1) .25s forwards spd-draw}@keyframes spd-draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.spd-mine{stroke-dasharray:none;stroke-dashoffset:0;animation:none}}