.sp-diagram{--sp-ink:#24211e;--sp-muted:#655d52;--sp-red:#a32125;--sp-purple:#795879;box-sizing:border-box;margin:2rem 0;padding:28px;border:1px solid #e5d7ba;border-radius:24px;background:#f5ebd6;color:var(--sp-ink);font-size:15px;line-height:1.5}
.sp-diagram *{box-sizing:border-box}.sp-diagram h3{margin:6px 0 22px!important;font-size:26px!important;color:var(--sp-ink)}
.sp-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.sp-diagram button{margin:0;padding:8px 12px;border:1px solid #cfc0a3;border-radius:20px;background:#fff9ed;color:var(--sp-ink);font-family:inherit;font-weight:600;font-size:12px;line-height:1.5;cursor:pointer;box-shadow:none}.sp-diagram button[aria-pressed=true]{background:var(--sp-red);border-color:var(--sp-red);color:#fff}.sp-diagram button:hover{border-color:var(--sp-red)}.sp-diagram :focus-visible{outline:3px solid var(--sp-purple);outline-offset:3px}
.sp-stations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none!important;padding:0!important;margin:0 0 24px!important}.sp-stations li{position:relative;display:flex;align-items:center;flex-direction:column;gap:6px;text-align:center;margin:0!important;min-width:0;transition:opacity .2s}.sp-stations li[data-skipped=true]{opacity:.3}.sp-stations strong{font-size:12px}.sp-stations small{font-size:10px;color:var(--sp-muted)}.sp-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#eaddde;color:var(--sp-purple);font-size:24px}.sp-stations li:not(:last-child):after{content:'→';position:absolute;right:-17px;top:10px;color:var(--sp-purple);font-size:18px}.sp-route[data-active=true] .sp-stations li:not([data-skipped=true]) .sp-icon{animation:sp-packet 1.8s ease-in-out 1}.sp-stations li:nth-child(2) .sp-icon{animation-delay:.15s!important}.sp-stations li:nth-child(3) .sp-icon{animation-delay:.3s!important}.sp-stations li:nth-child(4) .sp-icon{animation-delay:.45s!important}
.sp-route-result{background:#fffaf0;padding:16px;border-radius:16px;min-height:136px}.sp-route-result strong{color:var(--sp-red)}.sp-route-result p{margin:8px 0 0!important;font-size:13px}.sp-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0!important;color:var(--sp-muted);font-size:11px!important}
@keyframes sp-packet{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px);box-shadow:0 5px 0 #79587918}}
@media(max-width:520px){.sp-diagram{padding:20px 16px;border-radius:18px}.sp-diagram h3{font-size:23px!important}.sp-stations{gap:14px}.sp-stations li:not(:last-child):after{right:-12px;font-size:13px}.sp-stations small{font-size:9px}.sp-stations strong{font-size:10px}.sp-icon{width:38px;height:38px;font-size:20px}.sp-route-result{min-height:158px}.sp-controls button{font-size:11px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.sp-diagram *{animation:none!important;transition:none!important}}