.yp{--yp-paper:#fff8ec;--yp-ink:#0f172a;--yp-ink-2:#334155;--yp-amber:#f59e0b;--yp-fail:#be123c;display:block;width:100%;margin:12px 0}html.dark .yp{--yp-paper:#1d1912;--yp-ink:#f4f1ea;--yp-ink-2:#cbc6ba}.yp-track{position:relative;height:10px;overflow:hidden;border:2px solid var(--yp-ink);border-radius:999px;background:var(--yp-paper)}.yp-fill{width:0;height:100%;border-radius:999px;background:var(--yp-amber);transition:width 0.4s cubic-bezier(0.22,1,0.36,1)}.yp-fill::after{content:'';display:block;width:40%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.55),rgba(255,255,255,0));animation:yp-sheen 1.3s linear infinite}@keyframes yp-sheen{from{transform:translateX(-100%)}to{transform:translateX(260%)}}.yp-msg{margin:8px 0 0;min-height:1.3em;font-size:0.875rem;font-weight:700;line-height:1.3;color:var(--yp-ink-2);text-align:center}.yp.is-done .yp-fill::after,.yp.is-fail .yp-fill::after{animation:none;display:none}.yp.is-fail .yp-fill{background:var(--yp-fail)}.yp[hidden]{display:none}@media (prefers-reduced-motion:reduce){.yp-fill{transition:none}.yp-fill::after{animation:none;display:none}}