/* DOT slash loaders · DOT Design System 1.1.0 (28.10.2026). Load after ui/tokens.css.
   A slash = the master slash silhouette: box 40×71, base width 10, slope 30:71.
   Built from HTML <i> with clip-path, so it inherits currentColor and works in any theme. */
.dot-sl{--h:48px;display:inline-flex;align-items:flex-end;color:var(--dot-text);vertical-align:middle}
.dot-sl i{display:block;flex:none;height:var(--h);aspect-ratio:40/71;background:currentColor;clip-path:polygon(0 100%,25% 100%,100% 0,75% 0)}
.dot-sl i+i{margin-left:calc(var(--h)*-17/71)}
.dot-sl--rhythm i{animation:dot-sl-acc .88s steps(1,end) infinite}
.dot-sl--rhythm i:nth-child(2){animation-delay:.22s}.dot-sl--rhythm i:nth-child(3){animation-delay:.44s}.dot-sl--rhythm i:nth-child(4){animation-delay:.66s}
@keyframes dot-sl-acc{0%{background:var(--dot-red)}25%,100%{background:currentColor}}
.dot-sl--assembly i{animation:dot-sl-grow 1.8s cubic-bezier(.22,.9,.25,1) infinite}
.dot-sl--assembly i:last-child{background:var(--dot-red)}
.dot-sl--assembly i:nth-child(2){animation-delay:.18s}.dot-sl--assembly i:nth-child(3){animation-delay:.36s}.dot-sl--assembly i:nth-child(4){animation-delay:.54s}
@keyframes dot-sl-grow{0%{clip-path:polygon(0 100%,25% 100%,25% 100%,0 100%);opacity:1}25%,70%{clip-path:polygon(0 100%,25% 100%,100% 0,75% 0);opacity:1}88%,100%{clip-path:polygon(0 100%,25% 100%,100% 0,75% 0);opacity:0}}
.dot-sl--progress{gap:0}.dot-sl--progress i{background:var(--dot-border);transition:background var(--dot-motion-fast)}.dot-sl--progress i.on{background:var(--dot-red)}
.dot-sl-progress{display:inline-flex;align-items:center;gap:16px}.dot-sl-progress strong{font-size:calc(var(--h,48px)*.55);font-variant-numeric:tabular-nums;letter-spacing:-.04em;min-width:3.2em}
.dot-sl--bridge{--h:72px;position:relative;width:calc(var(--h)*1.6);height:var(--h);display:inline-block}
.dot-sl--bridge b{position:absolute;bottom:0;border-radius:calc(var(--h)*.08)}
.dot-sl--bridge b:first-child{left:0;width:37.5%;height:54%;background:var(--dot-text)}
.dot-sl--bridge b:nth-child(2){right:0;width:46%;height:80%;background:var(--dot-control-border)}
.dot-sl--bridge i{position:absolute;left:27.5%;bottom:0;height:80%;background:var(--dot-red);animation:dot-sl-bridge 1.6s cubic-bezier(.22,.9,.25,1) infinite}
@keyframes dot-sl-bridge{0%{clip-path:polygon(0 100%,25% 100%,25% 100%,0 100%);opacity:1}62%,80%{clip-path:polygon(0 100%,25% 100%,100% 0,75% 0);opacity:1}100%{clip-path:polygon(0 100%,25% 100%,100% 0,75% 0);opacity:0}}
.dot-sl--inline{--h:1em;margin-left:.45em}.dot-sl--inline i{animation:dot-sl-blink .6s steps(1,end) infinite}.dot-sl--inline i:nth-child(2){animation-delay:.3s}
@keyframes dot-sl-blink{0%{opacity:1}50%,100%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.dot-sl i{animation:none!important;opacity:1!important;clip-path:polygon(0 100%,25% 100%,100% 0,75% 0)!important}.dot-sl--rhythm i:nth-child(2){background:var(--dot-red)}}