.loop-panel{background:#ffffff04;border:1px solid #ffffff14;border-radius:12px;overflow:hidden}.loop-panel__top{border-bottom:1px solid #ffffff0f;align-items:center;gap:9px;padding:12px 16px;display:flex}.loop-panel__dot{background:var(--color-primary);border-radius:999px;width:6px;height:6px}.loop-panel__title,.loop-panel__live{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:.12em;text-transform:uppercase}.loop-panel__title{color:#ffffff8c}.loop-panel__live{color:var(--color-primary);margin-left:auto}.loop-panel__meter{padding:16px 16px 0}.loop-panel__meter-row{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:.1em;text-transform:uppercase;color:#ffffff73;justify-content:space-between;display:flex}.loop-panel__count{font-variant-numeric:tabular-nums}.loop-panel__bar{background:#ffffff17;border-radius:999px;height:2px;margin-top:10px;overflow:hidden}.loop-panel__bar-fill{transform-origin:0;background:var(--color-primary);width:100%;height:100%;transition:transform .5s var(--ease-out-quint);display:block}.loop-panel__steps{margin:0;padding:14px 16px 4px;list-style:none}.loop-panel__steps>li{border-top:1px solid #ffffff0d;align-items:center;gap:12px;padding:10px 0;display:flex}.loop-panel__steps>li:first-child{border-top:0}.loop-mark{flex:none;width:14px;height:14px}.loop-panel__step{font-size:var(--text-15);text-transform:capitalize;transition:color .4s var(--ease-standard);flex:1;line-height:1.3}.loop-panel__state{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:.1em;text-transform:uppercase;transition:color .4s var(--ease-standard)}.loop-panel__steps>li[data-state=done] .loop-mark{color:var(--color-primary)}.loop-panel__steps>li[data-state=done] .loop-panel__step{color:#ffffffb8}.loop-panel__steps>li[data-state=done] .loop-panel__state{color:#fff6}.loop-panel__steps>li[data-state=running] .loop-mark,.loop-panel__steps>li[data-state=running] .loop-panel__state{color:var(--color-primary)}.loop-panel__steps>li[data-state=running] .loop-panel__step{color:#fff}.loop-panel__steps>li[data-state=queued] .loop-mark{color:#ffffff38}.loop-panel__steps>li[data-state=queued] .loop-panel__step{color:#ffffff61}.loop-panel__steps>li[data-state=queued] .loop-panel__state{color:#ffffff47}.loop-panel__foot{font-family:var(--font-mono);font-size:var(--text-11);letter-spacing:.08em;text-transform:uppercase;color:#ffffff61;transition:color .45s var(--ease-standard),background-color .45s var(--ease-standard);border-top:1px solid #ffffff0f;align-items:center;gap:9px;padding:13px 16px;display:flex}.loop-panel__foot .loop-mark{color:#ffffff4d;transition:color .45s var(--ease-standard)}.loop-panel[data-looping] .loop-panel__foot{color:var(--color-primary);background:#ff51000d}.loop-panel[data-looping] .loop-panel__foot .loop-mark{color:var(--color-primary)}@media (prefers-reduced-motion:reduce){.loop-panel__bar-fill,.loop-panel__step,.loop-panel__state,.loop-panel__foot,.loop-panel__foot .loop-mark{transition:none}}html[data-reduce-motion=true] .loop-panel__bar-fill,html[data-reduce-motion=true] .loop-panel__step,html[data-reduce-motion=true] .loop-panel__state,html[data-reduce-motion=true] .loop-panel__foot,html[data-reduce-motion=true] .loop-panel__foot .loop-mark{transition:none}