/* Original Typhon keynote geometry, adapted for a responsive case-study figure. */
.bx-loop{width:100%;margin:0;background:#050505;color:#f5f5f5;padding:clamp(34px,5vw,76px) clamp(20px,5.5vw,86px) 24px;overflow:hidden;isolation:isolate;font-family:BX Switzer,Helvetica Neue,Arial,sans-serif;box-sizing:border-box}
.bx-loop *{box-sizing:border-box}
.bx-loop .bx-loop-title{margin:0;text-align:center;font-size:clamp(26px,3.1vw,46px);font-weight:400;line-height:1.15;letter-spacing:-.045em;color:#f5f5f5}
.bx-loop-graph{position:relative;width:min(100%,900px);aspect-ratio:900/470;margin:clamp(24px,3vw,42px) auto clamp(35px,4vw,58px)}
.bx-loop .bx-loop-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bx-loop-wires path{fill:none;stroke:#ffffff26;stroke-width:1;vector-effect:non-scaling-stroke}
.bx-loop-wires .bx-loop-beam{stroke:#ffffffb3;stroke-width:1.2;stroke-dasharray:26 460;animation:bx-loop-beam-run 5.4s linear infinite;animation-delay:var(--loop-delay,0s);animation-play-state:paused}
.bx-loop[data-loop-state=running] .bx-loop-beam{animation-play-state:running}
@keyframes bx-loop-beam-run{from{stroke-dashoffset:486}to{stroke-dashoffset:0}}
.bx-loop-node{position:absolute;display:grid;place-items:center;width:12.7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(64% 64% at 50% 26%,#2c2c2c 0%,#1c1c1c 52%,#111111 100%);border:1px solid #ffffff1a;box-shadow:inset 0 1px 0 #ffffff24,0 18px 40px -16px #000000b3}
.bx-loop-node:after{content:'';position:absolute;left:12%;right:12%;top:7%;height:40%;border-radius:50%;background:linear-gradient(#ffffff1f,transparent);pointer-events:none}
.bx-loop .bx-loop-node>svg{position:relative;width:36%;height:36%;color:#dedede}
.bx-loop-node>span{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);font-size:clamp(10px,1vw,14px);font-weight:400;letter-spacing:-.016em;line-height:1.2;color:#b6b6b6;white-space:nowrap}
.bx-loop-node-hot{border-color:#ffffff38}
.bx-loop .bx-loop-node-hot>svg{color:#ffffff}
.bx-loop-node-hot:before{content:'';position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,#ffffff1f,transparent 68%);pointer-events:none}
.bx-loop-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20.6%;aspect-ratio:1;border-radius:18%;padding:2.8%;display:flex;flex-direction:column;justify-content:center;gap:clamp(3px,.9vw,10px);background:linear-gradient(155deg,#2c2c2c 0%,#1c1c1c 55%,#111111 100%);border:1px solid #ffffff1f;box-shadow:inset 0 1px 0 #ffffff29,0 28px 56px -20px #000000b3}
.bx-loop-row{display:block;height:2px;min-height:1px;flex-shrink:0;border-radius:2px;background:#ffffff2e}
.bx-loop-row-short{width:52%}.bx-loop-row-medium{width:76%}.bx-loop-row-long{width:100%}
.bx-loop-row-lit{background:#ffffff}
.bx-loop-glint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:210%;height:1px;background:linear-gradient(90deg,transparent,#ffffff59,transparent)}
.bx-loop-spark{position:absolute;top:50%;width:3px;height:3px;border-radius:50%;background:#ffffff;transform:translateY(-50%);box-shadow:0 0 10px #ffffff99}
.bx-loop-spark-left{left:-58%}.bx-loop-spark-right{right:-58%}
.bx-loop .bx-loop-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3.5vw,56px);max-width:1180px;margin:0 auto;padding:0;list-style:none}
.bx-loop-steps>li{min-width:0;border-top:1px solid #ffffff24;padding-top:18px}
.bx-loop-step-index{display:block;font-family:BX Mono,ui-monospace,monospace;font-size:9px;line-height:1.5;letter-spacing:.08em;color:#8c8c8c;margin-bottom:10px}
.bx-loop .bx-loop-steps h4{margin:0;font-size:clamp(16px,1.5vw,22px);font-weight:400;line-height:1.2;letter-spacing:-.025em;color:#f5f5f5}
.bx-loop .bx-loop-steps p{margin:10px 0 0;font-size:clamp(12px,1.03vw,15px);line-height:1.6;letter-spacing:0;color:#a6a6a6;max-width:24em;text-wrap:pretty}
.bx-loop-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:48px auto 0;border-top:1px solid #ffffff1a;padding-top:18px}
.bx-loop .bx-loop-caption>p{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 12px;margin:0;font-size:10px;font-weight:400;line-height:1.6;color:#8e8e8e}
.bx-loop-caption>p>span{color:#b9b9b9}
.bx-loop-caption>p>i{font-style:normal;color:#686868}
.bx-loop .bx-loop-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:36px;margin:0;padding:6px 0 6px 10px;border:0;background:transparent;color:#b9b9b9;font-family:inherit;font-size:10px;font-weight:400;line-height:1.4;cursor:pointer}
.bx-loop .bx-loop-toggle:hover{color:#ffffff}
.bx-loop .bx-loop-toggle:focus-visible{outline:1px solid #ffffff;outline-offset:5px}
.bx-loop .bx-loop-toggle>svg{display:block;width:13px;height:13px}
.bx-loop .bx-loop-toggle[hidden],.bx-loop[data-loop-playing=true] .bx-loop-play,.bx-loop[data-loop-playing=false] .bx-loop-pause{display:none}
@media(max-width:650px){.bx-loop{padding:34px 20px 18px}.bx-loop-graph{aspect-ratio:900/560;margin:27px auto 43px}.bx-loop-node{width:15.4%}.bx-loop-node>span{top:calc(100% + 10px);font-size:10px}.bx-loop-core{width:23%;padding:3.2%;gap:5px}.bx-loop-row{height:1px}.bx-loop-spark{width:2px;height:2px}.bx-loop .bx-loop-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 25px}.bx-loop-steps>li{padding-top:14px}.bx-loop-step-index{margin-bottom:8px}.bx-loop .bx-loop-steps h4{font-size:18px}.bx-loop .bx-loop-steps p{font-size:12px;line-height:1.55;margin-top:8px}.bx-loop-caption{margin-top:33px;align-items:flex-start;gap:14px}.bx-loop .bx-loop-caption>p{display:block;font-size:9px;max-width:180px}.bx-loop-caption>p>span{display:block;margin-bottom:3px}.bx-loop-caption>p>i{display:none}.bx-loop .bx-loop-toggle{font-size:9px;padding:0;min-height:36px}}
@media(max-width:380px){.bx-loop{padding-left:17px;padding-right:17px}.bx-loop .bx-loop-title{font-size:25px}.bx-loop .bx-loop-steps{gap:26px 20px}.bx-loop-core{gap:4px}.bx-loop .bx-loop-caption>p{max-width:145px}.bx-loop .bx-loop-toggle>svg{width:12px;height:12px}.bx-loop .bx-loop-toggle{gap:4px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.bx-loop .bx-loop-beam{animation:none;opacity:0}.bx-loop .bx-loop-toggle{display:none}}
