.svhBp{border:1px solid var(--line);background:var(--paper);color:var(--ink);text-align:start;border-radius:24px;padding:clamp(12px,2vw,20px);position:relative;box-shadow:0 34px 78px #24385e29;container-type:inline-size}.svhBpTop{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;padding:2px 4px 14px;display:flex}.svhBpTitle{letter-spacing:-.01em;font-size:13.5px;font-weight:650;line-height:1.3}.svhBpLegend{color:var(--muted);flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;font-size:12px;line-height:1.3;list-style:none;display:flex}.svhBpLegend li{align-items:center;gap:7px;display:inline-flex}.svhBpDot{border-radius:50%;flex:none;width:10px;height:10px}.svhBpDot-build{background:conic-gradient(var(--pillar-violet) 0 25%, var(--pillar-blue) 0 50%, var(--pillar-green) 0 75%, var(--pillar-orange) 0)}.svhBpDot-reuse{background:var(--ink)}.svhBpBody{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:14px;display:grid}.svhBpRail,.svhBpLayer{animation:svhIn .8s var(--lp-ease) both;animation-delay:calc(var(--i,0) * .11s + .2s)}@keyframes svhIn{0%{opacity:0;transform:translateY(12px)}}.svhBpTag{background:color-mix(in srgb, var(--paper) 72%, transparent);color:var(--ink);letter-spacing:-.005em;border-radius:999px;align-self:flex-start;align-items:center;gap:7px;padding:5px 10px 5px 8px;font-size:11.5px;font-weight:650;line-height:1.2;transition:background .2s;display:inline-flex}[dir=rtl] .svhBpTag{letter-spacing:0;padding:5px 8px 5px 10px;font-size:12.5px}.svhBpTag:hover{background:var(--paper)}.svhBpTag i{background:var(--lp-tone);border-radius:50%;flex:none;width:8px;height:8px}.svhBpTag .arrow{transition:translate .2s var(--lp-ease);font-size:10px;display:inline-block}.svhBpTag:hover .arrow{translate:2px -2px}[dir=rtl] .svhBpTag:hover .arrow{translate:-2px -2px}.svhBpRail{position:relative}.svhBpTag:after{content:"";border-radius:16px;position:absolute;inset:0}@media (hover:hover) and (prefers-reduced-motion:no-preference){.svhBpRail,.svhBpLayer{transition:translate .3s var(--lp-ease)}.svhBpRail:hover,.svhBpLayer:hover{translate:0 -3px}}.svhBpRail{background:var(--lp-tile);border-radius:16px;flex-direction:column;gap:12px;padding:16px 16px 18px;display:flex}.svhBpRailText{color:color-mix(in srgb, var(--ink) 72%, transparent);margin:0;font-size:13px;line-height:1.45}.svhBpSteps{flex-direction:column;flex:1;justify-content:space-between;gap:10px;margin:6px 0 0;padding:0;list-style:none;display:flex;position:relative}.svhBpSteps:before{content:"";border-inline-start:1.5px dashed color-mix(in srgb, var(--ink) 34%, transparent);position:absolute;inset-block:8px;inset-inline-start:5.25px}.svhBpSteps:after{content:"";top:8px;background:var(--pillar-orange);border-radius:50%;width:7px;height:7px;animation:5.5s ease-in-out infinite svhTravel;position:absolute;inset-inline-start:2.5px}.svhBpSteps li{padding-inline-start:26px;font-size:13.5px;font-weight:620;line-height:1.25;position:relative}.svhBpSteps li:before{content:"";inset-inline-start:0;border:2px solid var(--ink);background:var(--lp-tile);box-sizing:border-box;border-radius:50%;width:12px;height:12px;margin-top:-6px;position:absolute;top:50%}@keyframes svhTravel{0%{opacity:0;top:8px}12%{opacity:1}88%{opacity:1}to{opacity:0;top:calc(100% - 15px)}}.svhBpLayers{flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;display:flex}.svhBpLayer{background:var(--lp-tile);border-radius:16px;grid-template-columns:minmax(0,172px) minmax(0,1fr);align-items:center;gap:16px;padding:15px 16px;display:grid;position:relative}.svhBpLayer:not(:last-child):after{content:"";z-index:1;top:100%;background:repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 10px);background-size:1.5px 20px;width:1.5px;height:16px;animation:1.4s linear infinite svhDash;position:absolute;inset-inline-start:34px}@keyframes svhDash{to{background-position:0 20px}}.svhBpHead{flex-direction:column;align-items:flex-start;gap:9px;min-width:0;display:flex}.svhBpName{letter-spacing:-.02em;margin:0;font-size:17px;font-weight:600;line-height:1.2}[dir=rtl] .svhBpName{letter-spacing:0}.svhBpPills{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.svhBpPills li{background:color-mix(in srgb, var(--paper) 66%, transparent);border-radius:10px;padding:6px 11px;font-size:12.5px;font-weight:560;line-height:1.25}[dir=rtl] .svhBpPills li{font-size:13px}.svhBpLayer-ink{--lp-tone:var(--paper);background:var(--ink);color:var(--paper)}.svhBpLayer-ink .svhBpTag{background:color-mix(in srgb, var(--paper) 16%, transparent);color:var(--paper)}.svhBpLayer-ink .svhBpTag:hover{background:color-mix(in srgb, var(--paper) 26%, transparent)}.svhBpLayer-ink .svhBpPills li{background:color-mix(in srgb, var(--paper) 15%, transparent)}@container (max-width:860px){.svhBpBody{grid-template-columns:minmax(0,158px) minmax(0,1fr)}.svhBpLayer{grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:14px;padding:14px}}@container (max-width:700px){.svhBpBody{grid-template-columns:minmax(0,1fr)}.svhBpSteps{flex-flow:wrap;flex:none;justify-content:flex-start;gap:6px;margin:0}.svhBpSteps:before,.svhBpSteps:after,.svhBpSteps li:before{display:none}.svhBpSteps li{background:color-mix(in srgb, var(--paper) 66%, transparent);border-radius:10px;padding:6px 11px;font-size:12.5px}.svhBpLayers{gap:12px}.svhBpLayer{grid-template-columns:minmax(0,1fr);gap:12px}.svhBpLayer:not(:last-child):after{height:12px;inset-inline-start:28px}.svhBpHead{flex-flow:wrap;justify-content:space-between;align-items:center;gap:8px 12px}.svhBpTitle{flex:100%}}@media (prefers-reduced-motion:reduce){.svhBpRail,.svhBpLayer,.svhBpSteps:after,.svhBpLayer:not(:last-child):after{animation:none}.svhBpSteps:after{display:none}}.svhPhoto{aspect-ratio:var(--svh-ratio,16 / 10);background:color-mix(in srgb, var(--ink) 8%, transparent);border-radius:14px;margin-top:18px;position:relative;overflow:hidden}.svhPhoto img{object-fit:cover;transition:transform .7s var(--lp-ease)}.lpTile:hover .svhPhoto img{transform:scale(1.04)}@media (max-width:700px){.svhPhoto{aspect-ratio:16/10}}.svhCode{margin-top:18px}.svhCode .lpCode{box-shadow:none}.svhCode .lpCodePane{font-size:12.5px}[dir=rtl] .svhCode .lpCodePane:before{letter-spacing:0;text-transform:none;font-size:12px}.svhCode .lpCodeNote{color:#8d97a8;max-width:none;font-size:11px;line-height:1.5}@media (prefers-reduced-motion:reduce){.lpTile:hover .svhPhoto img{transform:none}}body:has(.svhBp) .lpLead{text-wrap:pretty}body:has(.svhBp) .lpStepsFoot p{text-wrap:pretty}.svhWrap{white-space:normal}@media (max-width:820px),(pointer:coarse){.svhBpTag{position:relative}.svhBpTag:after{content:"";position:absolute;inset:-10px -4px}}