.spf-lab-path,.spf-policy-path{display:flex;align-items:center;gap:0}.spf-lab-path>.spf-actor,.spf-policy-path>.spf-actor{flex:1;min-width:0}.spf-lab-arrow{color:#245bce;text-align:center;flex:0 0 110px;font-size:13px;padding:10px 0}.spf-lab-arrow span{display:block}.spf-lab-arrow>b{display:block;border-top:2px solid #245bce;font-size:28px;line-height:0;text-align:right;margin-top:14px}.spf-lab-work{margin:24px 0;border:1px solid #bac9d9;border-radius:10px;padding:20px;background:#fff}.spf-lab-work h3{margin:0 0 16px}.spf-records{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.spf-record{border:1px solid #93abc5;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f5f8fc}.spf-record>svg{height:55px;width:60px}.spf-record code{display:block;white-space:pre-wrap}.spf-kept{border:2px solid #245bce;background:#eef4ff}.spf-discarded{border-style:dashed;color:#49627d}.spf-record>span,.spf-joined{font-size:14px}.spf-joined{border-top:1px solid #bac9d9;padding-top:10px}.spf-lab-wire{text-align:center;color:#245bce;padding:18px;font-weight:650}.spf-policy-path .spf-actor{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:8px}.spf-qualifier-key{display:flex;flex-wrap:wrap;gap:16px;font-size:14px}.spf-lab-options{display:flex;gap:20px;flex-wrap:wrap}.spf-lab-options>label{display:flex;flex:1;min-width:180px;flex-direction:column;align-items:stretch;margin:0;gap:8px}.spf-lab-options select{width:100%;min-height:44px;white-space:normal;color:#193653;border:1px solid #8095ad;background:white;border-radius:6px;padding:8px;font:inherit;font-size:14px}.spf-lab-options>.spf-check{flex-direction:row;align-items:center}.spf-check input{min-width:20px;min-height:20px}.spf-budget-number{font-size:32px;color:#245bce}.spf-budget-chain{padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;list-style:none}.spf-budget-chain li{position:relative;border:1px dashed #93abc5;background:#f5f8fc;border-radius:7px;padding:12px;min-width:0}.spf-budget-chain li>b{display:block;font-size:20px}.spf-budget-chain li>span{display:block;font-size:12px}.spf-budget-chain .spf-spent{border:2px solid #245bce;background:#eef4ff}.spf-budget-chain .spf-blocked{border:2px solid #9c2922;background:#fff0ee}.spf-local-test{padding:12px;background:#eef4ff;border-left:3px solid #245bce}.spf-chain-tip{color:#245bce;font-size:20px!important}.spf-forward-path{display:flex;align-items:center}.spf-forward-path>.spf-actor{flex:1;min-width:0}.spf-forward-path>.spf-lab-arrow{flex-basis:75px}.spf-forward-path .spf-ip{font-size:18px}.spf-envelope-strip{display:flex;align-items:center;gap:18px;border:1px solid #93abc5;border-radius:8px;background:#f5f8fc;padding:16px;margin:20px 0}.spf-envelope-strip svg{width:100px;height:65px;flex:none}.spf-envelope-strip code,.spf-envelope-strip span{display:block}.spf-envelope-strip span{font-size:13px;margin-top:6px}.spf-handling{border-top:2px dashed #93abc5;margin-top:20px;padding-top:20px;display:flex;gap:18px;align-items:center}.spf-handling>div{flex:1}.spf-handling p{font-size:14px}.spf-lab .spf-actor small{font-size:13px}.spf-lab[data-step='2'] .spf-kept,.spf-lab[data-step='3'] .spf-result{animation:spf-query .5s both}.spf-lab[data-playing='true'] .spf-flow-active{animation:spf-query 1.3s infinite alternate}@media(max-width:1100px){.spf-lab-path,.spf-policy-path,.spf-forward-path{flex-direction:column;align-items:stretch}.spf-lab-arrow,.spf-forward-path>.spf-lab-arrow{flex:0 0 auto;padding:16px}.spf-lab-arrow>b{border-top:0;line-height:1;text-align:center;margin-top:0;transform:rotate(90deg);font-size:32px}.spf-lab-work{padding:16px}.spf-lab-options>label{min-width:0;flex-basis:100%}.spf-envelope-strip{flex-direction:column;align-items:flex-start}.spf-records{grid-template-columns:1fr}.spf-handling{flex-wrap:wrap}.spf-budget-chain{grid-template-columns:repeat(2,minmax(0,1fr))}.spf-budget-chain code{font-size:12px}.spf-forward-path .spf-ip{font-size:22px}}
.spf-lab-dns-exchange{flex:0 0 110px;color:#245bce;text-align:center;font-size:12px;padding:10px 0}.spf-lab-dns-exchange span{display:block}.spf-lab-dns-exchange b{display:block;border-top:2px solid #245bce;line-height:0;font-size:26px;margin:14px 0 18px}.spf-lab-dns-exchange b:first-of-type{text-align:left}.spf-lab-dns-exchange b:last-of-type{text-align:right}.spf-lab-arrow{position:relative}.spf-lab[data-playing='true'] .spf-flow-active:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#245bce;bottom:7px;animation:spf-travel-x 1.8s linear infinite}.spf-lab[data-step='2'] .spf-budget-chain>.spf-spent{animation-name:spf-query;animation-duration:.35s;animation-fill-mode:both}@keyframes spf-travel-x{from{left:0}to{left:95%}}@keyframes spf-travel-y{from{top:15%}to{top:85%}}@media(max-width:1100px){.spf-lab-dns-exchange{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;padding:12px;gap:10px}.spf-lab-dns-exchange span{grid-row:1}.spf-lab-dns-exchange b{grid-row:2;margin:0;border:0;line-height:1;text-align:center!important;transform:rotate(90deg)}.spf-lab[data-playing='true'] .spf-flow-active:after{left:calc(50% - 3px);bottom:auto;animation-name:spf-travel-y}}
/* A vertical chain keeps each include's arrow attached to the next evaluation. */
.spf-budget-chain{grid-template-columns:1fr;gap:20px}.spf-budget-chain li{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(150px,.65fr);align-items:center;gap:10px;min-height:52px;padding:9px 14px}.spf-budget-chain .spf-chain-tip{position:absolute;bottom:-23px;left:50%;line-height:22px;font-size:20px!important;z-index:1}.spf-budget-chain code{font-size:14px}.spf-budget-chain li>b{font-size:18px}@media(max-width:1100px){.spf-budget-chain{grid-template-columns:1fr}.spf-budget-chain li{grid-template-columns:25px minmax(0,1fr);gap:4px 8px;padding:10px}.spf-budget-chain li>span:not(.spf-chain-tip){grid-column:2}.spf-budget-chain code{font-size:13px}}
@media(max-width:700px){.spf-lab .spf-compare{flex-direction:column;gap:10px}.spf-handling{flex-direction:column;align-items:stretch}.spf-handling>b{text-align:center;transform:rotate(90deg)}}
.spf-query-right b:first-of-type{text-align:right}.spf-query-right b:last-of-type{text-align:left}
@media(prefers-reduced-motion:reduce){.spf-lab *,.spf-lab *::before,.spf-lab *::after{animation:none!important;transition:none!important}.spf-lab .spf-flow-active::after{display:none}}