.vp{display:grid;grid-gap:var(--sp-2);gap:var(--sp-2)}.vp,.vp-row{min-inline-size:0}.vp-row{display:flex;align-items:center;gap:var(--sp-3)}.vp-play{flex:none;inline-size:48px;block-size:48px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--c-brand);color:var(--c-on-brand);cursor:pointer;-webkit-tap-highlight-color:transparent}.vp-play:active{transform:scale(.94)}.vp-play:disabled{opacity:.45;cursor:default}.vp-chip:focus-visible,.vp-play:focus-visible,.vp-track:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}.vp-track{position:relative;flex:1 1;min-inline-size:0;block-size:44px;display:flex;align-items:center;cursor:pointer;touch-action:none;border-radius:8px}.vp-line{display:block;inline-size:100%;block-size:4px;border-radius:99px;background:var(--c-line-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-ink-3) 30%,transparent);overflow:hidden}.vp-line i{display:block;block-size:100%}.vp-line i,.vp-thumb{background:var(--c-brand)}.vp-thumb{position:absolute;inset-block-start:calc(50% - 8px);inline-size:16px;block-size:16px;-webkit-margin-start:-8px;margin-inline-start:-8px;border-radius:50%;box-shadow:0 1px 4px rgb(0 0 0/.25);pointer-events:none}.vp-time{flex:none;font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--fs-sm);color:var(--c-ink-2);white-space:nowrap;min-inline-size:4ch;text-align:end}.vp-tools{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.vp-chip{min-block-size:44px;display:inline-flex;align-items:center;gap:6px;padding-inline:14px;border:1px solid var(--c-line-strong);border-radius:var(--r-chip);background:var(--c-surface);color:var(--c-ink);font:inherit;font-weight:var(--fw-semi);text-decoration:none;cursor:pointer}.vp-chip,.vp-fail{font-size:var(--fs-sm)}.vp-fail{margin:0;color:var(--c-danger);line-height:1.6}.vp-staff{background:var(--c-surface-2);border-radius:var(--r-md);padding:var(--sp-3)}