.sb{--sb-navy:#0b1f3a;--sb-slate:#5b6b7f;--sb-line:#dde3ea;--sb-teal:#0e9bae;--sb-teal-ink:#0a6f7d;--sb-orange-ink:#8a4a12;--sb-orange-tint:#fbebdd;--sb-red-ink:#a12a2a;--sb-red-tint:#fbe4e4;--sb-green:#13744e;--sb-green-tint:#e3f4ec;--sb-loop:6s;color:var(--sb-navy);background:#f3f5f8;border-radius:22px;max-width:1000px;margin-inline:auto;position:relative;container-type:inline-size}.sb-stage{grid-template-columns:minmax(0,.7fr) minmax(0,1.7fr) minmax(0,.85fr);align-items:center;gap:clamp(.75rem,2.4cqi,1.4rem);padding:clamp(1.25rem,4.5cqi,2.75rem);font-size:clamp(.85rem,1.45cqi,.98rem);display:grid}.sb-file,.sb-check,.sb-done{box-shadow:0 0 0 1px var(--sb-line);background:#fff;border-radius:14px;gap:.6em;padding:1em 1.1em;display:grid}.sb-label{color:var(--sb-teal-ink);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:.4em;margin:0;font-size:.82em;font-weight:700;display:flex}.sb-doc{background:#f3f5f8;border-radius:10px;align-items:center;gap:.6em;margin:0;padding:.6em .75em;display:flex}.sb-doc svg{color:#b42e2e;flex:none}.sb-doc>span{display:grid}.sb-doc b{font-size:.95em}.sb-doc>span>span{color:var(--sb-slate);font-size:.85em}.sb-check ul{gap:.35em;margin:0;padding:0;list-style:none;display:grid}.sb-check li{border-radius:8px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:.6em;padding:.4em .5em;display:grid}.sb-field{font-weight:600}.sb-spec{color:var(--sb-slate);font-size:.92em}.sb-sent{font-variant-numeric:tabular-nums;font-size:.92em;font-weight:600}.sb-mark{background:var(--sb-green-tint);color:var(--sb-green);border-radius:50%;justify-content:center;align-items:center;width:1.5em;height:1.5em;display:inline-flex}.sb-check li[data-state=off]{background:var(--sb-red-tint)}.sb-check li[data-state=off] .sb-sent{color:var(--sb-red-ink)}.sb-check li[data-state=off] .sb-mark{color:var(--sb-red-ink);background:#fff}.sb-check li[data-state=missing]{background:var(--sb-orange-tint)}.sb-check li[data-state=missing] .sb-sent{color:var(--sb-orange-ink)}.sb-check li[data-state=missing] .sb-mark{color:var(--sb-orange-ink);background:#fff}.sb-done{box-shadow:0 0 0 2px var(--sb-teal), 0 14px 30px -22px #0b1f3a99}.sb-done p{margin:0}.sb-status{background:var(--sb-orange-tint);color:var(--sb-orange-ink);border-radius:999px;justify-self:start;padding:.2em .65em;font-size:.85em;font-weight:700}.sb-count{font-weight:600}.sb-wait{color:var(--sb-slate);font-size:.88em}.sb-register{background:var(--sb-green-tint);color:var(--sb-green);border-radius:10px;padding:.45em .65em;font-size:.85em;font-weight:700}.sb-pause{border:1px solid var(--sb-line);color:var(--sb-navy);cursor:pointer;z-index:2;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex;position:absolute;top:10px;right:10px}.sb-pause:hover{background:var(--sb-navy);color:#fff}.sb-pause span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (hover:hover){.sb-pause{opacity:0}.sb:hover .sb-pause,.sb:focus-within .sb-pause{opacity:1}}@container (max-width:720px){.sb-stage{grid-template-columns:minmax(0,1fr);gap:.6rem;padding:1rem}.sb-wait{display:none}}@container (max-width:420px){.sb-check li{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) auto}.sb-spec{display:none}}@media (prefers-reduced-motion:no-preference){.sb-pause{transition:opacity .18s,background .18s}.sb[data-play] .sb-file{animation:sb-file var(--sb-loop) cubic-bezier(.16, 1, .3, 1) .94 forwards}.sb[data-play] .sb-check li:first-child{animation:sb-r1 var(--sb-loop) ease .94 forwards}.sb[data-play] .sb-check li:nth-child(2){animation:sb-r2 var(--sb-loop) ease .94 forwards}.sb[data-play] .sb-check li:nth-child(3){animation:sb-r3 var(--sb-loop) ease .94 forwards}.sb[data-play] .sb-check li:nth-child(4){animation:sb-r4 var(--sb-loop) ease .94 forwards}.sb[data-play] .sb-check li:nth-child(5){animation:sb-r5 var(--sb-loop) ease .94 forwards}.sb[data-play] .sb-mark{animation:sb-mark var(--sb-loop) ease .94 forwards}.sb[data-play] .sb-done{animation:sb-done var(--sb-loop) cubic-bezier(.16, 1, .3, 1) .94 forwards}.sb[data-play] .sb-register{animation:sb-register var(--sb-loop) ease .94 forwards}.sb[data-paused] *{animation-play-state:paused!important}}@keyframes sb-file{0%,2%{opacity:0;transform:translateY(-14px)}8%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-r1{0%,10%{opacity:0;transform:translate(-10px)}14%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-r2{0%,15%{opacity:0;transform:translate(-10px)}19%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-r3{0%,20%{opacity:0;transform:translate(-10px)}24%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-r4{0%,25%{opacity:0;transform:translate(-10px)}29%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-r5{0%,30%{opacity:0;transform:translate(-10px)}34%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-mark{0%,36%{opacity:0;transform:scale(.6)}42%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-done{0%,52%{opacity:0;transform:translate(14px)}58%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes sb-register{0%,64%{opacity:0;transform:scale(.9)}70%,95%{opacity:1;transform:none}to{opacity:0}}
