.sanad{position:relative;padding:48px 0 24px;color:var(--ink);font-family:var(--sans);text-align:center;isolation:isolate}
.sanad *{box-sizing:border-box}
.sanad .sanad-heading{margin:0 auto 38px;max-width:600px}
.sanad .sanad-heading h1,.sanad .sanad-heading h2{font:400 clamp(34px,5vw,48px)/1.6 var(--serif);margin:0 0 6px;color:var(--ink)}
.sanad .sanad-heading p{font:400 14px/1.9 var(--sans);color:var(--muted);margin:0 auto;max-width:350px;text-wrap:balance}
.sanad svg{display:block;fill:none;stroke:var(--accent);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sanad svg path{vector-effect:non-scaling-stroke}
.sanad .sanad-flourish{width:190px;height:46px;margin:0 auto 12px}
.sanad .sanad-chain{list-style:none;padding:0;margin:0}
.sanad .sanad-level{position:relative;margin:0;padding:0 8px}
.sanad .sanad-number{display:block;font:400 11px/1.6 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);margin-bottom:5px}
.sanad .sanad-names{position:relative;max-width:620px;margin:auto}
.sanad .sanad-name{font:400 28px/1.7 var(--serif);margin:0;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
.sanad .sanad-note{font:400 14px/1.95 var(--sans);color:var(--muted);max-width:460px;margin:4px auto 0;text-wrap:pretty}
.sanad .sanad-link{width:200px;height:42px;margin:8px auto 5px;stroke:var(--blue);opacity:.65}
.sanad .sanad-endpoint .sanad-name{font-size:38px;color:var(--blue);line-height:1.65}
.sanad .sanad-endpoint .sanad-names{padding:16px 12px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--blue) 7%,transparent),transparent 70%)}
.sanad .sanad-endpoint .sanad-number{color:var(--accent)}
.sanad .sanad-turn{padding-top:8px}
.sanad .sanad-turn .sanad-note{color:var(--accent);font-weight:500}
.sanad .sanad-turn .sanad-names:before,.sanad .sanad-turn .sanad-names:after{content:'';display:inline-block;width:30px;height:9px;border-top:1px solid var(--accent);border-radius:50%;position:absolute;top:50%;opacity:.6}
.sanad .sanad-turn .sanad-names:before{right:0;transform:rotate(-15deg)}
.sanad .sanad-turn .sanad-names:after{left:0;transform:rotate(15deg)}
.sanad .sanad-split .sanad-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:100%;align-items:center}
.sanad .sanad-fork,.sanad .sanad-join{width:100%;height:42px;margin:0 auto}
.sanad .sanad-split .sanad-note{margin-top:5px}
.sanad .sanad-endpoint:last-child{padding-top:10px}
.sanad .sanad-endpoint:last-child .sanad-flourish{margin-top:10px}
@media(min-width:700px){
 .sanad{padding-top:65px}
 .sanad .sanad-heading{margin-bottom:48px}
 .sanad .sanad-name{font-size:32px}
 .sanad .sanad-endpoint .sanad-name{font-size:46px}
 .sanad .sanad-link{height:48px;width:300px}
 .sanad .sanad-note{max-width:490px}
 .sanad .sanad-split{max-width:680px;margin:auto}
 .sanad .sanad-turn .sanad-names:before,.sanad .sanad-turn .sanad-names:after{width:95px}
}
@media(max-width:360px){
 .sanad .sanad-name{font-size:25px}
 .sanad .sanad-endpoint .sanad-name{font-size:33px}
 .sanad .sanad-split .sanad-name{font-size:24px}
 .sanad .sanad-turn .sanad-names:before,.sanad .sanad-turn .sanad-names:after{width:14px}
}