.bp{--bp-line:var(--accent);--bp-ink:var(--foreground);--bp-dur:1.5s;width:100%;max-width:100%;aspect-ratio:var(--bp-ratio);color:var(--bp-line);margin:0;position:relative;container-type:inline-size}.bp-art{-webkit-mask:var(--bp-src) center / contain no-repeat;-webkit-mask:var(--bp-src) center / contain no-repeat;mask:var(--bp-src) center / contain no-repeat;background:currentColor;position:absolute;inset:0}@media (max-resolution:1.49x){@container (max-width:480px){.bp-art{-webkit-mask-image:var(--bp-src-sm);-webkit-mask-image:var(--bp-src-sm);mask-image:var(--bp-src-sm)}}}.bp-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.bp-lines line{stroke:currentColor;stroke-width:1.25px;fill:none}.bp-dim line:first-child{stroke-dasharray:1;stroke-dashoffset:0}.bp-leader line{stroke-dasharray:1;stroke-dashoffset:0;opacity:.9}.bp-dim-label{background:var(--background);color:var(--bp-line);font:500 clamp(10px, .8vw, 12px)/1.2 var(--font-spec-mono), ui-monospace, monospace;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;padding:1px 6px;position:absolute;translate:-50% -50%}.bp-dim-label[data-vertical]{rotate:-90deg}.bp-anchor{background:var(--bp-line);pointer-events:none;border-radius:50%;width:9px;height:9px;position:absolute;translate:-50% -50%}.bp-anchor:after{content:"";border:1px solid var(--bp-line);opacity:0;border-radius:50%;position:absolute;inset:-7px}.bp-callout{color:var(--bp-ink);white-space:nowrap;align-items:center;gap:.6rem;text-decoration:none;display:inline-flex;position:absolute;translate:-50% -50%}.bp-callout[data-side=left]{flex-direction:row-reverse}.bp-callout[data-side=top]{flex-direction:column-reverse;gap:.35rem}.bp-callout[data-side=bottom]{flex-direction:column;gap:.35rem}.bp-callout[data-side=right]{translate:calc(-1 * var(--bp-num) / 2) -50%}.bp-callout[data-side=left]{translate:calc(-100% + var(--bp-num) / 2) -50%}.bp-callout[data-side=top]{translate:-50% calc(-100% + var(--bp-num) / 2)}.bp-callout[data-side=bottom]{translate:-50% calc(-1 * var(--bp-num) / 2)}.bp{--bp-num:clamp(26px, 2.4vw, 36px)}.bp-num{width:var(--bp-num);height:var(--bp-num);border:1.5px solid var(--bp-line);background:var(--background);color:var(--bp-line);font:700 clamp(12px, 1.05vw, 15px)/1 var(--font-inter), sans-serif;font-variant-numeric:tabular-nums;border-radius:50%;flex-shrink:0;place-items:center;transition:background-color .16s,color .16s;display:grid}.bp-callout-label{font:500 clamp(12px, 1vw, 15px)/1.2 var(--font-inter), sans-serif}a.bp-callout{pointer-events:auto}a.bp-callout:before{content:"";position:absolute;inset:-8px -10px}a.bp-callout:hover .bp-num,a.bp-callout:focus-visible .bp-num{background:var(--bp-line);color:var(--background)}a.bp-callout:hover .bp-callout-label,a.bp-callout:focus-visible .bp-callout-label{text-underline-offset:4px;text-decoration:underline}a.bp-callout:focus-visible{outline:2px solid var(--primary);outline-offset:6px}.bp-scanbox{pointer-events:none;position:absolute;inset:-3% 0;overflow:hidden}.bp-scan{pointer-events:none;opacity:0;position:absolute;inset:0;translate:0}.bp-scan:before{content:"";background:var(--bp-line);width:1.5px;position:absolute;top:0;bottom:0;left:0}.bp-scan:after{content:"";background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--bp-line) 16%, transparent));width:clamp(40px,9%,120px);position:absolute;top:0;bottom:0;right:100%}@keyframes bp-reveal{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes bp-scan-move{0%{opacity:1;translate:0}92%{opacity:1}to{opacity:0;translate:100%}}@keyframes bp-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes bp-fade{0%{opacity:0}to{opacity:1}}@keyframes bp-pop{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}@keyframes bp-ring{0%{opacity:.7;scale:.6}to{opacity:0;scale:1.9}}@keyframes bp-idle-scan{0%,82%{opacity:0;translate:0}83%{opacity:.55;translate:0}99%{opacity:.55;translate:100%}to{opacity:0;translate:100%}}@keyframes bp-failsafe{to{clip-path:inset(0);opacity:1;stroke-dashoffset:0;scale:1}}html[data-motion=on] .bp[data-reveal]:not([data-state=play]) .bp-art{clip-path:inset(0 100% 0 0);animation:1ms 4s forwards bp-failsafe}html[data-motion=on] .bp[data-reveal]:not([data-state=play]) :is(.bp-dim line:first-child,.bp-leader line){stroke-dashoffset:1px;animation:1ms 4s forwards bp-failsafe}html[data-motion=on] .bp[data-reveal]:not([data-state=play]) :is(.bp-dim-label,.bp-tick,.bp-anchor,.bp-callout){opacity:0;animation:1ms 4s forwards bp-failsafe}html[data-motion=on] .bp[data-state=play] .bp-art{animation:bp-reveal var(--bp-dur) cubic-bezier(.6, 0, .3, 1) both}html[data-motion=on] .bp[data-state=play] .bp-scan{animation:bp-scan-move var(--bp-dur) cubic-bezier(.6, 0, .3, 1) both}html[data-motion=on] .bp[data-state=play] .bp-dim line:first-child{animation:bp-draw .7s cubic-bezier(.3, 0, .2, 1) calc(var(--bp-dur) * .7 + var(--i) * .15s) both}html[data-motion=on] .bp[data-state=play] :is(.bp-tick,.bp-dim-label){animation:bp-fade .35s ease calc(var(--bp-dur) * .7 + var(--i) * .15s + .45s) backwards}html[data-motion=on] .bp[data-state=play] .bp-anchor{animation:bp-pop .3s cubic-bezier(.3, 1.4, .5, 1) calc(var(--bp-dur) * .8 + var(--i) * .18s) backwards}html[data-motion=on] .bp[data-state=play] .bp-leader line{animation:bp-draw .45s cubic-bezier(.3, 0, .2, 1) calc(var(--bp-dur) * .8 + var(--i) * .18s + .15s) both}html[data-motion=on] .bp[data-state=play] .bp-callout{animation:bp-pop .35s cubic-bezier(.3, 1.4, .5, 1) calc(var(--bp-dur) * .8 + var(--i) * .18s + .45s) backwards}html[data-motion=on] .bp[data-state=play] .bp-anchor:after{animation:bp-ring 2.6s ease-out calc(var(--bp-dur) + 1s + var(--i) * .4s) infinite}html[data-motion=on] .bp[data-state=play][data-bp-loop=scan] .bp-scan{animation:bp-scan-move var(--bp-dur) cubic-bezier(.6, 0, .3, 1) both, bp-idle-scan 11s linear calc(var(--bp-dur) + 2s) infinite}html[data-motion=on] .bp[data-inview=false] .bp-scan,html[data-page=hidden] .bp .bp-scan,html[data-motion=on] .bp[data-inview=false] .bp-anchor:after,html[data-page=hidden] .bp .bp-anchor:after{animation-play-state:paused}.bp .contents:has(>a.bp-callout:is(:hover,:focus-visible))>.bp-anchor{transition:scale .16s;scale:1.7}.bp-callout:is(:hover,:focus-visible){z-index:2}